Farben

Primitive Farbrampen und die semantischen Rollen, die Components verwenden.

color.neutral

color.neutral.light.0--color-neutral-light-0#FFFFFF
Light-Neutral (kühl, crisp). Weiss.
color.neutral.light.50--color-neutral-light-50#F8FAFC
Light-Neutral.
color.neutral.light.100--color-neutral-light-100#F4F6F8
Light-Neutral (Paper).
color.neutral.light.200--color-neutral-light-200#E4E8ED
Light-Neutral (Border-Light).
color.neutral.light.300--color-neutral-light-300#D2D8E0
Light-Neutral.
color.neutral.light.400--color-neutral-light-400#B4BCC8
Light-Neutral (muted Icon/Border, nicht Text).
color.neutral.light.500--color-neutral-light-500#94A0B0
Light-Neutral (hellster Slate).
color.neutral.dark.400--color-neutral-dark-400#7C8696
Dark-Neutral (Muted-Text auf Dark).
color.neutral.dark.500--color-neutral-dark-500#5B6473
Dark-Neutral (Slate / Muted).
color.neutral.dark.600--color-neutral-dark-600#38414F
Dark-Neutral.
color.neutral.dark.700--color-neutral-dark-700#262C38
Dark-Neutral (Raised / Border-Dark).
color.neutral.dark.800--color-neutral-dark-800#1A1E25
Dark-Neutral (Surface-Dark).
color.neutral.dark.900--color-neutral-dark-900#14171C
Dark-Neutral (Ink / Page-BG-Dark).
color.neutral.dark.950--color-neutral-dark-950#0E1014
Dark-Neutral (dunkelste Stufe).

color.accent1

color.accent1.50--color-accent1-50#FDEEE8
Accent 1 = Coral (warm, Hero/Buttons).
color.accent1.100--color-accent1-100#FBD9CC
Coral-Ramp.
color.accent1.200--color-accent1-200#F8BBA3
Coral-Ramp.
color.accent1.300--color-accent1-300#F59A75
Coral-Ramp.
color.accent1.400--color-accent1-400#F2754A
Coral-Ramp (bright).
color.accent1.500--color-accent1-500#E85C2E
Coral-Ramp (Basis/Seed).
color.accent1.600--color-accent1-600#D2461E
Coral-Ramp (UI/Text-Light). Primary.
color.accent1.700--color-accent1-700#AE3917
Coral-Ramp (Text auf hell, dunkel genug).
color.accent1.800--color-accent1-800#8A2E13
Coral-Ramp.
color.accent1.900--color-accent1-900#6B2410
Coral-Ramp.

color.accent2

color.accent2.50--color-accent2-50#EAF1FE
Accent 2 = Sky (kühl, Links/KI-Layer/Support).
color.accent2.100--color-accent2-100#D2E2FD
Sky-Ramp.
color.accent2.200--color-accent2-200#A9C6FB
Sky-Ramp.
color.accent2.300--color-accent2-300#7FA8F9
Sky-Ramp.
color.accent2.400--color-accent2-400#5B8BFF
Sky-Ramp (bright/Dark).
color.accent2.500--color-accent2-500#3B6FF2
Sky-Ramp.
color.accent2.600--color-accent2-600#2563EB
Sky-Ramp (Primär-Link).
color.accent2.700--color-accent2-700#1D4ED8
Sky-Ramp (Text auf hell).
color.accent2.800--color-accent2-800#1A3DA8
Sky-Ramp.
color.accent2.900--color-accent2-900#172E78
Sky-Ramp.

color.red

color.red.100--color-red-100#fde8e8
Danger-Ramp (Fläche).
color.red.300--color-red-300#f5a9a9
Danger-Ramp (Border).
color.red.600--color-red-600#d12d2d
Danger-Ramp (Text auf neutral).
color.red.800--color-red-800#7d1515
Danger-Ramp (Text auf Danger-Fläche).

