Grundlagen
Colors
DAYONE Farbpalette und Design-Tokens
Grays
$Black
#1A1A1A
--black
$Gray500
#333333
--gray-500
$Gray400
#666666
--gray-400
$Gray300
#999999
--gray-300
$Gray200
#CCCCCC
--gray-200
$Gray100
#F1F1F1
--gray-100
$White
#FFFFFF
--white
Sand
$SandDark
#9E9A94
--sand-dark
$SandMedium
#EDE7DD
--sand-medium
$SandLight
#F7F3EB
--sand-light
$SandLight (Test)
#F4F2EE
--sand-light
Red
$RedDark
#CC443D
--red-dark
$RedMedium
#FF544C
--red-medium
$RedLight
#FF8580
--red-light
Blue
$BlueDark
#0E72C4
--blue-dark
$BlueHighlight
#1487DD
--blue-highlight
$BlueLight
#D6ECFA
--blue-light
Typography
Typografische Skalierung und Schriftstile
Display 3XL — H1
Font size: 48px / 3rem | Line height: 57.6px / 3.6rem | Tracking: 0
--text-display-3xl · --leading-display · --tracking-display · SemiBold
Display 2XL — Regular
Font size: 40px / 2.5rem | Line height: 48px / 3rem | Tracking: 0
--text-display-2xl · --leading-display · --tracking-display · Regular
Display XL — SemiBold
Font size: 32px / 2rem | Line height: 38.4px / 2.4rem | Tracking: 0
--text-display-xl · --leading-display · --tracking-display · SemiBold
Display LG — SemiBold
Font size: 28px / 1.75rem | Line height: 33.6px / 2.1rem | Tracking: 0
--text-display-lg · --leading-display · --tracking-display · SemiBold
Display MD — SemiBold
Font size: 24px / 1.5rem | Line height: 28.8px / 1.8rem | Tracking: 0
--text-display-md · --leading-display · --tracking-display · SemiBold
Display SM — SemiBold
Font size: 20px / 1.25rem | Line height: 24px / 1.5rem | Tracking: 0
--text-display-sm · --leading-display · --tracking-display · SemiBold
Body LG — Regular. Für Intro-Texte und Leads.
Font size: 18px / 1.125rem | Line height: 27px / 1.688rem | Tracking: 0.36px
--text-body-lg · --leading-body · --tracking-body-lg · Regular
Body MD — Regular. Standard Fließtext.
Font size: 16px / 1rem | Line height: 24px / 1.5rem | Tracking: 0.32px
--text-body-md · --leading-body · --tracking-body-md · Regular
Body SM — Regular. Labels und Captions.
Font size: 14px / 0.875rem | Line height: 21px / 1.313rem | Tracking: 0
--text-body-sm · --leading-body · --tracking-display · Regular
Body XS — Regular. Kleingedrucktes.
Font size: 12px / 0.75rem | Line height: 18px / 1.125rem | Tracking: 0
--text-body-xs · --leading-body · --tracking-display · Regular
Logo
Markensymbol, Wortmarke und Kombinationsvarianten
Kreis
Wortmarke
Horizontal
Vertikal
Grundelemente
Badge
Kleines Label für Status oder Kategorien
Empty
Leer-Zustand für Listen und Datenbereiche
Loading
Ladezustände — Skeleton-Platzhalter und Spinner
Skeleton
Spinner
Separator
Horizontale Trennlinie zwischen Inhaltsbereichen
Abschnitt A
Abschnitt B
Formulare
Field
Label, Eingabe und Beschreibungstext als Einheit
Dieser Name wird öffentlich angezeigt.
Input
Einzeiliges Texteingabefeld
Textarea
Mehrzeiliges Texteingabefeld
Select
Auswahlmenü mit Such- und Scroll-Funktion
Combobox
Kombination aus Eingabe und Dropdown-Suche
Input Group
Eingabefeld mit Prefix oder Suffix
Search Bar
Minimales Suchfeld mit Unterstrich — für Sidebar, Filter und Tabellen
Checkbox
Mehrfachauswahl-Kontrollkästchen
Checkbox
Radio Group
Einzelauswahl aus einer Gruppe von Optionen
Radio
Toggle
Toggle-Schalter für Ein/Aus-Zustände
Switch
Slider
Schieberegler für numerische Wertauswahl
Input OTP
Einmalcode-Eingabe mit einzelnen Feldern
Navigation
Tabs
Reiter-Navigation für Inhaltsbereiche
Default
Line
Text
Pagination
Seitennavigation für Listenansichten
Overlays
Dialog
Modales Dialogfenster für Bestätigungen
Alert Dialog
Bestätigungsdialog für kritische Aktionen
Drawer
Von unten einfahrender Overlay-Bereich
Sheet
Seitenpanel das von einem Rand einschiebt
Popover
Positioniertes Overlay für zusätzliche Inhalte
Hover Card
Vorschaukarte die bei Hover erscheint
Tooltip
Kurzinfo-Blase bei Hover über ein Element
Feedback
Alert
Hinweis- oder Fehlerbox für Systemzustände
Progress
Fortschrittsbalken für laufende Prozesse
Toast
Toast-Benachrichtigungen am Bildschirmrand
Datendarstellung
Table
Tabellarische Darstellung strukturierter Daten
| Name | Rolle | Status |
|---|---|---|
| Victoria Itter | Design | Aktiv |
| Bean Duong | Development | Aktiv |
| Max Moldovan | IT | Abwesend |
Chart
Datenvisualisierung mit verschiedenen Charttypen
Kompakt · 2 Quartale
Voll · Jan – Dez
Calendar
Datumsauswahl im Monatsraster
Carousel
Horizontaler Bildlauf für mehrere Karten
Accordion
Auf- und zuklappbare Inhaltsbereiche
Collapsible
Ein-/Ausblenden beliebiger Inhalte per Klick
Erweiterte Optionen
Avatar
Profilbild oder Initialen-Platzhalter
Layout
Infocard
Statische Karten — reine Darstellung, nicht klickbar
Item · Outline & Filled
Product Design
Product Design
List
Listentypen — Items und Cards im Einsatz
Product Design
Engineering
Marketing
Product Design
Engineering
Marketing