Template Info
Style Guide
Every token and primitive the theme is built from, rendered live from the same values the pages use.
Foundations
Colour
-
brown-950
Page background
-
brown-900
Raised surface
-
brown-850
Surface alt
-
brown-800
Surface alt
-
brown-700
Heading on cream
-
cream-400
Light section
-
primary-300
Brand / buttons
-
primary-600
Button hover fill
-
primary-700
Brand on cream
-
ink-white
Headings
-
ink-300
Body copy
-
ink-500
Muted / meta
-
line-800
Border
-
line-850
Border strong
Foundations
Typography
Headings use Fraunces at weight 300; body copy uses Inter at 400. Both are self-hosted variable fonts.
| Token | Size | Sample |
|---|---|---|
| text-h1 | clamp(64px, 8.5vw, 110px) | Heading One |
| text-h2 | 56px | Heading Two |
| text-h3-l | 36px | Heading Three Large |
| text-h3 | 32px | Heading Three |
| text-h4 | 24px | Heading Four |
| text-body-l | 20px | Body large |
| text-body | 18px | Body default |
| text-body-m | 16px | Body medium |
| text-body-s | 14px | Body small |
| text-body-xs | 12px | Body extra small |
Foundations
Spacing
The scale is Tailwind’s default 4px grid — no named spacing tokens are defined, on
purpose. See the note in src/styles/global.css.
- 1 4px
- 2 8px
- 3 12px
- 4 16px
- 6 24px
- 8 32px
- 10 40px
- 12 48px
- 14 56px
- 16 64px
- 18 72px
- 20 80px
- 25 100px — section rhythm
- 40 160px
Foundations
Radius
-
rounded-1
4px
-
rounded-2
8px
-
rounded-3
12px
-
rounded-4
16px
-
rounded-5
24px
-
rounded-6
1000px
Primitives
Components
Buttons
Eyebrow
Left aligned
Centered
Rich text
Heading level two
Body copy sits at 18px with a 1.6 line height. Bold text lifts to the heading colour, and links take the brand tone.
A blockquote uses the title face at heading-four size.
- Unordered list item
- Another list item