03 · Farben

Kinosaal und Kinogold

Ein dunkler Saal, warmes Elfenbein und Gold nur dort, wo Licht und Handlung sind. Jede Farbe gibt es als CSS-Variable, Tailwind-Klasse, TypeScript- und SwiftUI-Konstante – alle aus tokens.json.

Kernfarben

Der Kinosaal: Flächen von dunkel nach hell, Elfenbein für Text, Kinogold für Licht und Handlung.

bg
Nachtschwarz – Seitenhintergrund (Kinosaal)
Hex
RGB
15, 13, 11
CSS
var(--color-bg)
Tailwind
bg-bg
Kontrast
auf Nachtschwarz 1,00 : 1 (nicht für Text) · auf Elfenbein 16,54 : 1 (AAA)
surface
Sitzreihe – Karten, Panels
Hex
RGB
26, 23, 20
CSS
var(--color-surface)
Tailwind
bg-surface
Kontrast
auf Nachtschwarz 1,09 : 1 (nicht für Text) · auf Elfenbein 15,22 : 1 (AAA)
surface-2
Bühnenboden – erhöhte Flächen, Chips, Bildplatzhalter
Hex
RGB
36, 31, 26
CSS
var(--color-surface-2)
Tailwind
bg-surface-2
Kontrast
auf Nachtschwarz 1,19 : 1 (nicht für Text) · auf Elfenbein 13,93 : 1 (AAA)
surface-sunken
Eingelassene Flächen, z. B. Chat-Verlauf (A3)
Hex
RGB
21, 18, 15
CSS
var(--color-surface-sunken)
Tailwind
bg-surface-sunken
Kontrast
auf Nachtschwarz 1,04 : 1 (nicht für Text) · auf Elfenbein 15,91 : 1 (AAA)
line
Holz – Standard-Rahmen von Karten, Buttons, Eingabefeldern
Hex
RGB
58, 50, 42
CSS
var(--color-line)
Tailwind
bg-line
Kontrast
auf Nachtschwarz 1,54 : 1 (nicht für Text) · auf Elfenbein 10,73 : 1 (AAA)
line-subtle
Trennlinien, z. B. unter der Kopfzeile
Hex
RGB
42, 37, 32
CSS
var(--color-line-subtle)
Tailwind
bg-line-subtle
Kontrast
auf Nachtschwarz 1,28 : 1 (nicht für Text) · auf Elfenbein 12,94 : 1 (AAA)
line-strong
Gestrichelte Platzhalter („Rolle hinzufügen“), Ränder von Farbfeldern
Hex
RGB
74, 64, 53
CSS
var(--color-line-strong)
Tailwind
bg-line-strong
Kontrast
auf Nachtschwarz 1,92 : 1 (nicht für Text) · auf Elfenbein 8,63 : 1 (AAA)
line-disabled
Gestrichelte Rahmen deaktivierter Aktionen
Hex
RGB
107, 95, 80
CSS
var(--color-line-disabled)
Tailwind
bg-line-disabled
Kontrast
auf Nachtschwarz 3,12 : 1 (AA groß) · auf Elfenbein 5,30 : 1 (AA)

Text

Von hell nach gedämpft. Kleingedrucktes nie dunkler als fg-3.

