Retro Diner Americana

---
name: retro-diner-americana
description: Apply the Retro Diner Americana visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Retro Diner Americana, mentions 50s diner, americana, soda fountain, or describes black-and-white checkerboard bands, chrome banding and metallic trim, neon script display type — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Retro Diner Americana Design System

The 1950s American diner as a design system: checkerboard bands, chrome trim with banded metallic gradients, neon script headlines in glowing pink-red, ketchup red and counter-top teal on cream, jukebox pill shapes, and menu boards with dotted price leaders. Warm, appetizing, and unapologetically nostalgic.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Retro Diner Americana.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (50s diner, americana, soda fountain, drive-in style, mid-century diner, route 66), or describes its traits: black-and-white checkerboard bands; chrome banding and metallic trim; neon script display type; ketchup red and counter teal on cream; jukebox pills and booth-corner radii; menu-board dotted price leaders.

## Design tokens

### Color palette

- Cream — malted-milk wall color: `#fbf3e4` (--color-bg)
- Menu cards and counter panels: `#ffffff` (--color-surface)
- Dark coffee-brown text: `#2b2118` (--color-text)
- Secondary copy and menu descriptions: `#756450` (--color-text-muted)
- Ketchup red — primary actions, neon glow base, vinyl booth red: `#c1272d` (--color-accent)
- Counter-top teal — secondary buttons, tiles, upholstery: `#3fb8af` (--color-accent-teal)
- Mustard yellow — badges, stars, price burst fills: `#e8a33d` (--color-accent-mustard)
- Chrome trim base for banded metallic gradients: `#c9ced3` (--color-chrome)
- Checkerboard black and heavy outlines: `#1d1d1b` (--color-checker)
- Neon glow color for script signage effects: `#ff5d8f` (--color-neon-pink)

### Typography

