Entwurf

Farbe

Hintergrund

Prototyp · Stilbuch

Stilbuch

Farben, Schrift, Raster, Glas und Icons des neuen Auftritts. Die Bausteine stehen auf der Seite Bausteine.

Farben
Kontrast
Typografie
Raster & Abstände
Radien, Schatten, Glas
Icons

Farben

Sechs Themes, umschaltbar in der Leiste oben. Jedes Theme ist eine Palette (Ebene 1). Die Bausteine nutzen nur semantische Tokens (Ebene 2) wie --color-text, --color-primary oder --surface-glass. Feste Farbwerte stehen nur an einer Stelle, in den Paletten.

Statusfarben (Erfolg, Warnung, Fehler, Info) sind in allen hellen Themes gleich, damit ein Fehler immer gleich aussieht. Die dunklen Themes Dämmerung und Flutlicht haben eigene, helle Statusfarben.

Theme

Platzgrün

Kräftiges Rasengrün mit Ocker als Detail. Das Grün #8db345 der bisherigen Website dient als Flächenfarbe (primary-300).

PrimärSekundärChipAkzentLink

Getöntes Glas. Text, Link und Chip darauf.

primary-900#12301crgb(18, 48, 28)Hover von Links · Nicht: nicht als Fläche hinter Text auf Glas
primary-800#1c4428rgb(28, 68, 40)Überschriften, Logo, getöntes Glas · Nicht: nicht für Fließtext auf getöntem Glas
primary-700#245a33rgb(36, 90, 51)Primärbutton, Links, Fokus · Nicht: nicht als großflächiger Hintergrund
primary-600#2e6e3ergb(46, 110, 62)Reserve für Diagramme, Linien · Nicht: nicht für Text unter 18 px
primary-500#4b8a3crgb(75, 138, 60)Illustration, Szene; Dämmerung: Primärbutton · Nicht: kein Text
primary-300#8db345rgb(141, 179, 69)Szene, Flächen; dunkle Themes: Links · Nicht: kein Text auf hellem Grund
primary-100#e4eed6rgb(228, 238, 214)Chips, Heute-Markierung, Platzhalter · Nicht: kein Text in dieser Farbe
accent-700#6e4b0brgb(110, 75, 11)Eyebrow, Rollen, Akzent-Chips · Nicht: nicht als Button-Fläche
accent-500#c08a26rgb(192, 138, 38)Linien, Marker, Fokus-Details · Nicht: kein Text auf hellem Glas
accent-300#e8c879rgb(232, 200, 121)Links und Fokus auf getöntem Glas · Nicht: kein Text auf hellem Grund
accent-100#f6ecd4rgb(246, 236, 212)Akzent-Chips, Platzhalter · Nicht: kein Text
neutral-950#16201argb(22, 32, 26)Fließtext · Nicht: nicht als Fläche in hellen Themes
neutral-800#2b382frgb(43, 56, 47)Reserve für Tabellenköpfe
neutral-600#46544argb(70, 84, 74)gedämpfter Text, Feldrahmen · Nicht: nicht für wichtige Aussagen allein
neutral-400#87958argb(135, 149, 138)deaktivierte Linien · Nicht: kein Text
neutral-200#d3dbccrgb(211, 219, 204)Trennlinien, Ränder · Nicht: kein Text
neutral-100#eaeee3rgb(234, 238, 227)deaktivierte Felder
neutral-50#f8faf4rgb(248, 250, 244)Schrift auf Primär, Grundfarbe · Nicht: nicht als einzige Fläche ohne Glas

Theme

Vereinsblau

Petrol wie die Vereinspolos, dazu ein gedämpftes Orange wie auf dem Banner „Tag des Hundes“.

PrimärSekundärChipAkzentLink

Getöntes Glas. Text, Link und Chip darauf.

primary-900#0a2a3brgb(10, 42, 59)Hover von Links · Nicht: nicht als Fläche hinter Text auf Glas
primary-800#0e3c55rgb(14, 60, 85)Überschriften, Logo, getöntes Glas · Nicht: nicht für Fließtext auf getöntem Glas
primary-700#124f6frgb(18, 79, 111)Primärbutton, Links, Fokus · Nicht: nicht als großflächiger Hintergrund
primary-600#186487rgb(24, 100, 135)Reserve für Diagramme, Linien · Nicht: nicht für Text unter 18 px
primary-500#2683abrgb(38, 131, 171)Illustration, Szene; Dämmerung: Primärbutton · Nicht: kein Text
primary-300#7cc2dcrgb(124, 194, 220)Szene, Flächen; dunkle Themes: Links · Nicht: kein Text auf hellem Grund
primary-100#ddf0f6rgb(221, 240, 246)Chips, Heute-Markierung, Platzhalter · Nicht: kein Text in dieser Farbe
accent-700#8a3f0crgb(138, 63, 12)Eyebrow, Rollen, Akzent-Chips · Nicht: nicht als Button-Fläche
accent-500#e0761crgb(224, 118, 28)Linien, Marker, Fokus-Details · Nicht: kein Text auf hellem Glas
accent-300#f6b77crgb(246, 183, 124)Links und Fokus auf getöntem Glas · Nicht: kein Text auf hellem Grund
accent-100#fce9d8rgb(252, 233, 216)Akzent-Chips, Platzhalter · Nicht: kein Text
neutral-950#122029rgb(18, 32, 41)Fließtext · Nicht: nicht als Fläche in hellen Themes
neutral-800#263843rgb(38, 56, 67)Reserve für Tabellenköpfe
neutral-600#44555frgb(68, 85, 95)gedämpfter Text, Feldrahmen · Nicht: nicht für wichtige Aussagen allein
neutral-400#8696a0rgb(134, 150, 160)deaktivierte Linien · Nicht: kein Text
neutral-200#d1dce2rgb(209, 220, 226)Trennlinien, Ränder · Nicht: kein Text
neutral-100#e8eff2rgb(232, 239, 242)deaktivierte Felder
neutral-50#f6f9fbrgb(246, 249, 251)Schrift auf Primär, Grundfarbe · Nicht: nicht als einzige Fläche ohne Glas