fg
Elfenbein – Haupttext, Leinwand, „movie“ in der Wortmarke
Hex
RGB
243, 236, 226
CSS
var(--color-fg)
Tailwind
bg-fg
Kontrast
auf Nachtschwarz 16,54 : 1 (AAA) · auf Elfenbein 1,00 : 1 (nicht für Text)
fg-soft
Heller Sekundärtext (Bildunterschriften, Fließtext in Karten)
Hex
RGB
217, 207, 193
CSS
var(--color-fg-soft)
Tailwind
bg-fg-soft
Kontrast
auf Nachtschwarz 12,60 : 1 (AAA) · auf Elfenbein 1,31 : 1 (nicht für Text)
fg-2
Gedämpfter Text (Website, Navigation)
Hex
RGB
201, 190, 174
CSS
var(--color-fg-2)
Tailwind
bg-fg-2
Kontrast
auf Nachtschwarz 10,58 : 1 (AAA) · auf Elfenbein 1,56 : 1 (nicht für Text)
fg-muted
Sekundärtext, Meta-Infos, inaktive Navigation (Screens)
Hex
RGB
184, 172, 154
CSS
var(--color-fg-muted)
Tailwind
bg-fg-muted
Kontrast
auf Nachtschwarz 8,69 : 1 (AAA) · auf Elfenbein 1,90 : 1 (nicht für Text)
fg-3
Notizen, Kleingedrucktes
Hex
RGB
168, 156, 138
CSS
var(--color-fg-3)
Tailwind
bg-fg-3
Kontrast
auf Nachtschwarz 7,19 : 1 (AAA) · auf Elfenbein 2,30 : 1 (nicht für Text)

Kinogold

Nur für Licht und Handlung: Hauptbutton, Links, aktive Zustände, Fokusring, Filmrollen, „friends“.

gold
Kinogold – Akzent, Hauptbutton, aktive Zustände, Links, Fokusring, „friends“ in der Wortmarke
Hex
RGB
240, 178, 74
CSS
var(--color-gold)
Tailwind
bg-gold
Kontrast
auf Nachtschwarz 10,32 : 1 (AAA) · auf Elfenbein 1,60 : 1 (nicht für Text)
gold-hover
Link-Hover
Hex
RGB
255, 208, 136
CSS
var(--color-gold-hover)
Tailwind
bg-gold-hover
Kontrast
auf Nachtschwarz 13,51 : 1 (AAA) · auf Elfenbein 1,22 : 1 (nicht für Text)
gold-button-hover
Hauptbutton Hover
Hex
RGB
246, 196, 106
CSS
var(--color-gold-button-hover)
Tailwind
bg-gold-button-hover
Kontrast
auf Nachtschwarz 12,03 : 1 (AAA) · auf Elfenbein 1,38 : 1 (nicht für Text)
gold-ink
Text auf Gold
Hex
RGB
28, 20, 5
CSS
var(--color-gold-ink)
Tailwind
bg-gold-ink
Kontrast
auf Nachtschwarz 1,06 : 1 (nicht für Text) · auf Elfenbein 15,55 : 1 (AAA)
gold-tint
Gold getönte Fläche – eigene Sprechblasen, Avatar mit Goldrand
Hex
RGB
59, 42, 18
CSS
var(--color-gold-tint)
Tailwind
bg-gold-tint
Kontrast
auf Nachtschwarz 1,41 : 1 (nicht für Text) · auf Elfenbein 11,74 : 1 (AAA)

Status

Ampel im Casting: Grün, Gelb, Rot – immer zusammen mit Text („● Grün“), nie Farbe allein.

