Say Studio

Style Guide & Design System

Fonts will render correctly once Feature Display Trial, ABC Social, ABC Synt, DM Mono & DM Sans are uploaded to Webflow.

01 — Color Palette

Colors

02 — Typography

Type Scale

Display H1 · Feature Display Trial Regular · 48px

You left the firm. Now you are the brand.

Display H2 · Feature Display Trial Regular · 36px

The gap nobody talks about

Display Quote · Feature Display Trial Regular · 28px

"Cristiana truly understood our mission."

Body Light · ABC Social Light · 18px

Strategy-led brand identity and web design for independent management consultants.

Body Medium · ABC Social Medium · 18px

Perception Gap Audit — Strategic Positioning

Body Bold · ABC Social Bold · 18px

How much of my time will this actually take?

Body Black · ABC Social Black · 18px — Inline bold emphasis

Strategy without design

Body SM · ABC Social Light · 16px — Cards / Captions

A unique website that stands out and is effective.

UI / Button · ABC Social Medium · 14px

Request a free Perception Gap Audit

Ticker · ABC Synt Regular · 42px

Brand Strategy • Brand Identity • Web Design

Eyebrow · DM Sans Medium · 14px uppercase

As Seen In

03 — Buttons & Controls

UI Components

Primary Button — White Pill · height 35px · border-radius 50px

Secondary Button — Ink Pill · height 35px · border-radius 50px

Divider / Progress Bar — 4px · border-radius 50px

04 — Spacing & Layout

Spacing Tokens

space-xs: 12px — Inner padding (buttons, checkbox gap)

space-sm: 22px — Service card label to description gap

space-md: 36px — Flex gap in content blocks, button stacks

space-lg: 48px — Text block vertical rhythm

space-xl: 80px — Section internal top / bottom padding

space-2xl: 120px — Column gaps in multi-column grids

space-3xl: 200px — Page side margin / left gutter

page-margin: 120px — Left and right page margin

radius-pill: 50px — All buttons and tags

radius-card: 8px — Cards, swatches, testimonial blocks