Theme

Wappenrot

Tiefes Rot und Gold aus dem Gemeindewappen auf warmem Neutral.

PrimärSekundärChipAkzentLink

Getöntes Glas. Text, Link und Chip darauf.

primary-900#3c0b11rgb(60, 11, 17)Hover von Links · Nicht: nicht als Fläche hinter Text auf Glas
primary-800#5a111brgb(90, 17, 27)Überschriften, Logo, getöntes Glas · Nicht: nicht für Fließtext auf getöntem Glas
primary-700#781823rgb(120, 24, 35)Primärbutton, Links, Fokus · Nicht: nicht als großflächiger Hintergrund
primary-600#94202drgb(148, 32, 45)Reserve für Diagramme, Linien · Nicht: nicht für Text unter 18 px
primary-500#b5333drgb(181, 51, 61)Illustration, Szene; Dämmerung: Primärbutton · Nicht: kein Text
primary-300#e19088rgb(225, 144, 136)Szene, Flächen; dunkle Themes: Links · Nicht: kein Text auf hellem Grund
primary-100#f7e2dergb(247, 226, 222)Chips, Heute-Markierung, Platzhalter · Nicht: kein Text in dieser Farbe
accent-700#6f4f06rgb(111, 79, 6)Eyebrow, Rollen, Akzent-Chips · Nicht: nicht als Button-Fläche
accent-500#d7a21frgb(215, 162, 31)Linien, Marker, Fokus-Details · Nicht: kein Text auf hellem Glas
accent-300#efd27crgb(239, 210, 124)Links und Fokus auf getöntem Glas · Nicht: kein Text auf hellem Grund
accent-100#faf0d2rgb(250, 240, 210)Akzent-Chips, Platzhalter · Nicht: kein Text
neutral-950#221a17rgb(34, 26, 23)Fließtext · Nicht: nicht als Fläche in hellen Themes
neutral-800#3a2f2argb(58, 47, 42)Reserve für Tabellenköpfe
neutral-600#594c45rgb(89, 76, 69)gedämpfter Text, Feldrahmen · Nicht: nicht für wichtige Aussagen allein
neutral-400#998b82rgb(153, 139, 130)deaktivierte Linien · Nicht: kein Text
neutral-200#e1d6ccrgb(225, 214, 204)Trennlinien, Ränder · Nicht: kein Text
neutral-100#f0e9e1rgb(240, 233, 225)deaktivierte Felder
neutral-50#fbf8f3rgb(251, 248, 243)Schrift auf Primär, Grundfarbe · Nicht: nicht als einzige Fläche ohne Glas

Theme

Erde

Leder, Leine, Herbstplatz. Ruhiges Braun mit Teal als Gegenpol.

PrimärSekundärChipAkzentLink

Getöntes Glas. Text, Link und Chip darauf.

primary-900#2a1c11rgb(42, 28, 17)Hover von Links · Nicht: nicht als Fläche hinter Text auf Glas
primary-800#3e2a19rgb(62, 42, 25)Überschriften, Logo, getöntes Glas · Nicht: nicht für Fließtext auf getöntem Glas
primary-700#553a23rgb(85, 58, 35)Primärbutton, Links, Fokus · Nicht: nicht als großflächiger Hintergrund
primary-600#6c4b2ergb(108, 75, 46)Reserve für Diagramme, Linien · Nicht: nicht für Text unter 18 px
primary-500#8c6945rgb(140, 105, 69)Illustration, Szene; Dämmerung: Primärbutton · Nicht: kein Text
primary-300#c9a67crgb(201, 166, 124)Szene, Flächen; dunkle Themes: Links · Nicht: kein Text auf hellem Grund
primary-100#f1e6d8rgb(241, 230, 216)Chips, Heute-Markierung, Platzhalter · Nicht: kein Text in dieser Farbe
accent-700#175855rgb(23, 88, 85)Eyebrow, Rollen, Akzent-Chips · Nicht: nicht als Button-Fläche
accent-500#2b8781rgb(43, 135, 129)Linien, Marker, Fokus-Details · Nicht: kein Text auf hellem Glas
accent-300#8bc6bfrgb(139, 198, 191)Links und Fokus auf getöntem Glas · Nicht: kein Text auf hellem Grund
accent-100#ddefecrgb(221, 239, 236)Akzent-Chips, Platzhalter · Nicht: kein Text
neutral-950#211b15rgb(33, 27, 21)Fließtext · Nicht: nicht als Fläche in hellen Themes
neutral-800#3b322argb(59, 50, 42)Reserve für Tabellenköpfe
neutral-600#5b5148rgb(91, 81, 72)gedämpfter Text, Feldrahmen · Nicht: nicht für wichtige Aussagen allein
neutral-400#9b9086rgb(155, 144, 134)deaktivierte Linien · Nicht: kein Text
neutral-200#e0d8cdrgb(224, 216, 205)Trennlinien, Ränder · Nicht: kein Text
neutral-100#efe9e0rgb(239, 233, 224)deaktivierte Felder
neutral-50#faf7f1rgb(250, 247, 241)Schrift auf Primär, Grundfarbe · Nicht: nicht als einzige Fläche ohne Glas