ok
Grünes Licht – fertig, bestanden, Ampel „Grün“
Hex
RGB
116, 209, 155
CSS
var(--color-ok)
Tailwind
bg-ok
Kontrast
auf Nachtschwarz 10,47 : 1 (AAA) · auf Elfenbein 1,58 : 1 (nicht für Text)
ok-soft
Text in grünen Chips
Hex
RGB
185, 232, 203
CSS
var(--color-ok-soft)
Tailwind
bg-ok-soft
Kontrast
auf Nachtschwarz 14,29 : 1 (AAA) · auf Elfenbein 1,16 : 1 (nicht für Text)
ok-surface
Grüne Fläche (Kommentar-Marker, Status)
Hex
RGB
31, 58, 44
CSS
var(--color-ok-surface)
Tailwind
bg-ok-surface
Kontrast
auf Nachtschwarz 1,57 : 1 (nicht für Text) · auf Elfenbein 10,53 : 1 (AAA)
ok-surface-2
Grüne Karte „Gesamt: Grün“ (A4)
Hex
RGB
22, 37, 28
CSS
var(--color-ok-surface-2)
Tailwind
bg-ok-surface-2
Kontrast
auf Nachtschwarz 1,22 : 1 (nicht für Text) · auf Elfenbein 13,61 : 1 (AAA)
warn
Hinweis/Warnung – Ampel „Gelb“, z. B. unscharfes Foto
Hex
RGB
242, 153, 74
CSS
var(--color-warn)
Tailwind
bg-warn
Kontrast
auf Nachtschwarz 8,71 : 1 (AAA) · auf Elfenbein 1,90 : 1 (nicht für Text)
warn-soft
Text auf Warn-Fläche
Hex
RGB
242, 185, 138
CSS
var(--color-warn-soft)
Tailwind
bg-warn-soft
Kontrast
auf Nachtschwarz 11,16 : 1 (AAA) · auf Elfenbein 1,48 : 1 (nicht für Text)
warn-surface
Warn-Fläche (Foto-Hinweis)
Hex
RGB
46, 28, 18
CSS
var(--color-warn-surface)
Tailwind
bg-warn-surface
Kontrast
auf Nachtschwarz 1,19 : 1 (nicht für Text) · auf Elfenbein 13,87 : 1 (AAA)
danger
Fehler – Ampel „Rot“
Hex
RGB
239, 111, 108
CSS
var(--color-danger)
Tailwind
bg-danger
Kontrast
auf Nachtschwarz 6,61 : 1 (AA) · auf Elfenbein 2,50 : 1 (nicht für Text)
danger-surface
Rote Avatar-/Statusfläche
Hex
RGB
58, 36, 36
CSS
var(--color-danger-surface)
Tailwind
bg-danger-surface
Kontrast
auf Nachtschwarz 1,35 : 1 (nicht für Text) · auf Elfenbein 12,28 : 1 (AAA)

Drehbuch als Buch

Drehbuch als Buch (A5): helle Buchseite im dunklen Studio

paper.bg
Papier
Hex
RGB
239, 230, 214
CSS
var(--color-paper-bg)
Tailwind
bg-paper-bg
Kontrast
auf Nachtschwarz 15,66 : 1 (AAA) · auf Elfenbein 1,06 : 1 (nicht für Text)
paper.bg-2
Papier, Rand/Bildfläche
Hex
RGB
226, 213, 190
CSS
var(--color-paper-bg-2)
Tailwind
bg-paper-bg-2
Kontrast
auf Nachtschwarz 13,39 : 1 (AAA) · auf Elfenbein 1,24 : 1 (nicht für Text)
paper.fold
Eselsohr
Hex
RGB
216, 203, 180
CSS
var(--color-paper-fold)
Tailwind
bg-paper-fold
Kontrast
auf Nachtschwarz 12,12 : 1 (AAA) · auf Elfenbein 1,36 : 1 (nicht für Text)
paper.ink
Schrift auf Papier
Hex
RGB
42, 33, 24
CSS
var(--color-paper-ink)
Tailwind
bg-paper-ink
Kontrast
auf Nachtschwarz 1,23 : 1 (nicht für Text) · auf Elfenbein 13,47 : 1 (AAA)
paper.ink-muted
Sekundärtext auf Papier
Hex
RGB
110, 93, 71
CSS
var(--color-paper-ink-muted)
Tailwind
bg-paper-ink-muted
Kontrast
auf Nachtschwarz 3,07 : 1 (AA groß) · auf Elfenbein 5,39 : 1 (AA)
paper.ink-gold
Gold-Überschrift auf Papier
Hex
RGB
138, 90, 18
CSS
var(--color-paper-ink-gold)
Tailwind
bg-paper-ink-gold
Kontrast
auf Nachtschwarz 3,28 : 1 (AA groß) · auf Elfenbein 5,04 : 1 (AA)

Logo

Logo-Farben (A7). Dunkler Grund: Stern und „friends“ Kinogold, Schweif und „movie“ Elfenbein, Perforation Nachtschwarz.

