Style guide

Every tag, class and state in the template, with the class name beside the live element. Type is Faustina and Instrument Sans, metadata is Geist Mono. Sizes, spacing and colour are Webflow Variables, so one change moves the whole template.

TypographyUI elementsClasses and spacing

Typography

HTML Headings TagsHTML tags define the default heading styles.
All H1 Headings

Structure first

All H2 Headings

Structure first

All H3 Headings

Structure first

All H4 Headings

Structure first

All H5 Headings
Structure first
All H6 Headings
Structure first
Heading ClassesHeading classes for when the typography style does not match the default HTML tag.
heading-style-h1
Structure first
heading-style-h2
Structure first
heading-style-h3
Structure first
heading-style-h4
Structure first
heading-style-h5
Structure first
heading-style-h6
Structure first
heading-style-display
Structure first
Other HTML TagsHTML tags define the default text styles.
All Paragraphs

We work with executive teams in regulated industries, where a decision has to survive an audit two years later. That changes what the work has to produce.

All Links

A paragraph with an inline link inside it.

All Block Quotes
The deliverable is the reasoning, not the slide. A decision that cannot be reconstructed two years later was never really made.
All Unordered Lists
  • First item in the list
  • Second item, long enough to wrap onto a second line so the hanging indent is visible
  • Third item
All Ordered Lists
  1. First numbered item
  2. Second numbered item
All Tables
Stage
Weeks
Output
Framing
2
Decision brief
Evidence
4 to 8
Reviewed record
All Figures
Fig. 01 — A caption is set in mono, in muted ink, directly under the frame.
Text SizesSize classes for when the typography size does not match the default HTML tag.
text-size-large
Structure first, 22px
text-size-medium
Structure first, 19px
text-size-regular
Structure first, 17px
text-size-small
Structure first, 13px
text-size-tiny
Structure first, 11px
Text WeightsFive steps, and the family decides what is real: Instrument Sans covers 400 to 700, so light points at 400, the lightest face it has.
text-weight-bold
Structure first
text-weight-semibold
Structure first
text-weight-medium
Structure first
text-weight-normal
Structure first
text-weight-light
Structure first
Text StylesStyle classes for when the typography style does not match the default HTML tag.
text-style-italic
Structure first
text-style-allcaps
Structure first
text-style-quote
The deliverable is the reasoning, not the slide.
text-style-mono
Fig. 01 — Advisory engagements, 2019 to 2026
text-style-tagline
01 — Positioning
text-style-link
A link style without a link tag
text-style-muted
Structure first
text-style-nowrap
Structure first
Text ColoursThe accent appears at most twice per section: one marker and one link state.
text-color-ink
Structure first
text-color-muted
Structure first
text-color-accent
Structure first
text-color-paper
Structure first
Text AlignmentAlignment classes for when the alignment does not match the default.
text-align-left
Structure first
text-align-center
Structure first
text-align-right
Structure first
DividersHairlines replace cards. The hair rule is decorative, the strong rule carries meaning and meets 3:1.
rule-hair
A decorative divider, Line Hair.
rule-strong
A structural divider, Line Strong.
Rich TextEvery tag inside a rich text block is styled through tag selectors, not through classes.
text-rich-text

A rich text block

We work with executive teams in regulated industries, where a decision has to survive an audit two years later. That changes what the work has to produce.

  • List inside rich text
  • Second item
A quote inside rich text.

UI elements

ButtonsOne button class, variants added with the is- prefix.
button
Book a call
button
is-secondary
Read the note
button
is-small
Book a call
button
is-secondary
is-small
Read the note
button
is-link
Read the engagement note
button
is-disabled
Unavailable
Button StatesStatic samples of the live states, so the states are documented without focusable decoys.
button, hover
Book a call
button, pressed
Book a call
button, focus
Book a call
Button Group
button-group
Book a callRead the note
TagsLinkable labels that categorise or highlight information on cards, posts and case studies.
tag
Governance
tag
is-accent
Case study
tag
is-plain
Insight
index-number
01
Other UI ElementsThe avatar that sits beside a name in the people rows.
avatar
Form ElementsLabels are required, fields carry autocomplete, focus is visible on the keyboard.
Form

