Design System

clar*
brand reference.

The asterisk means there is always more beneath the surface. Every design decision here reflects that — restraint in structure, color that earns its place, and type that carries personality without noise.

Color

Palette

Near-white

#FAFAF8

Soft ivory

#F4EFE8

Blush

#F2C4B8

Rose

#E8857A — primary accent

Hot pink

#D94068 — sparingly

Iridescent lavender

#C8C4E8

Sky teal

#5BC4C9 — selective

Luxury chocolate

#1A0F0A — depth

Warm gray

#8C7B6E — body text

Ombré Signature

Left to right. Blush → rose → hot pink → lavender → teal. Used selectively — never wallpaper. Appears as a 3px footer line on every slide and document.

Ombré gradient

#F2C4B8 → #E8857A → #D94068 → #C8C4E8 → #5BC4C9

Dark mode

Dark backgrounds always use #FAFAF8 for primary text and rgba(250,250,248,0.55) for secondary. Never dark text on dark backgrounds.

Section label

There is always more
beneath the surface.

clar* builds the systems, strategy, and story that turn good businesses into growing ones.

Typography

The strategy
starts here.

Display — Cormorant Garamond, Italic, weight 300. Headlines, pull quotes, wordmark.

Most good businesses aren't held back by effort. They're held back by what nobody's named yet. clar* finds it. Then builds around it.

Body — DM Sans, weight 300. Descriptions, body copy, all prose.

Key findings · Client overview · Next steps

Utility — DM Sans, weight 500, uppercase, wide tracking. Labels, eyebrows, navigation, tags.

Type scale

Display 40–56px · Cormorant Italic 300

Heading 24–28px · Cormorant Italic 300

Body regular 16px · DM Sans 300

Small body 13–14px · DM Sans 300

Label / eyebrow 10–11px · DM Sans 500 Uppercase

Components

Insight cards

Insight one.

A clear signal worth naming. The kind that changes how you act, not just how you report.

Insight two.

Context that connects the dots. The thing your data already knows but hasn't been told.

Stat cards

74%

of clients who see clarity renew at higher spend.

2.3×

average revenue lift in year one.

Step rows

Name the thing.

Every engagement starts by surfacing what's actually in the way. Not symptoms. The source.

Build around it.

Systems, story, and strategy designed specifically for what you need — not repurposed frameworks.

Measure what moves.

Outcomes over activity. We define success before we start, and we report on it honestly.

Buttons

Eyebrow / labels

Key finding In progress Strategic

Spacing

Consistent rhythm. Everything earns its space because everything around it is quiet.

4px — xs

8px — sm

16px — md

24px — lg

40px — xl

64px — 2xl

Border radius

4px — sm

8px — cards

12px — default

pill — buttons

Voice

Only speak in what is. Never reference what clar* is not. No comparisons, no "unlike other" framing. Declaration only.

Use this

"clar* finds what's holding a good business back. Then builds around it."

Not this

"Unlike traditional consultants, clar* doesn't just tell you what's wrong…"

The asterisk means there is always more beneath the surface.

Brand founding line — use verbatim or not at all.

clar*brand reference.