← All styles
Live preview Open site ↗
A page rendered in Sticker Diner

Sticker Diner

a hand-painted burger van at a summer fair

Cream page, enormous fat display type outlined in white, and rotated sticker badges. Sections meet on a wave rather than a straight edge, and every photo is a cut-out that overlaps the headline.

lightloudplayfulfoodretropostermarketing v1.0.0 CC-BY-4.0

Install

npx styles-md add sticker-diner

Palette

bg #f5e3cd
surface #ffffff
fg #1b1b1b
muted #6b4f3a
accent #e51000
accent-fg #ffffff
border #1b1b1b

Type

Body Mouse Memoirs

Aa Bb Cc 0123 The quick brown fox

"Mouse Memoirs", "Oswald", Impact, sans-serif
Headings Modak

Aa Bb Cc 0123 The quick brown fox

"Modak", "Bowlby One", "Arial Black", Impact, sans-serif
Code IBM Plex Mono

const total = 1 + lI0O;

"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace

16px base · 1.35 ratio · body 400 / heading 400 · heading tracking 0em. Fonts are not bundled. Install the first family in each stack, or the specimens below fall back to the next one your device has.

4xl · 71.74px

The quick brown fox jumps

3xl · 53.14px

The quick brown fox jumps

2xl · 39.37px

The quick brown fox jumps

xl · 29.16px

The quick brown fox jumps

lg · 21.6px

The quick brown fox jumps

base · 16px

The quick brown fox jumps

sm · 11.85px

The quick brown fox jumps

xs · 8.78px

The quick brown fox jumps

Licensing

No font files are redistributed here. Every family this style asks for by name is free for commercial use, and CI rejects a style that names one which is not.

Fallbacks: Impact, sans-serif, ui-monospace, SFMono-Regular, Menlo, monospace, Arial Black. These are CSS generics and fonts the reader's OS already ships, referenced by name only, so nothing is licensed or downloaded.

The spec itself, and everything generated from it, is CC-BY-4.0. Attribution is the comment at the top of each generated file; keep it and you have complied.

Shape, space & motion

stroke
2px
radius
14px · 28px · 72px
spacing unit
4px
gutter
24px
section gap
96px
max width
1408px
motion
300ms cubic-bezier(0.4, 0, 0.2, 1)
Download

Sticker Diner

A poster, not a page. One enormous headline in a fat rounded face, outlined in white so it can sit on top of a photograph, with stickers tilted into the gaps. Nothing is quiet and nothing is aligned to a grid you can see.

Principles

  • The headline is the layout. It runs to the full width of the page and everything else fits around it.
  • Every display line is outlined in white. The stroke scales with the type, roughly 1/15th of the size.
  • Photos are cut out, never in a box. They overlap the headline and bleed past their section.
  • Badges are stickers: tilted 6 to 12 degrees, radius-sm, white outline, never square to the page.
  • Sections meet on a wave. A straight horizontal edge between two colours does not appear.
  • Three colours do all the work: cream, red and amber. White is the outline, ink is the text.

Typography

Two single-weight faces with no overlap in their jobs. The display face is used at sizes that look like a mistake in a spec and are correct here: 96px is small for it and 216px is normal. Body is the condensed sans, and because it is condensed it can run at 26px without eating the line. There is no bold anywhere, since neither family has a second weight, so emphasis is size and colour.

Colour

Cream is the page and it is never white. surface white is for cut-out cards and the sticker outline only. accent red is the loud one: fills for buttons, and set as display type against cream. Amber #f4a804 and its brighter sibling #ffd750 are the third colour, for stickers and small fills. The measured red on the source of this palette is #f91814, which is bright enough that white on it fails AA at 4.07:1, so accent is a shade deeper and clears it at 4.76:1.

Components

  • Button (primary): accent fill, white label at text-lg, radius-full or a 50%/60% ellipse, 16px/40px padding.
  • Button (secondary): no fill, 2px border at 20% opacity, radius-full, same metrics.
  • Sticker: amber fill, ink label, radius-sm, 5px white outline, rotated 6 to 12 degrees.
  • Display line: display face, accent or fg, white stroke scaled to the size, line height 0.75 to 0.9.
  • Photo card: radius-lg, shadow-md, rotated 2 to 5 degrees, overlapping its neighbour.
  • Cut-out image: no frame, drop-shadow(0 9px 7px rgba(0,0,0,0.1)), sitting over the headline.
  • Wave divider: an SVG path, not a border, at least 80px deep so it reads as a shape.
  • Nav: cream, no bar. Wordmark left in the display face, pill buttons right.
  • Focus ring: 3px accent outline at 3px offset.

Do / Don’t

  • Do let the headline overflow. If it fits comfortably it is too small.
  • Do outline every display line in white, including on a cream background.
  • Do tilt the stickers and the photo cards. Nothing decorative sits square.
  • Do overlap: photo over headline, sticker over photo, headline over the wave.
  • Do keep display line height under 0.9. At this weight the letters fill the line themselves.
  • Don’t set body copy in the display face. It is unreadable past a few words.
  • Don’t put a cut-out photo in a rectangle. Cropping it into a box removes the whole effect.
  • Don’t divide two colour fields with a straight edge. The wave is the divider.
  • Don’t add a fourth hue. Cream, red and amber, and white and ink for outline and text.
  • Don’t centre everything. The composition is deliberately off-balance.

When to use

Food, drink, festivals, merch drops, anything sold on appetite. A poor fit for dashboards, forms and long-form reading, where a 216px headline and a white text outline are noise rather than appetite.