Brand reference · v1.0
The system.
Every page on this site is built from the tokens and components below.
One source of truth — css/tokens.css
and js/tailwind-config.js — shared everywhere.
§ 01
Logo
Clear space
Keep clear space of at least the cap-height of the wordmark (≈ x) on all sides. Nothing intrudes.
Minimum size & color
The dark wordmark sets in #252829; the footer variant is all white (#FFFFFF). Never below 110 px wide. Don't recolor, stretch, or add effects.
The ampersand
The & is the only element set in Fraunces Italic, and the only place terracotta (#AF6441) appears in the mark.
§ 02
Color
Slate Deep
- Hex
- #2A2D2E
- Token
- var(--slate-deep)
- Tailwind
- bg-slate-deep
- Use
- Surfaces, ink, primary buttons
Bone
- Hex
- #F4F1EC
- Token
- var(--bone)
- Tailwind
- bg-bone
- Use
- Page background, inverse text
Granite
- Hex
- #8A8680
- Token
- var(--granite)
- Tailwind
- bg-granite
- Use
- Muted labels, eyebrows, meta
Terracotta
- Hex
- #B86F4A
- Token
- var(--terracotta)
- Tailwind
- bg-terracotta
- Use
- Accent, hovers, the ampersand
Moss
- Hex
- #6B7355
- Token
- var(--moss)
- Tailwind
- bg-moss
- Use
- Secondary accent, confirmations
Opacity steps (selected)
--ink-80
rgba(42,45,46,0.80)
--ink-75
rgba(42,45,46,0.75)
--hairline
rgba(42,45,46,0.12)
--bone-85
rgba(244,241,236,0.85)
--bone-70
rgba(244,241,236,0.70)
--bone-55
rgba(244,241,236,0.55)
§ 03
Typography
Fraunces
Serif · italic accents
the long run.
.font-serif · italic 300/400
Jost
Display · UI · uppercase
Built for the long run
.font-display · 300/400
Inter
Body copy
Technical apparel for the rituals of training. Designed in Boulder, made in audited mills, built to be worn for years and mended when they aren't.
body · 300/400 · 17px/1.6
Heading scale — clamp()
§ 04
Components
Eyebrow, divider & form
§ 0X — Section eyebrow
Spec list (<dl>)
- Weight
- 248 g
- Layers
- 3-layer
- Origin
- Portugal
Selectors (PDP)
Filter chips (PLP)
Product card
§ 05
Layout & grid
Container
max-w-[1440px], centered. Gutters step px-6 / md:px-10 / lg:px-14.
Grid
12-column with gap-6 / gap-8. Editorial asymmetry, generous whitespace.
Section rhythm
Vertical padding py-24 md:py-32. Hairline borders, not boxes.
Numbering
Sections labelled § 0X — Title in the granite eyebrow style.