Internal reference

One source of truth for how Marquee looks.

Everything on this page is consultable by anyone with the link — colors copy on click, components show their intended usage. Replace the content with your own system and ship the file anywhere static hosting lives.

Colors

Click any frame to copy its hex value. Velvet is reserved for primary actions and active states; Brass only ever annotates — never acts.

↑ click a frame to copy the hex

Typography

Fraunces carries the voice, Hanken Grotesk does the reading, IBM Plex Mono labels the machinery. Never set body copy in Fraunces.

Display / Fraunces 50040px · 1.1 · -0.01em

Cinema, set in type.

Heading / Fraunces 60026px · 1.2

Now showing in every component

Body / Hanken Grotesk 40015px · 1.6 · max 52ch

Body text stays unobtrusive and generous in leading. Line length is capped so paragraphs read like a well-set programme note, not a spreadsheet.

Caption / Plex Mono 40011px · tracked +0.14em

Production stills · 1962

Spacing

A single 4px-based scale. If a gap isn't on the scale, it's a bug.

--s-1 · 4px

--s-2 · 8px

--s-3 · 16px

--s-4 · 24px

--s-5 · 40px

--s-6 · 64px

Buttons

One btn-primary per view, maximum. btn-secondary for the alternative path, btn-ghost for tertiary navigation. Disabled buttons keep their label — they explain themselves.

Forms

Labels above fields, help text below, errors that say what to do next.

Film title

Original-language title, as released.

Release year

Enter a four-digit year, e.g. 1968.

Cards & badges

In cinemas

The Long Intermission

Cards sit on Paper over Ivory — one level of elevation, drawn with a border, never a shadow.

Festival selectionRestored

Notes from the Booth

Badges are mono, lowercase-quiet, and color-coded by meaning — not by mood.

Reel Three Is Missing

Card titles are Fraunces 18px. Body inside cards drops to 13.5px and Ink-soft.

Tokens

The CSS custom properties behind everything above, ready to paste into a project.

Token	Value	Use
--ink	#1D1A17	Text, primary surfaces on dark
--velvet	#6E1423	Primary actions, active nav
--brass	#A07C2E	Eyebrows, awards, annotation only
--ivory	#F6F3EC	Page background
--paper	#FFFDF8	Cards, inputs
--line	#E3DDD1	Borders, dividers
--radius-pill	999px	Buttons, badges
--radius-card	12px	Cards