Theme

Dämmerung

Dunkle Variante mit dunklem, grün getöntem Glas.

PrimärSekundärChipAkzentLink

Getöntes Glas. Text, Link und Chip darauf.

primary-900#0c1d15rgb(12, 29, 21)Hover von Links · Nicht: nicht als Fläche hinter Text auf Glas
primary-800#133024rgb(19, 48, 36)Überschriften, Logo, getöntes Glas · Nicht: nicht für Fließtext auf getöntem Glas
primary-700#1b4332rgb(27, 67, 50)Primärbutton, Links, Fokus · Nicht: nicht als großflächiger Hintergrund
primary-600#285e46rgb(40, 94, 70)Reserve für Diagramme, Linien · Nicht: nicht für Text unter 18 px
primary-500#5fb27ergb(95, 178, 126)Illustration, Szene; Dämmerung: Primärbutton · Nicht: kein Text
primary-300#9ed3adrgb(158, 211, 173)Szene, Flächen; dunkle Themes: Links · Nicht: kein Text auf hellem Grund
primary-100#dcf1e2rgb(220, 241, 226)Chips, Heute-Markierung, Platzhalter · Nicht: kein Text in dieser Farbe
accent-700#8a6418rgb(138, 100, 24)Eyebrow, Rollen, Akzent-Chips · Nicht: nicht als Button-Fläche
accent-500#d9a441rgb(217, 164, 65)Linien, Marker, Fokus-Details · Nicht: kein Text auf hellem Glas
accent-300#f0c977rgb(240, 201, 119)Links und Fokus auf getöntem Glas · Nicht: kein Text auf hellem Grund
accent-100#faefd6rgb(250, 239, 214)Akzent-Chips, Platzhalter · Nicht: kein Text
neutral-950#eef3eergb(238, 243, 238)Fließtext · Nicht: nicht als Fläche in hellen Themes
neutral-800#d3ddd6rgb(211, 221, 214)Reserve für Tabellenköpfe
neutral-600#c2cfc6rgb(194, 207, 198)gedämpfter Text, Feldrahmen · Nicht: nicht für wichtige Aussagen allein
neutral-400#74857brgb(116, 133, 123)deaktivierte Linien · Nicht: kein Text
neutral-200#2f3f37rgb(47, 63, 55)Trennlinien, Ränder · Nicht: kein Text
neutral-100#1d2a24rgb(29, 42, 36)deaktivierte Felder
neutral-50#131d19rgb(19, 29, 25)Schrift auf Primär, Grundfarbe · Nicht: nicht als einzige Fläche ohne Glas

Theme

Flutlicht

Der Platz am Abend: Scheiben im satten Dunkelgrün von Platzgrün, helles getöntes Glas für Abschlussbox und Footer, Gold als Akzent.

PrimärSekundärChipAkzentLink

Getöntes Glas. Text, Link und Chip darauf.

primary-900#062417rgb(6, 36, 23)Hover von Links · Nicht: nicht als Fläche hinter Text auf Glas
primary-800#0b3322rgb(11, 51, 34)Überschriften, Logo, getöntes Glas · Nicht: nicht für Fließtext auf getöntem Glas
primary-700#11472frgb(17, 71, 47)Primärbutton, Links, Fokus · Nicht: nicht als großflächiger Hintergrund
primary-600#17603frgb(23, 96, 63)Reserve für Diagramme, Linien · Nicht: nicht für Text unter 18 px
primary-500#2a8a5argb(42, 138, 90)Illustration, Szene; Dämmerung: Primärbutton · Nicht: kein Text
primary-300#a6e6bbrgb(166, 230, 187)Szene, Flächen; dunkle Themes: Links · Nicht: kein Text auf hellem Grund
primary-100#e3f7e9rgb(227, 247, 233)Chips, Heute-Markierung, Platzhalter · Nicht: kein Text in dieser Farbe
accent-700#8a6418rgb(138, 100, 24)Eyebrow, Rollen, Akzent-Chips · Nicht: nicht als Button-Fläche
accent-500#e3b04argb(227, 176, 74)Linien, Marker, Fokus-Details · Nicht: kein Text auf hellem Glas
accent-300#f5d384rgb(245, 211, 132)Links und Fokus auf getöntem Glas · Nicht: kein Text auf hellem Grund
accent-100#fbf0d6rgb(251, 240, 214)Akzent-Chips, Platzhalter · Nicht: kein Text
neutral-950#f4faf5rgb(244, 250, 245)Fließtext · Nicht: nicht als Fläche in hellen Themes
neutral-800#dbe9dfrgb(219, 233, 223)Reserve für Tabellenköpfe
neutral-600#c6e0cergb(198, 224, 206)gedämpfter Text, Feldrahmen · Nicht: nicht für wichtige Aussagen allein
neutral-400#7fa08argb(127, 160, 138)deaktivierte Linien · Nicht: kein Text
neutral-200#2c5a42rgb(44, 90, 66)Trennlinien, Ränder · Nicht: kein Text
neutral-100#164330rgb(22, 67, 48)deaktivierte Felder
neutral-50#0a2418rgb(10, 36, 24)Schrift auf Primär, Grundfarbe · Nicht: nicht als einzige Fläche ohne Glas