color.amber

color.amber.100--color-amber-100#fdf3d7
Warning-Ramp (Fläche).
color.amber.300--color-amber-300#f0d27a
Warning-Ramp (Border).
color.amber.600--color-amber-600#8a6300
Warning-Ramp (Text, dunkler Bernstein).
color.amber.800--color-amber-800#5c4200
Warning-Ramp (Text auf Fläche).

color.green

color.green.100--color-green-100#e2f5e7
Success-Ramp (Fläche).
color.green.300--color-green-300#9fd9af
Success-Ramp (Border).
color.green.600--color-green-600#1f7a3d
Success-Ramp (Text auf neutral).
color.green.800--color-green-800#0f4521
Success-Ramp (Text auf Fläche).

color.text

color.text.default--color-text-default#14171C ← color.neutral.dark.900
Standard-Textfarbe / Ink. Hell-Modus.
color.text.muted--color-text-muted#5B6473 ← color.neutral.dark.500
Gedämpfter Text (Slate). Hell-Modus.
color.text.inverse--color-text-inverse#FFFFFF ← color.neutral.light.0
Text auf gekippter Fläche (weiss).
color.text.accent1--color-text-accent1#AE3917 ← color.accent1.700
Coral als Text auf hell (selten; Coral ist v. a. Fill). >=4.5:1.
color.text.accent2--color-text-accent2#2563EB ← color.accent2.600
Sky als Text auf hell = Links/KI-Layer. >=4.5:1 (600 = Primär-Link).
color.text.accent1OnVariant--color-text-accent1-on-variant#AE3917 ← color.text.accent1
accent1 als Text auf bg.variant. Standard = text.accent1; eine Brand setzt eine dunklere Stufe, wenn ihr bg.variant getönt ist und sonst 4.5:1 nicht reicht.
color.text.accent2OnVariant--color-text-accent2-on-variant#2563EB ← color.text.accent2
accent2 (Links) auf bg.variant. Standard = text.accent2; bei getöntem bg.variant dunklere Stufe setzen (>=4.5:1).

color.action

color.action.primary.none--color-action-primary-none#D2461E ← color.accent1.600
Primary-Fill = Coral 600. Button-Label muss fett und gross sein (≥ 3:1); für normalen Text Stufe 700 verwenden (≥ 4.5:1).
color.action.primary.hover--color-action-primary-hover#AE3917 ← color.accent1.700
Vandenhoeck: Hover dunkler statt heller, damit weißes Label >= 4.5:1 bleibt (500 hätte nur 3.5:1).
color.action.primary.active--color-action-primary-active#8A2E13 ← color.accent1.800
Vandenhoeck: eine Stufe unter Hover, damit Active unterscheidbar bleibt.

color.border

