Reference
Style Guide
One system across every page. The psychedelic wordmark carries all the personality; everything else is set in a clean grotesk (Helvetica Neue, with Inter as the web stand-in) so the archive imagery and the music do the talking.
01 — Typography
Three roles, one voice
Display · Bagel Fat One
visual thing store
Wordmark only. Never set body or headings in this face.
Headings · Inter Tight, 700 · tracking −0.02em
H1 — Rock 'n Roll Graphics
H2 — The Doors at the Fillmore
H3 — Program book, 1970
H4 — Section label
Body · Inter, 400 / 500 / 700
Bold for emphasis. Body copy is set in Inter Regular at 16px with a 1.6 line height. Use 500 for UI labels, 700 for emphasis inline. Italics are reserved for rare editorial flourishes — think a caption beneath a photograph, not a paragraph.
Caption · 12px · muted
Eyebrow · 10px · uppercase · tracking 0.3em · rust
02 — Color
Warm paper, 60s/70s accents
--paperBackground
--inkBody text, primary
--rustAccents, eyebrows, hover
--mustardSecondary — use sparingly
--oliveTertiary, dividers
--borderHairlines @ 60% opacity
The psychedelic gradient is reserved for the wordmark. Do not apply it to body type or UI chrome.
03 — Components
Buttons, cards, hairlines
Card
Title goes here
Soft 1-step elevation. 2-step on hover. 1px border at 60% opacity.
Card · hover
Lifted state
700ms ease-out. Image children scale 1.04.
04 — Motion
Restraint, with one loud gesture
- Wordmark — hue shift + wobble, always on.
- Cards — 700ms ease-out lift, image scale 1.04 on hover.
- Intro — kaleidoscope, tap to skip, once per session.
- Everything else — no motion. Don't compete with the wordmark.
05 — Don'ts
What not to do
- · Don't introduce a serif. The system is grotesk-only.
- · Don't apply the psychedelic gradient to anything other than the wordmark.
- · Don't set headings in Bagel Fat One.
- · Don't stack more than two accent colors in one composition.
- · Don't animate body text or UI chrome.