- Display / headings: Pacifico (fallback: Brush Script MT, cursive) (ideal: A connected 50s brush script (e.g. Streamline, Thirsty Script), premium — use Pacifico as the free substitute)
- Body: Jost (fallback: Futura, Century Gothic, sans-serif) (ideal: Futura (the era's advertising geometric), premium — use Jost as the free substitute)
- Type scale: 1.3 ratio, base 16px — computed steps: 16px / 21px / 27px / 35px / 46px / 59px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.25, letter-spacing 0
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 96 — Cheerfully generous: sections breathe like a roomy booth, but menu-style lists pack tight with leaders; decorative bands claim their own full-width rows.
- Border radius: md 12px, lg 24px, pill 999px — Everything soft: cards round like laminated menus, buttons are jukebox pills, and booth corners go 24px. No sharp rectangles.
- Border treatment: 2px solid #2b2118 — Confident dark outlines on cards and buttons, like enamel sign edges; chrome gradient rules for horizontal trim.

### Shadows

- sign: `0 4px 12px rgba(43, 33, 24, 0.18)` — Cards and menu boards lifting off the wall
- neon: `0 0 6px rgba(255, 93, 143, 0.9), 0 0 18px rgba(255, 93, 143, 0.55), 0 0 42px rgba(193, 39, 45, 0.4)` — Text-shadow recipe for neon script headlines and open signs
- chrome-inset: `inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(43, 33, 24, 0.25)` — Metallic trim bars and pill button rims

### Layout

- Max content width: 1160px
- Full-width checkerboard or chrome bands divide major sections
- Menu-board pattern for lists and pricing: item, dotted leader, price
- Badges and bursts (stars, scallops) anchor corners of feature cards
- Center the hero like a roadside sign; content below settles into two-column booths

### Effects

- Checkerboard bands: repeating-conic or two-tone square pattern in #1d1d1b/#ffffff
- Chrome banding: linear-gradient(180deg, #f4f6f8, #c9ced3 45%, #8f979e 55%, #e6e9ec) on trim and pill rims
- Neon script treatment: neon-pink script with the neon glow text-shadow over dark or dusk sections
- Starburst and boomerang scatter motifs at low density on cream backgrounds
- Scalloped award badges for prices and 'best of' callouts

### Motion

- Easing: cubic-bezier(0.34, 1.56, 0.64, 1); durations 140ms / 260ms / 500ms
- Playful spring: buttons and badges get a small overshoot on hover
- Neon signs may flicker once on entrance, then hold steady
- Menu items highlight like a jukebox selection — quick color sweep, no bounce
- Keep large sections static; the props animate, the room doesn't

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fbf3e4;
  --color-surface: #ffffff;
  --color-text: #2b2118;
  --color-text-muted: #756450;
  --color-accent: #c1272d;
  --color-accent-teal: #3fb8af;
  --color-accent-mustard: #e8a33d;
  --color-chrome: #c9ced3;
  --color-checker: #1d1d1b;
  --color-neon-pink: #ff5d8f;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sign: 0 4px 12px rgba(43, 33, 24, 0.18);
  --shadow-neon: 0 0 6px rgba(255, 93, 143, 0.9), 0 0 18px rgba(255, 93, 143, 0.55), 0 0 42px rgba(193, 39, 45, 0.4);
  --shadow-chrome-inset: inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(43, 33, 24, 0.25);
  --border-default: 2px solid #2b2118;
  --font-display: Pacifico, "Brush Script MT", cursive;
  --font-body: Jost, Futura, "Century Gothic", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --tracking-heading: 0;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Pacifico:wght@400&family=Jost:wght@400;500;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A cream bar trimmed below by the checkerboard strip: script wordmark at left (neon-glowed on dark variants), rounded Futura-style links, and a pill 'Order' button in ketchup red with a chrome rim.
- **Hero:** A roadside sign composition: huge Pacifico script headline (optionally neon-glowing over a dusk-dark panel), a mustard starburst badge ('NEW!'), supporting geometric-sans copy, and a chrome-rimmed red pill CTA centered beneath.
- **Card:** A laminated menu card: white surface, 2px coffee outline, 12px radius, item rows with dotted leaders to teal prices, and an optional scalloped badge overlapping the top corner.
- **Button (primary):** A jukebox pill: ketchup red fill, white bold geometric label, 2px dark outline plus the chrome-inset rim highlight; hover springs 2px up with a slightly deeper sign shadow.
- **Button (secondary):** The teal pill: accent-teal fill with dark coffee text and the same chrome rim — the cherry-cola alternative next to the ketchup bottle.
- **Form fields:** A counter-order slip: white field, 2px outline, 12px radius, geometric sans input text; label above in small caps with wide tracking; focus rims the field in teal like a lit jukebox slot.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The checkerboard strip: a two-row black-and-white checker band edged with a thin chrome gradient rule, running under the nav or between sections like the counter edge of a diner. Spend boldness here; keep everything else quiet.

## Do

- Use checkerboard and chrome as structured bands, not all-over wallpaper
- Save the script face for short headlines and the wordmark — Jost carries everything else
- Pair every red with cream or white breathing room so the palette stays appetizing
- Play the menu-board pattern straight for any list with values or prices

## Don't

- Don't set paragraphs or UI labels in the script face — it collapses at small sizes
- Don't let neon glow onto light backgrounds; glows need dusk-dark panels to read
- Don't drift into Googie space-age kitsch — this is the counter and booth, not the rocket sign
- Don't use more than one starburst or badge per card

## Accessibility notes

- Ketchup red on cream passes AA (5.3:1) and body text passes comfortably, but teal #3fb8af and mustard #e8a33d fail as text on cream — use them for fills, tiles, and prices at 18px+ bold with the dark text variant where needed.
- Neon glow text-shadows blur letterforms; keep glowed headlines large (32px+) and never glow body copy.
- Checkerboard bands are high-frequency patterns — keep them shallow (2-3 rows) and away from text blocks to avoid visual vibration.

## Reference sites

- Diner — history and design: https://en.wikipedia.org/wiki/Diner
- Googie architecture (adjacent roadside vernacular): https://en.wikipedia.org/wiki/Googie_architecture
- American Diner Museum: https://en.wikipedia.org/wiki/American_Diner_Museum

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip retro-diner-americana.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/retro-diner-americana.json

Settings → Capabilities → Skills → Upload skill → retro-diner-americana.zip