Design system · v1 · 2026-09-20

American diner × Shark Week

The Donut Station's visual language, taken from the shop itself: the red "WE'RE OPEN" sign, white paper cups with a red band, red patio umbrellas, and Finn — the shark who takes over the drink board every summer. Everything on this page is driven by tokens.json → css/tokens.css (primitive → semantic → component). styles.css contains no raw color values; npm test enforces it.

Color

Six named colors. Red does the talking, cream is the room, navy is the ink. Shark Blue is reserved for limited-time things so it stays special. Every text/background pairing used on the site meets WCAG AA (4.5:1).

Station Red

--primitive-color-red-600 · #C8102EPrimary actions, the sign band, prices. White on red = 5.4:1.

Glaze Cream

--primitive-color-cream-100 · #FFF7ECPage background. Never as text.

Sprinkle Navy

--primitive-color-navy-600 · #1B2A49Secondary buttons, the locations band, focus rings.

Coffee

--primitive-color-coffee-700 · #3B2314Body text. Coffee-500 (#6B4A32) for captions — 7.3:1 on cream.

Shark Blue

--primitive-color-shark-500 · #4A6FA5Finn, Shark Week, seasonal band (uses shark-700 #2F4D7A behind text).

Star Gold

--primitive-color-gold-500 · #F2B705Star icons and script accents on red/navy only. Fails contrast on white — never as text on light.

Semantic aliases

--color-primary → red-600      --color-background → cream-100   --color-foreground → coffee-700
--color-secondary → navy-600   --color-band → red-600 (hero)    --color-night → navy-600 (locations)
--color-accent → shark-500     --color-rating → gold-500        --color-open → #1F6B44 (status, 7.2:1)

Typography

Three faces, three jobs. Bebas Neue is the sign painter — condensed caps for headlines, prices and buttons. Kaushan Script is the hand-lettered "Taste It! For Yourself" and is used for one line per section at most. Public Sans (the US Web Design System face) carries everything you read.

hero · BebasBest donuts

h2 · Bebas 4xl–6xlMade here. This morning.

h3 · Bebas 2xl–3xlEgg sandwich with meat

script · KaushanTaste it! For yourself

lede · Public Sans xlDonuts made fresh every morning from 5 AM.

body · Public Sans lgEvery donut, muffin and pastry is made in our own kitchen each morning — not trucked in.

eyebrow · 700, 0.14emWhy people drive past the chains

price · Bebas 2xl$21.99

Scale

xs .75  sm .875  base 1  lg 1.125  xl 1.25  2xl 1.5  3xl 2  4xl 2.75  5xl 3.75  6xl 5.25  hero clamp(3rem, 7.4vw, 6.75rem)
line-height: tight .92 (display)  snug 1.15  normal 1.55 (body)   tabular figures on by default

Spacing, radius, shadow

A 4px base scale. Sections breathe with --spacing-section (clamp 3.5–6.5rem); gutters with --spacing-gutter (clamp 1–2rem). Corners are soft but not bubbly: 4 / 10 / 18px. Shadows are warm (coffee-tinted), never gray.

The stripe

The single decorative motif — the red-and-white awning stripe from the patio umbrellas. Used exactly twice: under the hero and above the footer. Do not add more.

Components

These are the live site classes, not mockups. Every interactive element is at least 44px tall, has a visible focus ring (navy on light, white on red/navy), and works with a keyboard.

Buttons

Primary Secondary Small

On the red band, primary becomes .btn--light and secondary becomes .btn--ghost:

Order online Call Torrington

Button states
State	Primary	Secondary
Default	red-600, shadow md	navy-600, shadow md
Hover	red-500, lifts 1px	navy-500, lifts 1px
Active	red-700, no shadow	navy-700, no shadow
Focus	3px ring, 3px offset (navy on light, white on dark)

Pills & status

Office favorite #1 most liked Shark Week Open now · until 7 PM Closed · opens 5 AM tomorrow

Open/closed is computed client-side from the hours table in America/New_York. The dot is never the only signal — the text always says the state.

Menu card

Maple-frosted donut topped with crumbled crispy bacon

Maple bacon

$3.65

Maple frosting, crispy bacon crumbled on top.

Specialty

Location card (on the night band)

Torrington

Open now

429 Winsted Rd, Torrington, CT 06790
(860) 482-9554

Order online Directions

Station sign (CSS fallback lockup)

When the raster logo can't be used (favicons, plain-text contexts, print), this CSS lockup stands in.

TheDonut Station

Finn the shark

Finn is the shop's Shark Week tradition made into a character: a friendly great white in a red-and-white soda-jerk hat, drawn like a 1950s roadside mascot — flat color, thick outlines, no gradients. He appears in exactly three places: the hero, the seasonal band, and small badges. He never replaces the logo.

Finn, full body, winking, holding a sprinkle donut and a coffee — Hero — full body

Finn's head, biting a chocolate donut — Badge — circular crop

A shark fin poking out of an iced coffee — Fin-in-cup — drink menus

Rules of the road

What keeps this looking like The Donut Station and not like a template.

DoLead with the sign: big red band, white condensed caps, one script line.

DoShow real prices in Bebas red. The menu is the product.

DoKeep Order · Call · Directions within one thumb-reach on mobile.

DoUse the shop's own photos. Alt text describes what's actually in them.

Don'tUse Shark Blue for anything that isn't seasonal or Finn.

Don'tPut gold text on cream or white — it fails contrast.

Don'tAdd gradients, glassmorphism, or a second decorative motif.

Don'tWrite hex codes in styles.css. Add a token.

How to change something

1. Edit tokens.json  (color / type / spacing / component values)
2. npm run build     → regenerates css/tokens.css and the FAQ schema, copies dist/
3. npm test          → SEO, a11y, NAP, token discipline checks must pass
4. npm run deploy    → Cloudflare Pages