Template style guide
Counsel style guide
Everything on this site is built from the styles and components below. Change a style once and every page updates. This page is hidden from search engines; delete it before launch or keep it as your internal reference.
Text styles
Display · Instrument Serif 128 / 88 / 58
Clarity, from complexity.
Heading 1 · Instrument Serif 96 / 72 / 52
The quick brown fox jumps over the lazy dog
Heading 2 · Instrument Serif 60 / 48 / 38
The quick brown fox jumps over the lazy dog
Heading 3 · Geist Medium 22 / 21 / 20
The quick brown fox jumps over the lazy dog
Body · Geist 17
The quick brown fox jumps over the lazy dog
Small · Geist Medium 14
The quick brown fox jumps over the lazy dog
Lead · Geist 20 / 19 / 18
Introductory calls are 30 minutes and carry no fee.
Label · Geist Mono 11.5, uppercase
02 — Selected engagements
Color styles
Paper · page background
Surface · cards and inputs
Rule · borders and dividers
Mist · secondary text
Ink · text
Night · closing bands and footer
Signal · the single accent: buttons, links, highlights
Signal tint · quiet highlight
Buttons
Buttons are one component with Primary, Outline, Text and On dark variants, each with a 200 ms hover state. Set the Label, Link and variant on any instance from the right-hand panel.
Spacing and layout
Sections use 128px vertical padding on desktop, 104px on tablet and 88px on phone, with 40, 32 and 20px side padding. Content sits in a 1200px wrapper. Corners stay square (2px on buttons) to keep the editorial tone; hierarchy comes from type and rules, not cards.
Signature graphic: Clarity Diagram
Five inputs settle into one decision. Edit the labels (Input 1 to 5, Outcome, Caption) from the right-hand panel. Choose Wide or Compact for the size, and the Static version of either when you want no motion at all. Colours follow the Ink, Paper, Rule and Signal styles, so a palette change carries through.
Motion
Buttons and service rows respond in 200 to 220 ms. Section headings, rows and process steps ease in over 450 to 600 ms when they enter the viewport, with 60 to 150 ms staggers. Case study images settle from a 4% scale. The hero diagram resolves once over about 1.05 s and then stays still. Everything starts at least 60% visible, so content is readable if motion does not run, and the site follows the visitor’s reduced-motion setting.