brand.star
Stern / „friends“ auf dunklem Grund
Hex
RGB
240, 178, 74
CSS
var(--color-brand-star)
Tailwind
bg-brand-star
Kontrast
auf Nachtschwarz 10,32 : 1 (AAA) · auf Elfenbein 1,60 : 1 (nicht für Text)
brand.tail
Filmstreifen-Schweif / „movie“ auf dunklem Grund
Hex
RGB
243, 236, 226
CSS
var(--color-brand-tail)
Tailwind
bg-brand-tail
Kontrast
auf Nachtschwarz 16,54 : 1 (AAA) · auf Elfenbein 1,00 : 1 (nicht für Text)
brand.star-on-light
Stern auf hellem Grund
Hex
RGB
216, 150, 42
CSS
var(--color-brand-star-on-light)
Tailwind
bg-brand-star-on-light
Kontrast
auf Nachtschwarz 7,68 : 1 (AAA) · auf Elfenbein 2,15 : 1 (nicht für Text)
brand.friends-on-light
„friends“ auf hellem Grund
Hex
RGB
168, 106, 16
CSS
var(--color-brand-friends-on-light)
Tailwind
bg-brand-friends-on-light
Kontrast
auf Nachtschwarz 4,37 : 1 (AA groß) · auf Elfenbein 3,78 : 1 (AA groß)
brand.ink-on-light
Schweif und „movie“ auf hellem Grund
Hex
RGB
42, 33, 24
CSS
var(--color-brand-ink-on-light)
Tailwind
bg-brand-ink-on-light
Kontrast
auf Nachtschwarz 1,23 : 1 (nicht für Text) · auf Elfenbein 13,47 : 1 (AAA)
brand.light-bg
Heller Grund (Elfenbein), zugleich Perforation der hellen Variante
Hex
RGB
243, 236, 226
CSS
var(--color-brand-light-bg)
Tailwind
bg-brand-light-bg
Kontrast
auf Nachtschwarz 16,54 : 1 (AAA) · auf Elfenbein 1,00 : 1 (nicht für Text)
brand.muted-on-light
Sekundärtext auf hellem Grund
Hex
RGB
92, 78, 61
CSS
var(--color-brand-muted-on-light)
Tailwind
bg-brand-muted-on-light
Kontrast
auf Nachtschwarz 2,41 : 1 (nicht für Text) · auf Elfenbein 6,86 : 1 (AA)

Weitere

Schnitt-Zeitstrahl, Filmstreifen und halbtransparente Overlays.

filmstrip
Perforation im Produktions-Fortschrittsband (A2–A6)
Hex
RGB
46, 40, 34
CSS
var(--color-filmstrip)
Tailwind
bg-filmstrip
Kontrast
auf Nachtschwarz 1,33 : 1 (nicht für Text) · auf Elfenbein 12,41 : 1 (AAA)
track.1
Spur 1
Hex
RGB
78, 106, 140
CSS
var(--color-track-1)
Tailwind
bg-track-1
Kontrast
auf Nachtschwarz 3,48 : 1 (AA groß) · auf Elfenbein 4,76 : 1 (AA)
track.2
Spur 2
Hex
RGB
106, 78, 140
CSS
var(--color-track-2)
Tailwind
bg-track-2
Kontrast
auf Nachtschwarz 2,85 : 1 (nicht für Text) · auf Elfenbein 5,81 : 1 (AA)
track.3
Spur 3
Hex
RGB
78, 140, 106
CSS
var(--color-track-3)
Tailwind
bg-track-3
Kontrast
auf Nachtschwarz 4,88 : 1 (AA) · auf Elfenbein 3,39 : 1 (AA groß)
overlay.caption
Bild-Overlay für Labels auf Fotos
Hex
RGB
15, 13, 11 · 78 %
CSS
var(--color-overlay-caption)
Tailwind
bg-overlay-caption
Kontrast
auf Nachtschwarz 1,00 : 1 (nicht für Text) · auf Elfenbein 9,05 : 1 (AAA)
overlay.header
Sticky-Kopfzeile (mit backdrop-filter: blur(8px))
Hex
RGB
15, 13, 11 · 92 %
CSS
var(--color-overlay-header)
Tailwind
bg-overlay-header
Kontrast
auf Nachtschwarz 1,00 : 1 (nicht für Text) · auf Elfenbein 14,03 : 1 (AAA)

