01 — Colors

## Color Palette

Core brand and surface tokens.

Primary
#1b1938
Brand primary surface and CTA color.
Ink
#292827
Default body text color.
On Primary
#ffffff
Text on primary surfaces.
Canvas
#ffffff
Default content surface.
Canvas Alt
#fafaf8
Secondary surface / band fill.
Hairline
#e8e4dd
1px divider on cards and tables.
Muted
#73706d
Secondary text and helper copy.
Accent 2
#0e3030
Inline link / second chromatic accent.

### Brand & Accent (extended)

Surface Violet Soft
#c9b4fa
Hero pill button fill.
Surface Teal Deep
#0e3030
Closing CTA band color.
Surface Teal Mid
#155555
Lifted teal for nested chrome.

02 — Typography

## Typography Scale

Display tier handles hero and section openers; body tier carries UI copy and captions.

display-xxl64px / 540 / 1.12 / -1.32px
Display headline
display-lg50 / 700 / 1.12 / -0.6px
Section opener
display-md32 / 700 / 1.25 / -0.256px
Card title
heading-lg24 / 700 / 1.33
Pricing tier name
body-lg18 / 400 / 1.55
Marketing body lead — relaxed leading for comfortable reading at scale.
body-md16 / 400 / 1.55
Default UI body, table cells, form labels.
caption14 / 400 / 1.43
Helper copy, footnotes.
button-md16 / 700 / 1.38 / 0.2px
CTA Label
micro-cap12 / 700 / 1.0 / 0.96px
Eyebrow Label

03 — Components

## Button Variants

Primary, secondary, and outline variants.

button-primary
button-secondary
button-outline
button-on-dark-pill · hero
button-on-teal

04 — Components

## Card Examples

Pricing tiers with one inverted featured tier, plus alt-canvas feature card.

### Starter

$0

For small teams.

- Core features
- Email support
- 3 seats

### Pro

$29

For growing teams.

- Everything in Starter
- Priority support
- 20 seats

### Business

$80

For scaled organizations.

- Everything in Pro
- SSO + audit log
- Unlimited seats

### Built-in security

SOC 2 Type II, GDPR, HIPAA-ready out of the box.

05 — Components

## Form Elements

Standard inputs with hairline borders; focus replaces hairline with primary color.

First name
Email address
Country
Tell us more

06 — Foundations

## Spacing Scale

8px base with denser sub-units for fine vertical rhythm.

xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 24px
xxl · 32px
huge · 64px

07 — Foundations

## Border Radius Scale

From inputs to pill buttons; the brand's radius vocabulary.

sm · 4px
md · 8px
lg · 12px
xl · 16px
button · 8px

08 — Foundations

## Elevation & Depth

Layered shadow stacks for surface lift; deeper shadows for floating panels.

L0 · Flat
L1 · Card
L2 · Mockup halo
L3 · Toast

09 — Responsive

## Responsive Behavior

Display sizes scale through the breakpoint stair; pricing tiers stair-step 4-up to 1-up.

Name | Width | Key Changes
--- | --- | ---
Wide | ≥ 1440px | Full hero band; pricing 4-up
Desktop | 1024–1440px | Default content max-width
Tablet | 768–1023px | Pricing 2-up; grid feature 1-up
Mobile | < 768px | Pricing 1-up; hamburger nav

375
768
1024
1440

### Touch Targets

Pill buttons hit ≥44×44px on mobile. Form fields stay at the 44px minimum. WCAG AAA compliant.

### Collapsing Strategy

- Display tiers stair-step across breakpoints.
- Pricing tiers stair 4-up → 2-up → 1-up; featured tier always distinguished.
- Top nav collapses to hamburger below 768px.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding