CDesign system
Bold Modern
The portal as a lifestyle brand and a tech product: flat color blocks, geometric shapes, very round cards.
Bricolage Grotesque, very bold, for titles; Figtree for text; pills and bento grids everywhere.
Interactions that answer the touch: getting things done becomes pleasant.
Fonts: Bricolage Grotesque (variable, optical size and width axes) and Figtree (variable).
Site theme (level 3), applied to the whole page
- theme.accent
- rose
- theme.secondary
- orange
- theme.gradient
- rose.500 → orange.500
- theme.heroTone
- sunset
- theme.motion
- expressive
01Palette
Palette
Level 1. Every hue shares the same step grammar; sites pick scales, never hex values.
navy
rose
orange
turquoise
gold
green
sand
red
amber
sky
violet
blush
ink
Roles guaranteed by the contrast script: 300 = text dark · 400 = fill dark · 500 = fill light · 700 = text light.
02Semantic tokens
Semantic tokens
Levels 2 and 3, resolved for State of Leonida. Components only use these names.
| Token | Light | Dark | Level |
|---|---|---|---|
| --bg | #FFF6EC | #0A0F1F | semantic (2) |
| --bg-subtle | #F8ECDD | #0E1428 | semantic (2) |
| --surface | #FFFFFF | #121A31 | semantic (2) |
| --surface-2 | #FFFBF6 | #18203A | semantic (2) |
| --surface-inverse | #0E1A3A | #FFF6EC | semantic (2) |
| --fg | #0E1A3A | #FFF6EC | semantic (2) |
| --fg-muted | #4F5B7A | #A7B0C8 | semantic (2) |
| --fg-inverse | #FFF6EC | #0E1A3A | semantic (2) |
| --border-strong | #77819B | #77819B | semantic (2) |
| --accent | #FF5F8Frose.500 | #FF7AA4rose.400 | site (3) |
| --accent-hover | #E8457Arose.600 | #FF9DBArose.300 | site (3) |
| --on-accent | #0E1A3Anavy.900 | #0A0F1Fink.950 | site (3) |
| --accent-ink | #C2245Crose.700 | #FF9DBArose.300 | site (3) |
| --accent-soft | #FFE0E9rose.100 | #3D1226rose.900 | site (3) |
| --secondary | #FF9A3Corange.500 | #FFAA55orange.400 | site (3) |
| --on-secondary | #0E1A3Anavy.900 | #0A0F1Fink.950 | site (3) |
| --secondary-ink | #A84F05orange.700 | #FFC183orange.300 | site (3) |
| --secondary-soft | #FFE9D1orange.100 | #3A220Eorange.900 | site (3) |
| --gradient-from | #FF5F8Frose.500 | #FF7AA4rose.400 | site (3) |
| --gradient-to | #FF9A3Corange.500 | #FFAA55orange.400 | site (3) |
| --focus | #C2245C | #FF9DBA | semantic (2) |
| --success | #237F48 | #5AC67D | semantic (2) |
| --warning | #F5A70A | #FFC233 | semantic (2) |
| --danger | #D23129 | #FF7570 | semantic (2) |
| --info | #1F6CD1 | #5EA8FF | semantic (2) |
| --blush | #FFB2C6 | #FFB2C6 | semantic (2) |
| --on-blush | #0E1A3A | #0A0F1F | semantic (2) |
| --blush-ink | #A63E66 | #FFB2C6 | semantic (2) |
| --blush-soft | #FFE8EF | #3B1A2B | semantic (2) |
03Contrast
Contrast
Computed from the same token sources as the CSS. Switch the site theme above to audit another site.
124 of 124 pairs pass WCAG AA for State of Leonida. Same check in CI: pnpm check:contrast.
- Light
- 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
- Dark
- 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
04Typography
Typography
Bricolage Grotesque 800 at optical size 96 for display, tracking -0.04em, sentence case. Figtree for text (17px, 1.55) and bold pill labels.
Leonida, hello
00Eyebrow with index
Eyebrow with icon
Muted eyebrow
A lede sets up a section in one or two sentences, never more.
Body text is Figtree at 17px with a 1.55 line height. Paragraphs stay under 70 characters per line, so a renewal notice reads as easily as a travel story.
- --step--113px → 14pxRenew your license in ten minutes, 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 → 28pxRenew your license in ten minutes, online.
- --step-119px → 22pxRenew your license in ten minutes, online.
- --step-016px → 18pxRenew your license in ten minutes, online.
05Shape & rhythm
Shape & rhythm
Cards 32px, media 24px, controls and badges in pills. Inner radius = outer radius minus padding. Shadows are soft and tinted by the site accent.
Radius
--radius-control
--radius-card
--radius-media
--radius-badge
Elevation
--shadow-1
--shadow-2
--shadow-3
--shadow-4
--shadow-card
--shadow-raised
- --gutterside margins
- --grid-gap12-column gap
- --section-yspace between sections
- Shared defaults: gutter clamp(1.25rem, 0rem + 5.5556vw, 5rem); content max 100rem.
06Motion
Motion
Playful pops with a little overshoot, spring micro-interactions, a ticker for alerts. Calm on service sites, nothing under reduced motion. Hover the rows.
- --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 & alerts
Badges & alerts
The hurricane alert runs as a ticker: it pauses on hover and focus, can be stopped, and is static under reduced motion or on calm sites.
Light
Hurricane season
Hurricane season runs through November 30. Know your evacuation zone, keep a seven-day kit ready and sign up for LeoAlert to get official warnings by text.
Know your evacuation zone.
Zones were redrawn this year in every coastal county.
Check my zoneCauseway closed Sunday morning.
Your renewal was submitted.
We never ask for payment by phone.
Dark
Hurricane season
Hurricane season runs through November 30. Know your evacuation zone, keep a seven-day kit ready and sign up for LeoAlert to get official warnings by text.
Know your evacuation zone.
Zones were redrawn this year in every coastal county.
Check my zoneCauseway closed Sunday morning.
Your renewal was submitted.
We never ask for payment by phone.
09Cards
Cards
Flat color blocks with a tone each: accent soft, secondary soft, surface, inverse, accent and gradient. Agency cards open a nested site scope and wear that agency’s colors.
Light
Dark
10Forms
Forms
Pill fields with visible labels, errors announced with text and icon, never color alone. Radio options are chips.
Light
Dark
11Accordion & carousel
Accordion & carousel
Keyboard: Tab to a slide, then arrow keys, Home and End. Mouse: drag the track.
Light
Dark
13Seal & emblems
Seal & emblems
Original artwork. Each agency has its own silhouette (shield, tile, flower, hexagon) with a white sticker outline, so it reads on any background; colors stay fixed in both themes, like real insignia. Geometry is decorative and hidden from assistive tech.
Light
Kalaga CountyPhoto used in cards: Boats anchored around a sandbar in clear blue water, people swimming and relaxing on deck under a sunny sky.
Dark
Kalaga CountyPhoto used in cards: Boats anchored around a sandbar in clear blue water, people swimming and relaxing on deck under a sunny sky.