001 — Reference
Style guide.
The working reference for 369 — a living document that holds the type, palette, layout, and motion behind everything we make. Read it slowly.
002 — Photography
Full-bleed. Color enters the page only through photography — never through UI.
003 — Type
Inter Tight for display + heading. Inter for body + UI. No mono, no serif.
display-giant
The quiet weight of things that last.
display-statement
We design slowly, on purpose — the details are the work.
heading
A section that opens the page.
label
Section — 004
body
Body text sits at fifteen pixels with a leading of one point five. It reads easily at length and never fights for attention. Punctuation is soft — always an em dash, never a middle dot; always a plus sign, never an ampersand.
muted
Muted text is the same family at fourteen pixels, in a warm grey. Used for captions, meta, and small print — quiet, but not invisible.
004 — Palette
Pure black + white. Grey only where the eye needs a pause. No accent color.
Background
#f9f8f3
Text primary
#0a0a0a
Text muted
#6b6b6b
Image placeholder
#f9f8f3
Divider
#f9f8f3 — rare
005 — Links
Every CTA is an underlined text link. Hover fades to 55% opacity over 200ms. Filled buttons don't exist in this system.
006 — Grid
Twelve columns, asymmetric placement, generous empty space.
007 — Layout
Max width 1440px, centered. Horizontal padding 24px on mobile, 40px from md up. Section rhythm: py clamp(80px, 12vw, 200px). Whitespace does the work that borders and boxes would do elsewhere.