Semantische Tokens

--color-text, --color-text-muted, --color-heading, --color-link
--color-primary, --color-primary-strong, --color-on-primary, --color-accent, --color-accent-text
--surface-glass, --surface-glass-strong, --surface-card, --surface-field
--color-focus, --color-success, --color-warning, --color-danger, --color-info
--scene-sky, --scene-hill-1…3, --scene-light, --scene-tint

Kontrast

WCAG AA für jeden Text in jedem Theme: 4,5 : 1 für Text, 3 : 1 für Fokusring, Rahmen und Flächen. Jede Glasfläche wird mit ihrer Deckkraft über die ungünstigste Stelle jedes Hintergrunds gelegt. Über dem Blätterfoto ist das Glas deshalb dichter (84 %) als über der Wiese (62 %).

Gemessen gegen die ungünstigste Stelle aller Hintergründe (Szene des Themes, Blätterfoto und Hundefoto, jeweils dunkel und hell). Alle Paare bestehen WCAG AA.

Platzgrün

Paar	Muster	Wert	Soll	Ungünstigster Grund
Text auf hellem Glas	Aa	10,30 : 1	4,50	Hundefoto dunkel
Text gedämpft auf hellem Glas	Aa	4,92 : 1	4,50	Hundefoto dunkel
Überschrift auf hellem Glas	Aa	6,78 : 1	4,50	Hundefoto dunkel
Link auf hellem Glas	Aa	5,00 : 1	4,50	Hundefoto dunkel
Akzent-Text (Eyebrow) auf hellem Glas	Aa	4,84 : 1	4,50	Hundefoto dunkel
Fehlertext auf hellem Glas	Aa	5,16 : 1	4,50	Hundefoto dunkel
Erfolgstext auf hellem Glas	Aa	4,75 : 1	4,50	Hundefoto dunkel
Info-Text auf hellem Glas	Aa	5,25 : 1	4,50	Hundefoto dunkel
Warnungstext auf hellem Glas	Aa	5,19 : 1	4,50	Hundefoto dunkel
Fokusring auf hellem Glas	Aa	5,00 : 1	3,00	Hundefoto dunkel
Primärbutton-Fläche auf hellem Glas	Aa	5,00 : 1	3,00	Hundefoto dunkel
Text auf getöntem Glas	Aa	12,83 : 1	4,50	Hundefoto hell
Text gedämpft auf getöntem Glas	Aa	11,24 : 1	4,50	Hundefoto hell
Link auf getöntem Glas	Aa	8,33 : 1	4,50	Hundefoto hell
Akzent auf getöntem Glas	Aa	8,33 : 1	4,50	Hundefoto hell
Fokusring auf getöntem Glas	Aa	8,33 : 1	3,00	Hundefoto hell
Text auf Karte im hellen Glas	Aa	12,64 : 1	4,50	Hundefoto dunkel
Text gedämpft auf Karte	Aa	6,04 : 1	4,50	Hundefoto dunkel
Link auf Karte	Aa	6,14 : 1	4,50	Hundefoto dunkel
Akzent-Text auf Karte	Aa	5,93 : 1	4,50	Hundefoto dunkel
Primärbutton: Schrift auf Fläche	Aa	7,73 : 1	4,50	deckend
Primärbutton hover	Aa	10,47 : 1	4,50	deckend
Chip: Überschriftfarbe auf Primär-soft	Aa	9,18 : 1	4,50	deckend
Chip Akzent: Akzent-Text auf Akzent-soft	Aa	6,68 : 1	4,50	deckend
Feld: Eingabe auf Feldfläche	Aa	16,72 : 1	4,50	deckend
Feld: Rahmen auf Feldfläche	Aa	7,99 : 1	3,00	deckend
Feld: Fehlerrahmen auf Feldfläche	Aa	8,38 : 1	3,00	deckend
Feld deaktiviert: Schrift	Aa	6,79 : 1	4,50	deckend
Alert Erfolg	Aa	6,65 : 1	4,50	deckend
Alert Warnung	Aa	7,40 : 1	4,50	deckend
Alert Fehler	Aa	6,96 : 1	4,50	deckend
Alert Info	Aa	7,22 : 1	4,50	deckend
Alert-Fließtext auf Erfolg	Aa	14,42 : 1	4,50	deckend
Alert-Fließtext auf Fehler	Aa	13,89 : 1	4,50	deckend

Vereinsblau

