Design Tokens

Brand 600 (Primary)
#3153FF

Brand 500 (Hover Light)
#5574FF

Brand 700 (Hover Dark)
#2745D6

Brand 100 (Tint)
#E0E7FF

Teal 500 (Secondary)
#00B3B8

Teal 600 (Hover Dark)
#00979B

Accent 500
#FF6A3D

Ink 0
#141B34

Verläufe für CTA und States

Primary Gradient
linear-gradient(135deg, #5574FF, #2745D6)

Secondary Gradient
linear-gradient(135deg, #33C8CE, #00979B)

Warn/Accent Gradient
linear-gradient(135deg, #FF8A63, #E5552F)

Typography

Headline Display / Fraunces

Section Headline / Barlow 700

Fließtext als Standard für Shop, Checkout und Admin. Fokus auf Lesbarkeit und klare Hierarchie.

Micro Label Chip: Early Bird Chip: Eingelöst

Buttons, Badges, Alerts

Bezahlt Ausstehend Storniert Eingelöst Entwurf

Info: Die Veranstaltung wurde aktualisiert.

Erfolg: 342 Tickets erfolgreich versendet.

Hinweis: 8 Rechnungen überfällig.

Fehler: SMTP-Verbindung abgelehnt.

Form Atoms & Molecules

Veranstaltungsname Wird auf Ticket und Rechnung angezeigt. Kategorie Explizites Dropdown-Design mit Icon, Caret und Focus-Ring. E-Mail Bestätigt. Kontingent Muss größer als 0 sein. Beschreibung

Checkboxen (buttonartig)

Personalisierung Ticket-Teilen Rechnung per E-Mail

Radio-Auswahl (buttonartig)

Ohne Kosten Mit Gebühr Nicht stornierbar

Inline-Validierung (Formularfelder)

Ticketname (neutral) Noch keine Prüfung erfolgt. E-Mail (Prüfung läuft) Domain und MX werden geprüft. Rechnungsnummern-Präfix Format ist gültig. Kontingent Muss mindestens 1 sein.

Phosphor Icons (eingebettet)

Phosphor Icons: Alerts + Toolbar

Set: Phosphor (fix)

Informationen zur Veranstaltung wurden aktualisiert.

Ticketversand erfolgreich abgeschlossen.

Nur noch 12 Plätze im Kontingent verfügbar.

Zahlungsabgleich fehlgeschlagen. Bitte prüfen.

Home

Nutzer

Ticket

Scan

E-Mail

Kalender

Suche

Einstellungen

Tabs, Accordion, Table

Nr.	Kunde	Status	Betrag	Aktion
ORD-2026-00034	A. Meyer	Bezahlt	79,00 EUR
ORD-2026-00035	M. Hoffmann	Offen	158,00 EUR

Preis 39 EUR, Kontingent 400, Personalisierung optional.

Preis 99 EUR, Kontingent 80, Versand bevorzugt.

742

Verkaufte Tickets

28.940 EUR

Umsatz

81 %

Auslastung

67 %

Scanquote

Beispiellayout: Shop

Ticketshop

Konzert Freie Platzwahl

Sommerkonzert 2026 21.08.2026 · Grugahalle Essen

ab 39 EUR

Late Night Jazz 05.09.2026 · Theater Duisburg

ab 29 EUR

Rock am See 11.09.2026 · Baldeneysee

Restkontingent

Beispiellayout: Checkout

CheckoutSchritt 2 von 3

Vorname Nachname Anschrift E-Mail Ich akzeptiere AGB und Datenschutz

Beispiellayout: Admin Dashboard

Admin Dashboard

12

Events aktiv

173

Offene Rechnungen

94,2 %

Mail-Zustellrate

4.381

Scans heute

Event	Datum	Status	Kontingent	Aktion
Sommerkonzert 2026	21.08.2026	Live	631/1000
Late Night Jazz	05.09.2026	Entwurf	0/500

Beispiellayout: Einlass / Scan

EinlasskontrolleOffline bereit

Scan-Resultat

Ticket gültig. Einlass gewährt.

Ticket: TIC-2026-008214

Name: Anna Müller

Kategorie: Standard

Mehrfachscan-Warnung

Bereits eingelöst um 19:42 Uhr von User einlass-03.

Atomic UI Lab: ANR Tickets

Design Tokens

Typography

Headline Display / Fraunces

Section Headline / Barlow 700

Buttons, Badges, Alerts

Form Atoms & Molecules

Phosphor Icons (eingebettet)

Tabs, Accordion, Table

Beispiellayout: Shop

Beispiellayout: Checkout

Beispiellayout: Admin Dashboard

Beispiellayout: Einlass / Scan

Scan-Resultat

Mehrfachscan-Warnung

Interaktion Demo

Design Tokens

Typography

Headline Display / Fraunces

Section Headline / Barlow 700

Buttons, Badges, Alerts

Form Atoms & Molecules

Phosphor Icons (eingebettet)

Tabs, Accordion, Table

Beispiellayout: Shop

Beispiellayout: Checkout

Beispiellayout: Admin Dashboard

Beispiellayout: Einlass / Scan

Scan-Resultat

Mehrfachscan-Warnung

Interaktion Demo

Neue Veranstaltung