Sent

Your message is with all four of us

All four of us have it now. The one who covers your sector writes back, and that person would carry the file. If the board meets soon, send a second line saying so and we will move it up.

Not sent

The message did not reach us

Something broke at our end, not at yours. Your text is still in the fields. Copy it, then write to the address in the footer.

Classes and spacing

Section GroundsEvery token has an inverted counterpart, so a section changes ground by remapping variables, never by overriding children. The surface ground also carries the paper grain as a multiplied background image on the same class, so no extra element is needed for it.
section-style-ink

Body text on ink with a link and muted text.

section-style-surface

Body text on surface with a link.

Structure ClassesSix classes carry the page: page-wrapper, main-wrapper, section, padding-global, container, padding-section.
page-wrapper
page-wrapper
main-wrapper
main-wrapper
container-small
container-small, 30rem
container-medium
container-medium, 48rem
container-large
container-large, 80rem
padding-global
content
padding-section-small
content
padding-section-medium
content
padding-section-large
content
max-width-small
max-width-small
max-width-medium
max-width-medium
max-width-large
max-width-large
grid_col-12
chapter_index
chapter_body
cover_main
cover_index

Declared once. Every twelve column layout in the template stacks on this class and adds only its own row gap and column spans. The two rows above are real spans from the vocabulary, not a drawing of one: they carry the same classes the pages carry, so they stack on a phone exactly as the pages do.

Spacing SizesOne size class sets all four sides. A direction class then zeroes the three sides you do not want.
padding-0
margin-0
padding 0rem
margin 0rem
padding-tiny
margin-tiny
padding 0.25rem
margin 0.25rem
padding-xxsmall
margin-xxsmall
padding 0.5rem
margin 0.5rem
padding-xsmall
margin-xsmall
padding 0.75rem
margin 0.75rem
padding-small
margin-small
padding 1rem
margin 1rem
padding-medium
margin-medium
padding 1.5rem
margin 1.5rem
padding-large
margin-large
padding 2rem
margin 2rem
padding-xlarge
margin-xlarge
padding 3rem
margin 3rem
padding-xxlarge
margin-xxlarge
padding 4rem
margin 4rem
padding-huge
margin-huge
padding 6rem
margin 6rem
padding-xhuge
margin-xhuge
padding 8rem
margin 8rem
padding-xxhuge
margin-xxhuge
padding 12rem
margin 12rem
padding-massive
margin-massive
padding 16rem
margin 16rem
Spacing DirectionsAlways stacked on a size class, never used alone.
margin-top margin-large
padding-top padding-large
margin
padding
margin-bottom margin-large
padding-bottom padding-large
margin
padding
margin-left margin-large
padding-left padding-large
margin
padding
margin-right margin-large
padding-right padding-large
margin
padding
margin-vertical margin-large
padding-vertical padding-large
margin
padding
margin-horizontal margin-large
padding-horizontal padding-large
margin
padding
Section RhythmThree narrative roles on top of the three section sizes, so the page has rhythm instead of a metronome.
padding-section-small
is-tight
continuation of the same thought
padding-section-large
ordinary section
padding-section-large
is-open
opening a chapter
padding-section-large
is-pause
air before the subject changes
Utility ClassesThe Client-First standard set, useful in most projects and documented so a buyer can find them.
hide
display none
hide-tablet
hidden at 991 and below
hide-mobile-landscape
hidden at 767 and below
hide-mobile-portrait
hidden at 479 and below
overflow-visible
overflow visible
overflow-hidden
overflow hidden
overflow-auto
overflow auto
overflow-scroll
overflow scroll
pointer-events-auto
pointer events auto
pointer-events-none
pointer events none
layer
absolute, pinned to all four sides of its parent
spacing-clean
margin and padding reset to zero
align-center
auto margins on the horizontal
z-index-1
relative, z-index 1
z-index-2
relative, z-index 2
display-inlineflex
inline flex
margin-top-auto
pushes an element to the bottom of a flex parent
inherit-color
takes the colour of its parent
aspect-ratio-square
1:1
aspect-ratio-portrait
2:3
aspect-ratio-landscape
4:3
aspect-ratio-widescreen
16:9