Color Palette
Die Farbpalette des AI Hub Design Systems basiert auf einem dunklen Theme mit lebendigen Akzentfarben.
Primary Colors
Primary Teal
#005B63
--ai-primary-teal
Secondary Purple
#9836FF
--ai-secondary-purple
Newblue
#0FB1BF
--ai-newblue
Accent Colors
Accent Mint
#BAF6E2
--ai-accent-mint
Accent Yellow
#FFCC33
--ai-accent-yellow
Accent Green
#83BA16
--ai-accent-green
Neutral Whites
White
#FFFFFF
--ai-white
Neutral 1
#FCFCFC
--ai-neutral-1
Neutral 2
#F4F4F4
--ai-neutral-2
Light 96
#F6F5F4
--ai-light-96
Light 95
#F4F2F1
--ai-light-95
Light 94
#F1F0EE
--ai-light-94
Light 90
#E8E4E2
--ai-light-90
Light 85
#DED8D3
--ai-light-85
Neutral Grays
Grey 50
#808080
--ai-grey-50
Grey 30
#4C4C4C
--ai-grey-30
Grey 24
#3D3D3D
--ai-grey-24
Neutral 3
#202020
--ai-neutral-3
Dark 80
#444444
--ai-dark-80
Dark 50
#787878
--ai-dark-50
Dark 12
#1E1E1E
--ai-dark-12
Dark 7
#111111
--ai-dark-7
Black
#000000
--ai-black
Card Backgrounds
Card Purple Bg
#F2E8FF
--ai-card-purple-bg
Card Yellow Bg
#FFF5D6
--ai-card-yellow-bg
Card Green Bg
#E8F7F5
--ai-card-green-bg
Semantic
Success
#10B981
--ai-success
Success Dark
#0D9668
--ai-success-dark
Danger
#EF4444
--ai-danger
Danger Dark
#DC2626
--ai-danger-dark
Warning
#F59E0B
--ai-warning
Info
#3B82F6
--ai-info
Verwendung
/* CSS */
.element {
background-color: var(--ai-purple);
color: var(--ai-text-primary);
}
/* Direkte Werte */
.element {
background-color: #9836FF;
}
Farbkontraste
Alle Textelemente sollten einen ausreichenden Kontrast zum Hintergrund aufweisen. Verwenden Sie die definierten Text-Farben für optimale Lesbarkeit.
White text on Primary Teal background (AAA)
Dark text on light background (AAA)
New Blue links on light background (AA)