Style Guide
A reference for the typography, color, spacing, and components that power every page of the Noir Bean template. Reviewed on each publish to keep the system coherent.
Typography
Instrument Serif for display, Instrument Sans for body, JetBrains Mono for accents. Every heading binds to --font-display; body text inherits --font-body from the Body element.
Heading Styles
H1 Display Title
H2 Section Heading
H3 Subsection Heading
H4 Group Heading
H5 Card Heading
H6 Label Heading
Body Text
Large body text — 1.25rem. Used for lead paragraphs and emphasized introductions that deserve extra presence in the reading flow.
Medium body text — 1.125rem. Used for comfortable long-form reading when default regular size feels too small.
Regular body text — 1rem. The default paragraph size for most content. Line-height sits at 1.75 for editorial breathability.
Small body text — 0.875rem. Supporting notes, captions, and secondary information.
TINY ALLCAPS EYEBROW — 0.75REM WITH 0.14EM TRACKING
Weight
Light 300 — delicate reading flow
Normal 400 — the baseline body weight
Semibold 600 — subtle emphasis
Bold 700 — strong call-out
Style
“Quote style — Instrument Serif italic, the voice of testimonials and editorial pullquotes.”
Italic body — for foreign terms, emphasis within a line, species names.
Muted body — graphite tone, for meta info like timestamps and captions.
Color
Two-layer token system. Primitive tokens define the palette; semantic tokens describe purpose. Classes bind to semantic variables so theming stays decoupled from color names.
Semantic Backgrounds
Brand & Neutral Primitives
System
Spacing
Client-First rem scale. Combine direction utility with size utility: margin-top margin-medium = 2rem top margin, 0 elsewhere.