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.

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.

NameWidthKey Changes
Wide≥ 1440pxFull hero band; pricing 4-up
Desktop1024–1440pxDefault content max-width
Tablet768–1023pxPricing 2-up; grid feature 1-up
Mobile< 768pxPricing 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