Grundlagen
Colors
DAYONE Farbpalette und Design-Tokens
Primitive Colors
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
Coral
$CoralDark
#CC443D
--coral-dark
$CoralMedium
#FF544C
--coral-medium
$CoralLight
#FF8580
--coral-light
Blue
$BlueDark
#0E72C4
--blue-dark
$BlueHighlight
#1487DD
--blue-highlight
$BlueLight
#D6ECFA
--blue-light
Feedback Colors
Green
— Success$GreenDark
#2A6E46
--green-dark
$GreenMedium
#3D9E65
--green-medium
$GreenLight
#E4F5EC
--green-light
Orange
— Warning$OrangeDark
#A36A10
--orange-dark
$OrangeMedium
#E08C1A
--orange-medium
$OrangeLight
#FEF3E2
--orange-light
Red
— Error$RedDark
#900018
--red-dark
$RedMedium
#D6001C
--red-medium
$RedLight
#FFE5EA
--red-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
Icons
Icon-Bibliothek für Produkt- und Marketing-Oberflächen
arrow-up
arrow-down
arrow-left
arrow-right
arrow-upleft
arrow-upright
forward
backward
chevron-up
chevron-down 2
chevron-left
chevron-right
add
cancel
remove
checkmark
presentation
devices
responsivedesign
notebook
desktop
tablet
mobile
applewatch
smartwatch
smartspeaker
website
web
ios
android
battery_charge
batterylow
batteryhalf
batteryfull
touch
cursor
persona
team
useractivity
userdata
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
Date Picker
Datumsauswahl über Eingabefeld mit Kalender-Popover
Einzeldatum
Zeitraum
Deaktiviert
Multi-Select
Mehrfachauswahl mit Chips und 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 |
Data Table
Sortierbare, filterbare Tabelle mit Zeilenauswahl und Pagination
| Status | |||
|---|---|---|---|
| Victoria Itter | UI Design | Aktiv | |
| Max Moldovan | Product Manager | Aktiv | |
| Nico Wohlgemuth | Managing Partner | Aktiv | |
| Helena Rott | UX | Inaktiv | |
| Silviana Anutescu | Lead Product Manager | Aktiv |
7 Einträge
Seite 1 von 2
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
Stat Card · Outline & Filled
Sessions gesamt
10
Ø Teilnehmende
9 Personen
Item · Outline & Filled
Product Design
Product Design
List
Listentypen — Items und Cards im Einsatz
Product Design
Zuletzt bearbeitet
+49 152 123 4567
Product Design
Zuletzt bearbeitet
+49 152 123 4567