Zugesicherte Kontraste

Text nur in diesen Paaren setzen (WCAG 2.2). AA heißt 4,5 : 1 für Fließtext, „AA groß“ 3 : 1 für Schrift ab 24 px (fett ab 18,66 px) und für Grafiken. Ein Test prüft jedes Paar.

Kontraste der Farbpaare
Beispiel	Vordergrund	Hintergrund	Kontrast	Stufe	Verwendung
Aa	`fg`	`bg`	16,54 : 1	AAA	Haupttext auf Nachtschwarz
Aa	`fg`	`surface`	15,22 : 1	AAA	Haupttext auf Karten
Aa	`fg-soft`	`surface`	11,60 : 1	AAA	Fließtext in Karten
Aa	`fg-2`	`bg`	10,58 : 1	AAA	Gedämpfter Text, Navigation
Aa	`fg-muted`	`surface`	7,99 : 1	AAA	Meta-Infos auf Karten
Aa	`fg-3`	`bg`	7,19 : 1	AAA	Kleingedrucktes
Aa	`fg-3`	`surface-2`	6,06 : 1	AA	Kleingedrucktes auf Chips
Aa	`gold`	`bg`	10,32 : 1	AAA	Links, aktive Navigation, „friends“
Aa	`gold`	`surface`	9,50 : 1	AAA	Akzent auf Karten
Aa	`gold-ink`	`gold`	9,70 : 1	AAA	Beschriftung des Hauptbuttons
Aa	`gold-ink`	`gold-button-hover`	11,31 : 1	AAA	Hauptbutton im Hover
Aa	`fg`	`gold-tint`	11,74 : 1	AAA	Eigene Sprechblase
Aa	`ok`	`bg`	10,47 : 1	AAA	Status „Grün“
Aa	`ok-soft`	`ok-surface`	9,10 : 1	AAA	Text in grünen Chips
Aa	`warn`	`bg`	8,71 : 1	AAA	Status „Gelb“
Aa	`warn-soft`	`warn-surface`	9,36 : 1	AAA	Text auf Warn-Fläche
Aa	`danger`	`bg`	6,61 : 1	AA	Status „Rot“, Fehlermeldungen
Aa	`paper.ink`	`paper.bg`	12,76 : 1	AAA	Schrift im Drehbuch-Buch
Aa	`paper.ink-muted`	`paper.bg`	5,11 : 1	AA	Sekundärtext im Buch
Aa	`paper.ink-gold`	`paper.bg`	4,77 : 1	AA	Gold-Überschrift im Buch
Aa	`brand.ink-on-light`	`brand.light-bg`	13,47 : 1	AAA	„movie“ auf hellem Grund
Aa	`brand.friends-on-light`	`brand.light-bg`	3,78 : 1	AA groß	„friends“ der Wortmarke auf hellem Grund – nur groß (ab 24 px)

Kernfarben

bg

surface

surface-2

surface-sunken

line

line-subtle

line-strong

line-disabled

Text

fg

fg-soft

fg-2

fg-muted

fg-3

Kinogold

gold

gold-hover

gold-button-hover

gold-ink

gold-tint

Status

ok

ok-soft

ok-surface

ok-surface-2

warn

warn-soft

warn-surface

danger

danger-surface

Drehbuch als Buch

paper.bg

paper.bg-2

paper.fold

paper.ink

paper.ink-muted

paper.ink-gold

Logo

brand.star

brand.tail

brand.star-on-light

brand.friends-on-light

brand.ink-on-light

brand.light-bg

brand.muted-on-light

Weitere

filmstrip

track.1

track.2

track.3

overlay.caption

overlay.header

Zugesicherte Kontraste