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
Navigation & Aktionen
add
alert
arrow-down
arrow-left
arrow-right
arrow-up
arrow-upleft
arrow-upright
attachement
backward
burgermenu
burgermenu-close
calendar
cancel
checkbox_active
checkbox_inactive
checkmark
chevron-down 2
chevron-left
chevron-right
chevron-up
clock
cursor
cut
download
duplicate
error
filter
flag
forward
grid
info
key
masonry
notification
pencil
remove
row
search
send
shuffle
success
tag
time
touch
trash
trash-heart
trashcan
Geräte & Technologie
3D
android
animation
applewatch
augmentedreality
backend
battery_charge
batteryfull
batteryhalf
batterylow
bug
camera
cloud
code
components
cpu
data security
databank
desktop
devices
frontend
image
ios
mobile
notebook
responsivedesign
safety
savety
smartspeaker
smartwatch
tablet
tracking
voicerecord
volume
web
website
Menschen & Kommunikation
chat
collaborate
customer centric
emoji-crying
emoji-happy
emoji-nerd
emoji-sophisticated
heart
listen
meeting
meeting
partnership
person
persona
phone
socialmedia
speak
team
user
user-centered
useractivity
userdata
userdata
userresearch
Business & Alltag
bar
berlin
book
booklet
bottle
brain
budget
bulb
bus
businessmodel
cake
car
coffee
coins
colorpalette
combine
commute
dayone
delivery
design
designthinking
dollar
drinks
education
euro
exchange
experimental
expressdelivery
font-size
hockeystick
innovation
investment_protection
journey
kerning
launch
library
line-height
location
measure
onboarding
organisation
passport
payment
performance
present
presentation
project
projectmanagement
prototype
quality assurance
research
reusable
scale
sitemap
smoking
sprint
strategy
styleguide
testing
ticket
todos
toolkit
typography
usabilitytesting
userflow
validate
value
workshop
Für Lösch-Aktionen wird standardmäßig trash-heart verwendet (animiert bei Hover). trash und trashcan bleiben als statische Alternativen verfügbar.
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