Design system

11TEN18 Brand Guidelines

The colors, gradients, typography and components that keep every page on-brand. Use the tokens below — never hard-coded values — when extending the site.

On this page:Colors Gradients Typography Buttons Cards & surfaces Patterns Accessibility

01 — Color

A light, welcoming palette.

Tokens are defined in src/styles.css using OKLCH. Always reference the semantic name, not the raw color.

Brand

Teal

--teal · bg-teal · text-teal

Primary brand cyan from the logo. Use sparingly as accent or for icons.

Teal Deep

--teal-deep

Darker teal used in gradients.

Purple

--purple · bg-purple · text-purple

Primary brand purple. Safe for body-size text on light surfaces (7.4:1).

Purple Soft

--purple-soft

Mid-tone purple used in accents and shadows.

Surfaces

Background

--background · bg-background

Warm off-white. Default page surface.

Cream

--cream · bg-cream

Slightly tinted alternate section background.

Card

--card · bg-card

Pure white card surface.

Secondary

--secondary · bg-secondary

Soft chip / pill background.

Ink & UI

Foreground

--foreground · text-foreground

Body text. 15.3:1 on background — AAA.

Navy (deep purple)

--navy · bg-navy · text-navy

Headlines and primary button surface. 11:1 on background.

Muted

--muted-foreground

Secondary text. 5.9:1 — meets AA.

Border

--border

Decorative dividers only.

02 — Gradients

Brand motion in two intensities.

Use the bold gradient for accents and hero moments; the soft gradient for backgrounds and large surfaces.

Brand gradient

--gradient-brand · bg-gradient-brand · text-gradient-brand

Teal → teal-deep → purple. Use on small surfaces (icons, rules, metric numbers, text-clip headers) — not as a page-wide background.

11TEN18

Brand gradient — soft

--gradient-brand-soft · bg-gradient-brand-soft

Pale teal → pale purple. Safe behind text. Use for callouts, image placeholders and feature tiles.

Page gradient

--gradient-page · bg-gradient-page (layer over bg-background)

Two soft radial glows used behind hero sections. Keeps the page feeling airy without darkening text.

03 — Typography

Editorial display, modern body.

Fraunces for display, Inter for body. Tight tracking on headings; generous line-height on copy.

Display H1 · Fraunces 500 · -0.02em

Marketing, money and technology — done right.

Display H2 · Fraunces 500

A clear path from intent to impact.

Display H3 · Fraunces 500

Trusted by leaders who care about craft.

Body large · Inter 400 · 1.7 lh

We help leaders untangle marketing, finance and technology so the next quarter — and the next decade — actually compound. Small senior teams, clear scopes, work you can point to.

Body · Inter 400

Default body copy. Use text-foreground/85 for hero paragraphs and text-muted-foreground for secondary metadata.

Eyebrow · 0.18em tracking

The .eyebrow utility — uppercase, semibold, purple. Used above every section title and hero.

04 — Buttons

Three intentional levels of emphasis.

Primary action: navy. Secondary: outline. Tertiary: link with the gradient underline.

Primary

Navy

High-emphasis CTA. One per section.

Secondary

Outline

Pairs with a primary CTA.

Inline link

Underline link

Use .link-underline for in-copy CTAs.

Read client story

All buttons share a 3px focus-visible ring on --ring with a 2px offset — verified ≥3:1 on background, cream and card surfaces.

05 — Cards & surfaces

Soft elevation, generous radii.

Use rounded-2xl, border-border and shadow-soft for content cards. Reserve shadow-elegant for hero moments.

Default card

rounded-2xl border border-border bg-card shadow-soft hover-lift

Highlight

Soft brand card

Use bg-gradient-brand-soft for callouts and quoted moments.

“Senior practitioners. Outcomes that compound.”

Testimonial card

shadow-elegant variant

Tokens at a glance

--radius

0.75rem (rounded-2xl ≈ 1rem)

--shadow-soft

0 10px 28px -16px purple/18

--shadow-elegant

0 22px 50px -28px purple/35

--transition-smooth

400ms cubic-bezier(0.22, 1, 0.36, 1)

used by hover-lift

06 — Patterns

Section anatomy.

Every page section follows the same rhythm: eyebrow → display headline → supporting paragraph → content grid.

Eyebrow tag

Display headline goes here.

Supporting paragraph in text-foreground/75, max-w-2xl, leading-relaxed. Keep it to 2–3 lines.

Background rhythm

1. bg-background — default
2. bg-cream with border-y border-border/60 — alternating
3. bg-gradient-brand-soft — feature moments

Never stack two cream sections back-to-back — alternate to keep contrast.

Spacing scale

py-24 md:py-32 — section
mt-12 / mt-14 / mt-16 — header → grid
gap-5 / gap-6 — card grids
p-7 / p-8 — card padding

07 — Accessibility

Verified WCAG 2.1 AA.

Contrast was computed in OKLCH for every text/background pair. Use these guarantees when picking tokens.

Pair	Ratio	Grade
Body text on background	15.25:1	AAA
Headlines (navy) on background	11.02:1	AAA
Purple on background	7.79:1	AAA
Gold-foreground on teal button	7.96:1	AAA
Navy-foreground on navy button	10.86:1	AAA
Muted text on background	5.86:1	AA
Focus ring vs all surfaces	≥4.84:1	PASS (≥3:1)
Input border vs background	3.52:1	PASS (≥3:1)

Do

Use text-purple for accent text — it clears AA.
Pair every interactive element with the focus-visible ring utilities.
Use text-muted-foreground for secondary copy.

Don't

Don't use text-teal for body text — it fails AA.
Don't introduce ad-hoc hex colors; add a token in styles.css.
Don't use text-foreground/60 or lower for important text.