Paar	Muster	Wert	Soll	Ungünstigster Grund
Text auf hellem Glas	Aa	10,25 : 1	4,50	Hundefoto dunkel
Text gedämpft auf hellem Glas	Aa	4,78 : 1	4,50	Hundefoto dunkel
Überschrift auf hellem Glas	Aa	7,22 : 1	4,50	Hundefoto dunkel
Link auf hellem Glas	Aa	5,46 : 1	4,50	Hundefoto dunkel
Akzent-Text (Eyebrow) auf hellem Glas	Aa	4,64 : 1	4,50	Hundefoto dunkel
Fehlertext auf hellem Glas	Aa	5,17 : 1	4,50	Hundefoto dunkel
Erfolgstext auf hellem Glas	Aa	4,76 : 1	4,50	Hundefoto dunkel
Info-Text auf hellem Glas	Aa	5,26 : 1	4,50	Hundefoto dunkel
Warnungstext auf hellem Glas	Aa	5,20 : 1	4,50	Hundefoto dunkel
Fokusring auf hellem Glas	Aa	5,46 : 1	3,00	Hundefoto dunkel
Primärbutton-Fläche auf hellem Glas	Aa	5,46 : 1	3,00	Hundefoto dunkel
Text auf getöntem Glas	Aa	8,60 : 1	4,50	Hundefoto hell
Text gedämpft auf getöntem Glas	Aa	7,74 : 1	4,50	Hundefoto hell
Link auf getöntem Glas	Aa	5,19 : 1	4,50	Hundefoto hell
Akzent auf getöntem Glas	Aa	5,19 : 1	4,50	Hundefoto hell
Fokusring auf getöntem Glas	Aa	5,19 : 1	3,00	Hundefoto hell
Text auf Karte im hellen Glas	Aa	12,57 : 1	4,50	Hundefoto dunkel
Text gedämpft auf Karte	Aa	5,86 : 1	4,50	Hundefoto dunkel
Link auf Karte	Aa	6,70 : 1	4,50	Hundefoto dunkel
Akzent-Text auf Karte	Aa	5,68 : 1	4,50	Hundefoto dunkel
Primärbutton: Schrift auf Fläche	Aa	8,37 : 1	4,50	deckend
Primärbutton hover	Aa	11,06 : 1	4,50	deckend
Chip: Überschriftfarbe auf Primär-soft	Aa	9,95 : 1	4,50	deckend
Chip Akzent: Akzent-Text auf Akzent-soft	Aa	6,36 : 1	4,50	deckend
Feld: Eingabe auf Feldfläche	Aa	16,61 : 1	4,50	deckend
Feld: Rahmen auf Feldfläche	Aa	7,75 : 1	3,00	deckend
Feld: Fehlerrahmen auf Feldfläche	Aa	8,38 : 1	3,00	deckend
Feld deaktiviert: Schrift	Aa	6,66 : 1	4,50	deckend
Alert Erfolg	Aa	6,65 : 1	4,50	deckend
Alert Warnung	Aa	7,40 : 1	4,50	deckend
Alert Fehler	Aa	6,96 : 1	4,50	deckend
Alert Info	Aa	7,22 : 1	4,50	deckend
Alert-Fließtext auf Erfolg	Aa	14,32 : 1	4,50	deckend
Alert-Fließtext auf Fehler	Aa	13,79 : 1	4,50	deckend

Wappenrot

Paar	Muster	Wert	Soll	Ungünstigster Grund
Text auf hellem Glas	Aa	10,54 : 1	4,50	Hundefoto dunkel
Text gedämpft auf hellem Glas	Aa	5,09 : 1	4,50	Hundefoto dunkel
Überschrift auf hellem Glas	Aa	8,46 : 1	4,50	Hundefoto dunkel
Link auf hellem Glas	Aa	6,63 : 1	4,50	Hundefoto dunkel
Akzent-Text (Eyebrow) auf hellem Glas	Aa	4,63 : 1	4,50	Hundefoto dunkel
Fehlertext auf hellem Glas	Aa	5,16 : 1	4,50	Hundefoto dunkel
Erfolgstext auf hellem Glas	Aa	4,76 : 1	4,50	Hundefoto dunkel
Info-Text auf hellem Glas	Aa	5,25 : 1	4,50	Hundefoto dunkel
Warnungstext auf hellem Glas	Aa	5,20 : 1	4,50	Hundefoto dunkel
Fokusring auf hellem Glas	Aa	6,63 : 1	3,00	Hundefoto dunkel
Primärbutton-Fläche auf hellem Glas	Aa	6,63 : 1	3,00	Hundefoto dunkel
Text auf getöntem Glas	Aa	9,54 : 1	4,50	Hundefoto hell
Text gedämpft auf getöntem Glas	Aa	8,13 : 1	4,50	Hundefoto hell
Link auf getöntem Glas	Aa	6,82 : 1	4,50	Hundefoto hell
Akzent auf getöntem Glas	Aa	6,82 : 1	4,50	Hundefoto hell
Fokusring auf getöntem Glas	Aa	6,82 : 1	3,00	Hundefoto hell
Text auf Karte im hellen Glas	Aa	12,93 : 1	4,50	Hundefoto dunkel
Text gedämpft auf Karte	Aa	6,24 : 1	4,50	Hundefoto dunkel
Link auf Karte	Aa	8,13 : 1	4,50	Hundefoto dunkel
Akzent-Text auf Karte	Aa	5,68 : 1	4,50	Hundefoto dunkel
Primärbutton: Schrift auf Fläche	Aa	10,15 : 1	4,50	deckend
Primärbutton hover	Aa	12,95 : 1	4,50	deckend
Chip: Überschriftfarbe auf Primär-soft	Aa	11,03 : 1	4,50	deckend
Chip Akzent: Akzent-Text auf Akzent-soft	Aa	6,60 : 1	4,50	deckend
Feld: Eingabe auf Feldfläche	Aa	17,10 : 1	4,50	deckend
Feld: Rahmen auf Feldfläche	Aa	8,25 : 1	3,00	deckend
Feld: Fehlerrahmen auf Feldfläche	Aa	8,38 : 1	3,00	deckend
Feld deaktiviert: Schrift	Aa	6,86 : 1	4,50	deckend
Alert Erfolg	Aa	6,65 : 1	4,50	deckend
Alert Warnung	Aa	7,40 : 1	4,50	deckend
Alert Fehler	Aa	6,96 : 1	4,50	deckend
Alert Info	Aa	7,22 : 1	4,50	deckend
Alert-Fließtext auf Erfolg	Aa	14,75 : 1	4,50	deckend
Alert-Fließtext auf Fehler	Aa	14,20 : 1	4,50	deckend