color.border.default--color-border-default#E4E8ED ← color.neutral.light.200
Standard-Rahmen (Hairline). Hell-Modus.
color.border.strong--color-border-strong#D2D8E0 ← color.neutral.light.300
Stärkerer Rahmen.
color.border.contrast--color-border-contrast#7C8696 ← color.neutral.dark.400
Rahmen, der als Grenze erkennbar sein muss (WCAG 1.4.11). Mind. 3:1 auf bg.default (3,4:1), bg.variant (3,5:1) und surface.default/Weiß (3,7:1), z. B. gestrichelte Hinweisbox. Eingabefelder: border.input.
color.border.input--color-border-input#7C8696 ← color.neutral.dark.400
Rahmen von Eingabefeldern (Input, Select, Combobox). Mind. 3:1 auf allen hellen Flächen (bg.default, bg.variant, surface.*), WCAG 1.4.11. Nicht für Cards/Trennlinien – dort border.default.
color.border.focus--color-border-focus#2563EB ← color.accent2.600
Fokus-Ring (Sky).
color.border.accent1--color-border-accent1#D2461E ← color.accent1.600
Vandenhoeck: Coral = 600 (#d2461e, barrierefrei).
color.border.accent2--color-border-accent2#2563EB ← color.accent2.600
Sky-Border (Secondary-Control, KI-NATIV).
color.border.onVariant--color-border-on-variant#E4E8ED ← color.border.default
Trennlinie auf bg.variant. Standard = border.default; bei getöntem bg.variant einen passenden Ton setzen, sonst wirkt die Linie fremd.

color.fill

color.fill.accent1.solid--color-fill-accent1-solid#D2461E ← color.accent1.600
Vandenhoeck: Coral = 600 (#d2461e, barrierefrei).
color.fill.accent1.subtle--color-fill-accent1-subtle#FDEEE8 ← color.accent1.50
Blass getöntes Coral.
color.fill.accent2.solid--color-fill-accent2-solid#2563EB ← color.accent2.600
Vollton Sky (Vorrat).
color.fill.accent2.subtle--color-fill-accent2-subtle#EAF1FE ← color.accent2.50
Blass getöntes Sky (KI-Layer-Fläche).
color.fill.neutral.subtle--color-fill-neutral-subtlergba(0,0,0,0.04)
Neutraler State-Layer, HALBTRANSPARENT (keine Ramp-Ref). DARK MODE: rgba(255,255,255,0.06).

color.bg

color.bg.default--color-bg-default#F4F6F8 ← color.neutral.light.100
Seite (Paper). Hell-Modus. Dark: neutral.dark.900 (Ink).
color.bg.variant--color-bg-variant#F8FAFC ← color.neutral.light.50
Background-Variante. Hell-Modus.
color.bg.inverse--color-bg-inverse#14171C ← color.neutral.dark.900
Gekippte, dunkle Fläche (Hero-Balken, Footer). Text darauf text.inverse (>=4.5:1).

color.scrim

color.scrim.start--color-scrim-startrgba(0,0,0,0.4)
Abdunklung über Fotos, Startpunkt eines Verlaufs (40 % Schwarz), damit heller Text darauf lesbar bleibt. HALBTRANSPARENT (keine Ramp-Ref).
color.scrim.end--color-scrim-endrgba(0,0,0,0)
Endpunkt des Scrim-Verlaufs (transparent).

color.surface

color.surface.default--color-surface-default#FFFFFF ← color.neutral.light.0
Card/Panel (weiss, elevated). Hell-Modus. Dark: neutral.dark.800.
color.surface.variant--color-surface-variant#F8FAFC ← color.neutral.light.50
Surface-Variante. Hell-Modus.

color.danger

color.danger.text--color-danger-text#d12d2d ← color.red.600
Danger-Text auf neutralem Grund.
color.danger.surface--color-danger-surface#fde8e8 ← color.red.100
Danger-Fläche (blasse Box).
color.danger.onSurface--color-danger-on-surface#7d1515 ← color.red.800
Text auf der Danger-Fläche.
color.danger.border--color-danger-border#f5a9a9 ← color.red.300
Rand der Danger-Fläche.

color.warning

color.warning.text--color-warning-text#8a6300 ← color.amber.600
Warning-Text auf neutralem Grund.
color.warning.surface--color-warning-surface#fdf3d7 ← color.amber.100
Warning-Fläche.
color.warning.onSurface--color-warning-on-surface#5c4200 ← color.amber.800
Text auf Warning-Fläche.
color.warning.border--color-warning-border#f0d27a ← color.amber.300
Rand der Warning-Fläche.

color.positive

color.positive.text--color-positive-text#1f7a3d ← color.green.600
Success-Text auf neutralem Grund.
color.positive.surface--color-positive-surface#e2f5e7 ← color.green.100
Success-Fläche.
color.positive.onSurface--color-positive-on-surface#0f4521 ← color.green.800
Text auf Success-Fläche.
color.positive.border--color-positive-border#9fd9af ← color.green.300
Rand der Success-Fläche.