Base System
Style Guide
Every class and variable this template ships with. Clone this site, override the colour variables, and the whole system re-skins itself.
Typography scale
Display
Heading One
Heading Two
Heading Three
Heading Four
Lead paragraph. Slightly larger, softer colour, used for the sentence under a headline.
Body copy. This is the default reading size for the whole system, set in Archivo at normal width.
Small print. Captions, disclaimers, timestamps.
Buttons
Cards and grid
Card One
Three-up on desktop, two-up on tablet, stacked on phone.
Card Two
Uses the shared border, radius and spacing variables.
Card Three
Change one variable and every card updates.
Dark cards
Dark Card
For dark sections. Same spacing, inverted surface.
Dark Card
Ghost buttons inherit the current text colour here.
Width axis demo
HAUNTED SAN DIEGO
The three headline styles above are the same Archivo font file at different widths: 68 for display, 80 for headings, 88 for subheads, 100 for body. One download, four voices.