Erde

Paar	Muster	Wert	Soll	Ungünstigster Grund
Text auf hellem Glas	Aa	10,44 : 1	4,50	Hundefoto dunkel
Text gedämpft auf hellem Glas	Aa	4,74 : 1	4,50	Hundefoto dunkel
Überschrift auf hellem Glas	Aa	8,30 : 1	4,50	Hundefoto dunkel
Link auf hellem Glas	Aa	6,38 : 1	4,50	Hundefoto dunkel
Akzent-Text (Eyebrow) auf hellem Glas	Aa	5,02 : 1	4,50	Hundefoto dunkel
Fehlertext auf hellem Glas	Aa	5,13 : 1	4,50	Hundefoto dunkel
Erfolgstext auf hellem Glas	Aa	4,73 : 1	4,50	Hundefoto dunkel
Info-Text auf hellem Glas	Aa	5,22 : 1	4,50	Hundefoto dunkel
Warnungstext auf hellem Glas	Aa	5,16 : 1	4,50	Hundefoto dunkel
Fokusring auf hellem Glas	Aa	6,38 : 1	3,00	Hundefoto dunkel
Primärbutton-Fläche auf hellem Glas	Aa	6,38 : 1	3,00	Hundefoto dunkel
Text auf getöntem Glas	Aa	8,64 : 1	4,50	Hundefoto hell
Text gedämpft auf getöntem Glas	Aa	7,50 : 1	4,50	Hundefoto hell
Link auf getöntem Glas	Aa	4,81 : 1	4,50	Hundefoto hell
Akzent auf getöntem Glas	Aa	4,81 : 1	4,50	Hundefoto hell
Fokusring auf getöntem Glas	Aa	4,81 : 1	3,00	Hundefoto hell
Text auf Karte im hellen Glas	Aa	12,84 : 1	4,50	Hundefoto dunkel
Text gedämpft auf Karte	Aa	5,83 : 1	4,50	Hundefoto dunkel
Link auf Karte	Aa	7,85 : 1	4,50	Hundefoto dunkel
Akzent-Text auf Karte	Aa	6,17 : 1	4,50	Hundefoto dunkel
Primärbutton: Schrift auf Fläche	Aa	9,74 : 1	4,50	deckend
Primärbutton hover	Aa	12,67 : 1	4,50	deckend
Chip: Überschriftfarbe auf Primär-soft	Aa	11,00 : 1	4,50	deckend
Chip Akzent: Akzent-Text auf Akzent-soft	Aa	6,88 : 1	4,50	deckend
Feld: Eingabe auf Feldfläche	Aa	17,04 : 1	4,50	deckend
Feld: Rahmen auf Feldfläche	Aa	7,73 : 1	3,00	deckend
Feld: Fehlerrahmen auf Feldfläche	Aa	8,38 : 1	3,00	deckend
Feld deaktiviert: Schrift	Aa	6,41 : 1	4,50	deckend
Alert Erfolg	Aa	6,65 : 1	4,50	deckend
Alert Warnung	Aa	7,40 : 1	4,50	deckend
Alert Fehler	Aa	6,96 : 1	4,50	deckend
Alert Info	Aa	7,22 : 1	4,50	deckend
Alert-Fließtext auf Erfolg	Aa	14,70 : 1	4,50	deckend
Alert-Fließtext auf Fehler	Aa	14,15 : 1	4,50	deckend

Dämmerung

