Style guide v1

OTSP design system

The reusable tokens, classes and combo classes that power the On The Same Page rebuild. Everything below lives in the Webflow design system and can be reapplied across templates.

Colour tokens

Palette

bg#FCFAF7
ink#1A1A1A
ink-2#4A4A4A
ink-3#8A8A8A
paper#F5F0E8
rulergba(26,26,26,0.12)
strategy#A62759
strategy-dark#6F1A3B
leadership#81BEEB
leadership-dark#4A7FA3
teamwork#79CFC9
teamwork-dark#4A8F8B
culture#EDAF61
culture-dark#B07C3D
brand#C792ED
brand-dark#8B5FAE
Type ramp

Hierarchy

Display 1 / .ch-display-1

On the same page

Display 2 / .ch-display-2

The five pillars of alignment

Display 3 / .ch-display-3

Why most strategies aren't strategies

Body / .ch-body, Oxygen 17px

Strategy is not a slide deck. It is a small set of choices about where the organisation wants to go and how it will get there, written plainly so that everyone in the room can act on the same plan tomorrow morning.

Reading body / .ch-reading-body, EB Garamond 19px (article prose only)

A few months in, the team noticed that the work was changing. The same questions kept coming back, but the answers were less obvious. The frameworks they had relied on were no longer carrying the weight, and the room had to think harder to find the right next move.

Eyebrow / .ch-eyebrowA note on rhythm
Pillar accents

Five voices

Strategy

Strategy is a few honest choices

Leadership

Leaders model the culture

Teamwork

Teams decide together

Culture

Culture lives in behaviour

Brand

Brand earns trust

Background

Dot overlay

A fixed full-viewport div with class .ch-dot-overlay sits above the page background. Radial-gradient 1px dots at 3px spacing, mix-blend-mode multiply, pointer-events none. It is on this page now.

RICH TEXT BLOCK 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Coverage notes

Variables in Webflow: 16 colours, 3 font families, 8 sizes. Variable collection: OTSP Design Tokens. Style classes registered: ch-display-1, ch-display-2, ch-display-3, ch-body, ch-reading-body, ch-eyebrow, ch-caveat-accent, ch-page-wrapper, ch-dot-overlay, plus the five pillar classes ch-page-strategy / leadership / teamwork / culture / brand.