01 — Colors

Color Palette

Core brand and surface tokens.

Primary
#3ecf8e
Brand primary surface and CTA color.
Ink
#171717
Default body text color.
On Primary
#171717
Text on primary surfaces.
Canvas
#ffffff
Default content surface.
Canvas Alt
#fafafa
Secondary surface / band fill.
Hairline
#dfdfdf
1px divider on cards and tables.
Muted
#707070
Secondary text and helper copy.
Accent 2
#6b01c2
Inline link / second chromatic accent.

Brand & Accent (extended)

Emerald Deep
#24b47e
Pressed-state lift of primary.
Emerald Soft
#4ade80
Chart and product UI accent.
Canvas Night
#1c1c1c
Code blocks, dashboard mockups, featured tier.
Hairline Cool
#ededed
Subtle section dividers.

02 — Typography

Typography Scale

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

display-xxl64px / 500 / 1.12 / -1.92px
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-secondary-outline
button-on-dark

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 · 6px

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