Paar	Muster	Wert	Soll	Ungünstigster Grund
Text auf hellem Glas	Aa	10,40 : 1	4,50	Hundefoto hell
Text gedämpft auf hellem Glas	Aa	7,25 : 1	4,50	Hundefoto hell
Überschrift auf hellem Glas	Aa	9,86 : 1	4,50	Hundefoto hell
Link auf hellem Glas	Aa	6,89 : 1	4,50	Hundefoto hell
Akzent-Text (Eyebrow) auf hellem Glas	Aa	7,41 : 1	4,50	Hundefoto hell
Fehlertext auf hellem Glas	Aa	6,18 : 1	4,50	Hundefoto hell
Erfolgstext auf hellem Glas	Aa	6,84 : 1	4,50	Hundefoto hell
Info-Text auf hellem Glas	Aa	6,54 : 1	4,50	Hundefoto hell
Warnungstext auf hellem Glas	Aa	7,17 : 1	4,50	Hundefoto hell
Fokusring auf hellem Glas	Aa	7,41 : 1	3,00	Hundefoto hell
Primärbutton-Fläche auf hellem Glas	Aa	4,54 : 1	3,00	Hundefoto hell
Text auf getöntem Glas	Aa	6,84 : 1	4,50	Hundefoto hell
Text gedämpft auf getöntem Glas	Aa	6,20 : 1	4,50	Hundefoto hell
Link auf getöntem Glas	Aa	4,67 : 1	4,50	Hundefoto hell
Akzent auf getöntem Glas	Aa	4,67 : 1	4,50	Hundefoto hell
Fokusring auf getöntem Glas	Aa	4,67 : 1	3,00	Hundefoto hell
Text auf Karte im hellen Glas	Aa	9,06 : 1	4,50	Hundefoto hell
Text gedämpft auf Karte	Aa	6,32 : 1	4,50	Hundefoto hell
Link auf Karte	Aa	6,00 : 1	4,50	Hundefoto hell
Akzent-Text auf Karte	Aa	6,46 : 1	4,50	Hundefoto hell
Primärbutton: Schrift auf Fläche	Aa	6,78 : 1	4,50	deckend
Primärbutton hover	Aa	8,34 : 1	4,50	deckend
Chip: Überschriftfarbe auf Primär-soft	Aa	7,23 : 1	4,50	deckend
Chip Akzent: Akzent-Text auf Akzent-soft	Aa	6,35 : 1	4,50	deckend
Feld: Eingabe auf Feldfläche	Aa	15,93 : 1	4,50	deckend
Feld: Rahmen auf Feldfläche	Aa	11,11 : 1	3,00	deckend
Feld: Fehlerrahmen auf Feldfläche	Aa	9,46 : 1	3,00	deckend
Feld deaktiviert: Schrift	Aa	9,25 : 1	4,50	deckend
Alert Erfolg	Aa	8,34 : 1	4,50	deckend
Alert Warnung	Aa	8,96 : 1	4,50	deckend
Alert Fehler	Aa	8,43 : 1	4,50	deckend
Alert Info	Aa	8,26 : 1	4,50	deckend
Alert-Fließtext auf Erfolg	Aa	12,68 : 1	4,50	deckend
Alert-Fließtext auf Fehler	Aa	14,20 : 1	4,50	deckend

Flutlicht

Paar	Muster	Wert	Soll	Ungünstigster Grund
Text auf hellem Glas	Aa	12,46 : 1	4,50	Hundefoto hell
Text gedämpft auf hellem Glas	Aa	9,39 : 1	4,50	Hundefoto hell
Überschrift auf hellem Glas	Aa	11,77 : 1	4,50	Hundefoto hell
Link auf hellem Glas	Aa	9,20 : 1	4,50	Hundefoto hell
Akzent-Text (Eyebrow) auf hellem Glas	Aa	9,13 : 1	4,50	Hundefoto hell
Fehlertext auf hellem Glas	Aa	6,97 : 1	4,50	Hundefoto hell
Erfolgstext auf hellem Glas	Aa	7,72 : 1	4,50	Hundefoto hell
Info-Text auf hellem Glas	Aa	7,38 : 1	4,50	Hundefoto hell
Warnungstext auf hellem Glas	Aa	8,09 : 1	4,50	Hundefoto hell
Fokusring auf hellem Glas	Aa	9,13 : 1	3,00	Hundefoto hell
Primärbutton-Fläche auf hellem Glas	Aa	12,27 : 1	3,00	Hundefoto hell
Text auf getöntem Glas	Aa	7,87 : 1	4,50	Hundefoto dunkel
Text gedämpft auf getöntem Glas	Aa	4,94 : 1	4,50	Hundefoto dunkel
Link auf getöntem Glas	Aa	9,10 : 1	4,50	Hundefoto dunkel
Akzent auf getöntem Glas	Aa	4,81 : 1	4,50	Hundefoto dunkel
Fokusring auf getöntem Glas	Aa	9,10 : 1	3,00	Hundefoto dunkel
Text auf Karte im hellen Glas	Aa	10,49 : 1	4,50	Hundefoto hell
Text gedämpft auf Karte	Aa	7,90 : 1	4,50	Hundefoto hell
Link auf Karte	Aa	7,75 : 1	4,50	Hundefoto hell
Akzent-Text auf Karte	Aa	7,68 : 1	4,50	Hundefoto hell
Primärbutton: Schrift auf Fläche	Aa	11,97 : 1	4,50	deckend
Primärbutton hover	Aa	9,76 : 1	4,50	deckend
Chip: Überschriftfarbe auf Primär-soft	Aa	8,23 : 1	4,50	deckend
Chip Akzent: Akzent-Text auf Akzent-soft	Aa	7,15 : 1	4,50	deckend
Feld: Eingabe auf Feldfläche	Aa	15,84 : 1	4,50	deckend
Feld: Rahmen auf Feldfläche	Aa	11,94 : 1	3,00	deckend
Feld: Fehlerrahmen auf Feldfläche	Aa	8,86 : 1	3,00	deckend
Feld deaktiviert: Schrift	Aa	7,96 : 1	4,50	deckend
Alert Erfolg	Aa	8,34 : 1	4,50	deckend
Alert Warnung	Aa	8,96 : 1	4,50	deckend
Alert Fehler	Aa	8,43 : 1	4,50	deckend
Alert Info	Aa	8,26 : 1	4,50	deckend
Alert-Fließtext auf Erfolg	Aa	13,46 : 1	4,50	deckend
Alert-Fließtext auf Fehler	Aa	15,07 : 1	4,50	deckend

