CDesignsystem
Bold Modern
Das Portal als Lifestyle-Marke und Tech-Produkt: flächige Farbblöcke, geometrische Formen, sehr runde Karten.
Bricolage Grotesque, sehr fett, für Überschriften; Figtree für Fließtext; überall Pillen und Bento-Raster.
Interaktionen, die auf Berührung antworten: Behördengänge werden angenehm.
Schriften: Bricolage Grotesque (variabel, Achsen für optische Größe und Breite) und Figtree (variabel).
Website-Thema (Ebene 3), auf die ganze Seite angewendet
- theme.accent
- rose
- theme.secondary
- orange
- theme.gradient
- rose.500 → orange.500
- theme.heroTone
- sunset
- theme.motion
- expressive
01Palette
Palette
Ebene 1. Jeder Farbton folgt derselben Stufengrammatik; Websites wählen Skalen, nie Hex-Werte.
navy
rose
orange
turquoise
gold
green
sand
red
amber
sky
violet
blush
ink
Vom Kontrastskript garantierte Rollen: 300 = Text dunkel · 400 = Füllung dunkel · 500 = Füllung hell · 700 = Text hell.
02Semantische Tokens
Semantische Tokens
Ebenen 2 und 3, aufgelöst für Staat Leonida. Komponenten verwenden nur diese Namen.
| Token | Hell | Dunkel | Ebene |
|---|---|---|---|
| --bg | #FFF6EC | #0A0F1F | semantisch (2) |
| --bg-subtle | #F8ECDD | #0E1428 | semantisch (2) |
| --surface | #FFFFFF | #121A31 | semantisch (2) |
| --surface-2 | #FFFBF6 | #18203A | semantisch (2) |
| --surface-inverse | #0E1A3A | #FFF6EC | semantisch (2) |
| --fg | #0E1A3A | #FFF6EC | semantisch (2) |
| --fg-muted | #4F5B7A | #A7B0C8 | semantisch (2) |
| --fg-inverse | #FFF6EC | #0E1A3A | semantisch (2) |
| --border-strong | #77819B | #77819B | semantisch (2) |
| --accent | #FF5F8Frose.500 | #FF7AA4rose.400 | Website (3) |
| --accent-hover | #E8457Arose.600 | #FF9DBArose.300 | Website (3) |
| --on-accent | #0E1A3Anavy.900 | #0A0F1Fink.950 | Website (3) |
| --accent-ink | #C2245Crose.700 | #FF9DBArose.300 | Website (3) |
| --accent-soft | #FFE0E9rose.100 | #3D1226rose.900 | Website (3) |
| --secondary | #FF9A3Corange.500 | #FFAA55orange.400 | Website (3) |
| --on-secondary | #0E1A3Anavy.900 | #0A0F1Fink.950 | Website (3) |
| --secondary-ink | #A84F05orange.700 | #FFC183orange.300 | Website (3) |
| --secondary-soft | #FFE9D1orange.100 | #3A220Eorange.900 | Website (3) |
| --gradient-from | #FF5F8Frose.500 | #FF7AA4rose.400 | Website (3) |
| --gradient-to | #FF9A3Corange.500 | #FFAA55orange.400 | Website (3) |
| --focus | #C2245C | #FF9DBA | semantisch (2) |
| --success | #237F48 | #5AC67D | semantisch (2) |
| --warning | #F5A70A | #FFC233 | semantisch (2) |
| --danger | #D23129 | #FF7570 | semantisch (2) |
| --info | #1F6CD1 | #5EA8FF | semantisch (2) |
| --blush | #FFB2C6 | #FFB2C6 | semantisch (2) |
| --on-blush | #0E1A3A | #0A0F1F | semantisch (2) |
| --blush-ink | #A63E66 | #FFB2C6 | semantisch (2) |
| --blush-soft | #FFE8EF | #3B1A2B | semantisch (2) |
03Kontrast
Kontrast
Berechnet aus denselben Token-Quellen wie das CSS. Wechseln Sie oben das Website-Thema, um eine andere Website zu prüfen.
124 von 124 Paaren erfüllen WCAG AA für Staat Leonida. Dieselbe Prüfung in der CI: pnpm check:contrast.
- Hell
- Aafg / bg16.00AA
- Aafg / bg-subtle14.69AA
- Aafg / surface17.11AA
- Aafg / surface-216.60AA
- Aafg-muted / bg6.32AA
- Aafg-muted / bg-subtle5.80AA
- Aafg-muted / surface6.75AA
- Aafg-muted / surface-26.55AA
- Aaaccent-ink / bg5.31AA
- Aaaccent-ink / bg-subtle4.87AA
- Aaaccent-ink / surface5.67AA
- Aaaccent-ink / surface-25.51AA
- Aaaccent-ink / accent-soft4.62AA
- Aasecondary-ink / bg5.19AA
- Aasecondary-ink / bg-subtle4.76AA
- Aasecondary-ink / surface5.55AA
- Aasecondary-ink / surface-25.38AA
- Aasecondary-ink / secondary-soft4.71AA
- Aaon-accent / accent5.94AA
- Aaon-accent / accent-hover4.53AA
- Aaon-secondary / secondary8.10AA
- Aaon-secondary / secondary-hover6.26AA
- Aaon-gradient / gradient-from5.94AA
- Aaon-gradient / gradient-to8.10AA
- Aafg-inverse / surface-inverse16.00AA
- Aafg-on-image / scrim16.00AA
- Aaon-blush / blush10.13AA
- Aablush-ink / bg5.61AA
- Aablush-ink / bg-subtle5.15AA
- Aablush-ink / surface6.00AA
- Aablush-ink / surface-25.82AA
- Aablush-ink / blush-soft5.15AA
- Aafg / blush-soft14.70AA
- Aafg-muted / blush-soft5.80AA
- Aasuccess-ink / success-soft5.51AA
- Aasuccess-ink / bg6.11AA
- Aasuccess-ink / surface6.53AA
- Aaon-success / success5.00AA
- Aawarning-ink / warning-soft5.14AA
- Aawarning-ink / bg5.41AA
- Aawarning-ink / surface5.78AA
- Aaon-warning / warning8.48AA
- Aadanger-ink / danger-soft5.29AA
- Aadanger-ink / bg6.11AA
- Aadanger-ink / surface6.54AA
- Aaon-danger / danger4.99AA
- Aainfo-ink / info-soft5.51AA
- Aainfo-ink / bg6.27AA
- Aainfo-ink / surface6.70AA
- Aaon-info / info5.09AA
- Aamarine-ink / marine-soft6.59AA
- Aamarine-ink / bg7.62AA
- Aamarine-ink / surface8.15AA
- Aaon-marine / marine6.00AA
- border-strong / bg3.64UI
- border-strong / bg-subtle3.34UI
- border-strong / surface3.89UI
- border-strong / surface-23.78UI
- focus / bg5.31UI
- focus / bg-subtle4.87UI
- focus / surface5.67UI
- focus / surface-25.51UI
- Dunkel
- Aafg / bg17.84AA
- Aafg / bg-subtle17.09AA
- Aafg / surface16.13AA
- Aafg / surface-215.04AA
- Aafg-muted / bg8.80AA
- Aafg-muted / bg-subtle8.43AA
- Aafg-muted / surface7.95AA
- Aafg-muted / surface-27.41AA
- Aaaccent-ink / bg9.79AA
- Aaaccent-ink / bg-subtle9.38AA
- Aaaccent-ink / surface8.85AA
- Aaaccent-ink / surface-28.25AA
- Aaaccent-ink / accent-soft8.21AA
- Aasecondary-ink / bg12.00AA
- Aasecondary-ink / bg-subtle11.49AA
- Aasecondary-ink / surface10.85AA
- Aasecondary-ink / surface-210.11AA
- Aasecondary-ink / secondary-soft9.33AA
- Aaon-accent / accent7.79AA
- Aaon-accent / accent-hover9.79AA
- Aaon-secondary / secondary10.11AA
- Aaon-secondary / secondary-hover12.00AA
- Aaon-gradient / gradient-from7.79AA
- Aaon-gradient / gradient-to10.11AA
- Aafg-inverse / surface-inverse16.00AA
- Aafg-on-image / scrim17.84AA
- Aaon-blush / blush11.29AA
- Aablush-ink / bg11.29AA
- Aablush-ink / bg-subtle10.82AA
- Aablush-ink / surface10.21AA
- Aablush-ink / surface-29.52AA
- Aablush-ink / blush-soft9.09AA
- Aafg / blush-soft14.35AA
- Aafg-muted / blush-soft7.08AA
- Aasuccess-ink / success-soft8.85AA
- Aasuccess-ink / bg10.89AA
- Aasuccess-ink / surface9.85AA
- Aaon-success / success8.91AA
- Aawarning-ink / warning-soft10.56AA
- Aawarning-ink / bg13.28AA
- Aawarning-ink / surface12.01AA
- Aaon-warning / warning11.82AA
- Aadanger-ink / danger-soft8.07AA
- Aadanger-ink / bg9.50AA
- Aadanger-ink / surface8.59AA
- Aaon-danger / danger7.29AA
- Aainfo-ink / info-soft8.37AA
- Aainfo-ink / bg10.24AA
- Aainfo-ink / surface9.26AA
- Aaon-info / info7.74AA
- Aamarine-ink / marine-soft8.05AA
- Aamarine-ink / bg9.26AA
- Aamarine-ink / surface8.37AA
- Aaon-marine / marine6.55AA
- border-strong / bg4.90UI
- border-strong / bg-subtle4.70UI
- border-strong / surface4.43UI
- border-strong / surface-24.13UI
- focus / bg9.79UI
- focus / bg-subtle9.38UI
- focus / surface8.85UI
- focus / surface-28.25UI
04Typografie
Typografie
Bricolage Grotesque 800 mit optischer Größe 96 für Überschriften, Laufweite -0.04em, Großschreibung nur am Satzanfang. Figtree für Fließtext (17 px, 1.55) und fette Pillen-Beschriftungen.
Leonida, hallo
00Dachzeile mit Index
Dachzeile mit Symbol
Dezente Dachzeile
Ein Vorspann führt in ein bis zwei Sätzen in einen Abschnitt ein, nie mehr.
Fließtext ist Figtree in 17 px mit einem Zeilenabstand von 1.55. Absätze bleiben unter 70 Zeichen pro Zeile, damit sich ein Verlängerungshinweis so leicht liest wie ein Reisebericht.
- --step--113px → 14pxVerlängern Sie Ihren Führerschein in zehn Minuten, online.
- --step-756px → 144pxSol, Mare, Libertas
- --step-648px → 104pxSol, Mare, Libertas
- --step-540px → 72pxSol, Mare, Libertas
- --step-434px → 52pxSol, Mare, Libertas
- --step-328px → 38pxSol, Mare, Libertas
- --step-223px → 28pxVerlängern Sie Ihren Führerschein in zehn Minuten, online.
- --step-119px → 22pxVerlängern Sie Ihren Führerschein in zehn Minuten, online.
- --step-016px → 18pxVerlängern Sie Ihren Führerschein in zehn Minuten, online.
05Form und Rhythmus
Form und Rhythmus
Karten 32 px, Bilder 24 px, Bedienelemente und Badges als Pillen. Innerer Radius = äußerer Radius minus Innenabstand. Weiche Schatten, getönt in der Akzentfarbe der Website.
Radius
--radius-control
--radius-card
--radius-media
--radius-badge
Erhebung
--shadow-1
--shadow-2
--shadow-3
--shadow-4
--shadow-card
--shadow-raised
- --gutterSeitenränder
- --grid-gapAbstand im 12-Spalten-Raster
- --section-yAbstand zwischen Abschnitten
- Gemeinsame Standardwerte: Rand clamp(1.25rem, 0rem + 5.5556vw, 5rem); maximale Inhaltsbreite 100rem.
06Bewegung
Bewegung
Verspielte Einblendungen mit leichtem Überschwingen, federnde Mikrointeraktionen, ein Laufband für Warnungen. Ruhig auf Service-Websites, nichts bei reduzierter Bewegung. Fahren Sie mit der Maus über die Zeilen.
- --duration-instant 90ms
- --duration-fast 160ms
- --duration-base 260ms
- --duration-slow 480ms
- --duration-slower 800ms
- --duration-cinematic 1400ms
- --ease-standardcubic-bezier(.2,0,0,1)
- --ease-out-expocubic-bezier(.16,1,.3,1)
- --ease-in-outcubic-bezier(.65,0,.35,1)
- --ease-springcubic-bezier(.34,1.56,.64,1)
reveal
type:scale, y:32, duration:0.9, ease:back.out(1.4), stagger:0.07
split
mask:true, yPercent:105, duration:1, stagger:0.08, ease:expo.out
hero
scaleFrom:1.1, duration:2, ease:expo.out, parallax:0.12
counter
duration:1.6, ease:power3.out
08Badges und Warnungen
Badges und Warnungen
Die Hurrikanwarnung läuft als Laufband: Sie pausiert beim Überfahren und bei Fokus, lässt sich anhalten und ist bei reduzierter Bewegung oder auf ruhigen Websites statisch.
Hell
Hurrikansaison
Die Hurrikansaison dauert bis zum 30. November. Kennen Sie Ihre Evakuierungszone, halten Sie eine Notfallausrüstung für sieben Tage bereit und melden Sie sich bei LeoAlert an, um offizielle Warnungen per SMS zu erhalten.
Kennen Sie Ihre Evakuierungszone.
Die Zonen wurden dieses Jahr in allen Küsten-Countys neu gezogen.
Meine Zone ansehenDer Causeway ist am Sonntagmorgen gesperrt.
Ihre Verlängerung wurde abgeschickt.
Wir verlangen nie Zahlungen am Telefon.
Dunkel
Hurrikansaison
Die Hurrikansaison dauert bis zum 30. November. Kennen Sie Ihre Evakuierungszone, halten Sie eine Notfallausrüstung für sieben Tage bereit und melden Sie sich bei LeoAlert an, um offizielle Warnungen per SMS zu erhalten.
Kennen Sie Ihre Evakuierungszone.
Die Zonen wurden dieses Jahr in allen Küsten-Countys neu gezogen.
Meine Zone ansehenDer Causeway ist am Sonntagmorgen gesperrt.
Ihre Verlängerung wurde abgeschickt.
Wir verlangen nie Zahlungen am Telefon.
09Karten
Karten
Flächige Farbblöcke mit je eigenem Ton: Akzent sanft, Sekundär sanft, Fläche, invers, Akzent und Verlauf. Behördenkarten öffnen einen verschachtelten Website-Bereich und tragen die Farben dieser Behörde.
Hell
Dunkel
10Formulare
Formulare
Felder als Pillen mit sichtbaren Beschriftungen, Fehler werden mit Text und Symbol angezeigt, nie nur über die Farbe. Optionsfelder sind Chips.
Hell
Dunkel
11Akkordeon und Karussell
Akkordeon und Karussell
Tastatur: mit Tab zu einer Folie, dann Pfeiltasten, Pos1 und Ende. Maus: die Leiste ziehen.
Hell
Dunkel
13Siegel und Embleme
Siegel und Embleme
Originale Illustrationen. Jede Behörde hat ihre eigene Silhouette (Schild, Kachel, Blume, Sechseck) mit einer weißen Aufkleberkontur, damit sie auf jedem Hintergrund lesbar ist; die Farben bleiben in beiden Themen gleich, wie echte Abzeichen. Die Geometrie ist dekorativ und für assistive Technologien ausgeblendet.
Hell
Kalaga CountyFoto auf den Karten: Boote, die um eine Sandbank in klarem blauem Wasser ankern, Menschen, die schwimmen und sich an Deck in der Sonne entspannen.
Dunkel
Kalaga CountyFoto auf den Karten: Boote, die um eine Sandbank in klarem blauem Wasser ankern, Menschen, die schwimmen und sich an Deck in der Sonne entspannen.