Panel card
Card pattern
Cards use the panel utility: card surface at 80% opacity, hairline border, large radius and the shared panel shadow.
Design system
BCSE style guide
Every color, type style and control on this site comes from these tokens, defined once in the stylesheet. Change a token here and the whole site follows.
Color tokens
Values are OKLCH. Use the semantic token, never a hardcoded hex or text-white.
--backgroundPage canvas (royal navy)--foregroundBody and heading text--primaryFlag blue: primary buttons, links, eyebrows--secondaryDeep royal blue surfaces and hovers--accentAccent fills on light surfaces--cardPanels and cards--mutedMuted surfaces--muted-foregroundSecondary text (AA on navy)--borderHairlines and dividers--ringFocus-visible ring--destructiveErrors and destructive actions
Typography
Montserrat (--font-display) carries h1/h2 and controls. Fraunces (--font-sans) carries body copy and h3–h6.
H1 · Montserrat 800 · clamp 2.25–3.5rem
H2 · Montserrat 800 · clamp 1.75–2.5rem
H3 · Fraunces 600 · clamp 1.15–1.4rem
H4–H6 · Fraunces 600 · 1rem
Eyebrow · 0.7rem · flag blue · uppercase
Body copy uses Fraunces at the browser base size with muted-foreground for secondary text, which clears 4.5:1 on the navy canvas.
Controls and focus
Tab through these — every control shows a two-tone focus ring built from --ring, and every target is at least 44px tall.
Hero surface
Gradient pattern
The hero-surface utility applies the navy-to-flag-blue brand gradient used at the top of every page.