Typografie

Zwei Schriften, selbst gehostet als woff2 mit font-display: swap, Lizenz SIL OFL. Kein Google-Fonts-CDN. Vier Schnitte insgesamt.

Vergleich: Überschrift

Bricolage Grotesque 700 · gewählt

Welpenstunde am Mittwoch, Größe egal

Figtree 700

Welpenstunde am Mittwoch, Größe egal

Outfit 700

Welpenstunde am Mittwoch, Größe egal

Nunito Sans 700

Welpenstunde am Mittwoch, Größe egal

Vergleich: Fließtext und Wochenplan

Source Sans 3 · gewählt

Mittwoch ab 17:30 Uhr Welpen- und Junghundestunde, 10 € pro Stunde. Erziehungskurs: 6 Doppelstunden für 130 €. Übungsleiterin Lauren Helm. Il1 0O 18:30–19:30

Atkinson Hyperlegible Next · verworfen

Mittwoch ab 17:30 Uhr Welpen- und Junghundestunde, 10 € pro Stunde. Erziehungskurs: 6 Doppelstunden für 130 €. Übungsleiterin Lauren Helm. Il1 0O 18:30–19:30

Inter

Mittwoch ab 17:30 Uhr Welpen- und Junghundestunde, 10 € pro Stunde. Erziehungskurs: 6 Doppelstunden für 130 €. Übungsleiterin Lauren Helm. Il1 0O 18:30–19:30

Entscheidung

Bricolage Grotesque für Überschriften: freundlich und mit Charakter durch die leichten Tintenfallen, aber nicht verspielt. Figtree und Nunito Sans sind netter, aber beliebiger. Outfit wirkt geometrisch kühl. Source Sans 3 für Text: offene, humanistische Formen, sehr gut lesbar auch in kleinen Größen und für ältere Augen, ruhige Ziffern mit tabular-nums. Atkinson Hyperlegible Next verworfen: Die durchgestrichene Null hat keine Alternative und wirkt in Uhrzeiten, Preisen und Daten unruhig. Inter wirkt eher technisch.

Schnitte

Bricolage Grotesque 700: H1, H2
Bricolage Grotesque 600: H3, H4
Source Sans 3 400: Text
Source Sans 3 600: Labels, Buttons, Hervorhebung

Skala

Modular, fluid mit clamp(), Faktor 1,2 auf dem Handy bis 1,25 auf dem Desktop. Fließtext 18–19 px, Zeilenhöhe 1,6. Uhrzeiten und Preise mit tabular-nums.

--fs-4xl
40–58 pxTraining mit Hund
--fs-3xl
34–45 pxTrainingszeiten
--fs-2xl
29–36 pxSo wirst du Mitglied
--fs-xl
24–28 pxErziehungskurs
--fs-lg
20–22 pxEinleitung und Lead-Text
--fs-md
18–19 pxFließtext für alles, was gelesen wird.
--fs-sm
16–17 pxHinweise, Bildunterschriften, Meta
--fs-xs
15 pxNur Doku und Kleinstlabels

Raster und Abstände

Raster

Mobile first: 375 → 768 → 1024 → 1280 → 1440 px
Spalten: 4 (Handy), 8 (Tablet), 12 (Desktop)
Inhalt max. 72 rem (1152 px), Header und Footer 80 rem
Textmaß ca. 65 Zeichen (--measure)
Seitenrand (--gutter) 16 px, ab 768 px 24 px
Navigation als Schublade unter 1240 px
Trefferfläche mindestens 44 px

Abstände (4er-Raster)

--space-1 · 4
--space-2 · 8
--space-3 · 12
--space-4 · 16
--space-5 · 24
--space-6 · 32
--space-7 · 48
--space-8 · 64
--space-9 · 96

Radien, Schatten, Glasstufen

Glas ist die Bühne, nicht jedes Element. Ganze Kapitel sind Scheiben, Inhalte darin sind ruhig (Karten mit --surface-card, keine Scheibe auf der Scheibe). Formularfelder bleiben deckend.

--radius-s · 8

--radius-m · 12

--radius-l · 16

--radius-pill

Zwei Glasstärken über hellem und dunklem Grund

Hell
milchig, dunkler Text

Getönt
Primärfarbe, heller Text

Hell
über dunklem Laub

Getönt
über dunklem Laub

Aufbau einer Scheibe

backdrop-filter: blur(18px) saturate(1.4)
Füllung --surface-glass (62 % über der Wiese, 84 % über dem Foto) oder --surface-glass-strong (92 %)
1-px-Verlaufskante über eine Maske, oben hell, unten fast weg
weicher, großer Schatten --glass-shadow, Radius 16 px

Fallbacks

ohne backdrop-filter: deckende Fläche
prefers-reduced-transparency: deckend, ohne Rauschen
prefers-reduced-motion: keine Animationen
Hintergründe: Foto, Bild, Verlauf (aus den Theme-Tokens)

Icons

Eigenes Set: 24er-Raster, Strich 1,75, runde Enden, Farbe über currentColor. So folgt jedes Icon dem Theme.

clock
calendar
pin
route
euro
message
mail
phone
user
users
home
weather
trophy
file
image
check
arrow
external
info
alert
error
success