Checker Diner
Cherry red, cream vinyl and a checkerboard floor: a roadside diner menu, open late.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A 1950s roadside diner rendered as a page: cream laminate, cherry-red booths, a black-and-white checker band, chrome trim and a seafoam accent like a milkshake machine. Chunky signage capitals, a menu laid out in bento boxes and prices in typewriter type.
Checker Diner is the 1950s American roadside diner as a design system: cream laminate counters, cherry-red vinyl, chrome edging, a black-and-white checkerboard floor and the seafoam of milkshake machines and jukeboxes. Signage-style capitals shout the specials; a friendly sans reads the menu; typewriter figures set the prices like an order pad. Cards are menu boxes with bold outlines and rounded corners. It should feel warm, generous and a bit noisy, like the counter at 8am.
Principles
- Cherry red is the neon sign: buttons and one headline word.
- The checkerboard is a band, not a background.
- Lay out content like a menu: boxes, prices, short descriptions.
- Prices and times always in typewriter type.
- Friendly, specific copy: prices, hours, what's on the griddle.
Motion
Menu cards slide up with a small bounce like plates arriving at the counter. The 'OPEN' sign beside the wordmark buzzes on and off once on load, and the specials marquee scrolls like a letterboard.
Do & don't
Do
- ✓ Use a checkerboard band at 24px squares between key sections.
- ✓ Set every price in Courier Prime with a $ sign.
- ✓ Use dotted leaders between dish and price.
Don't
- ✕ Don't use the checkerboard as a full-page background.
- ✕ Don't use dark mode.
- ✕ Don't use thin hairline borders.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 366 lines of DESIGN.md in total.
More like this
All Neo-Retro →
Y2K Chrome
No. 038Liquid chrome, bubble shapes and frosted-blue gadgets from the year 2000.
Atomic Modern
No. 058Teal, mustard and teak with starbursts and boomerangs: 1956 at its most optimistic.
Beige Desktop
No. 059Bevelled grey windows, navy title bars and a pixel font: the 90s desktop as a website.
Gilded Deco
No. 061Black lacquer, gold leaf and sunburst geometry from a 1920s grand hotel lobby.
Pixel Arcade
No. 0628-bit type, stepped pixel borders and coin-yellow buttons. Insert coin to continue.
Riso Overprint
No. 063Fluorescent pink and riso blue, overprinted slightly out of register on cream stock.