Design System

Style Guide

Living reference for the WE3 token-backed design system. Every swatch, scale, and specimen below is rendered from tokens.json via Style Dictionary.

tokens.json

DTCG v2.0.0 140 tokens 21.0 KB

WE3 Design System Tokens — the single source of truth that powers every colour, type scale, spacing unit, and component token on this site. Three-tier architecture: reference → system → component.

Reference / Palette

Neutrals

Linen
--ref-neutral-linen Lightest / page bg
Bone
--ref-neutral-bone Cards, panels
Vanilla
--ref-neutral-vanilla Base neutral
Studio Clay
--ref-neutral-studio-clay Mid / transitional
Cork
--ref-neutral-cork Borders, dividers
Ink
--ref-neutral-ink Darkest / text

Primitives

Surf
#5BA79C --ref-primitive-surf
Harvest
#FEBE27 --ref-primitive-harvest
Sunset
#FF6B33 --ref-primitive-sunset
Rocket
#EF2337 --ref-primitive-rocket
Punch
#D02365 --ref-primitive-punch
Velvet
#720A63 --ref-primitive-velvet
System / Color
Primary --sys-color-primary Structural / ink
Secondary --sys-color-secondary Cork accents
On Surface --sys-color-on-surface Body text
On Surface Muted --sys-color-on-surface-muted Secondary text
On Action --sys-color-on-action Text on buttons
Action Primary --sys-color-action-primary Primary CTA
Action Secondary --sys-color-action-secondary Secondary CTA
Action Tertiary --sys-color-action-tertiary Tertiary CTA
Action Hover --sys-color-action-hover Hover accent
Accent Subtle --sys-color-accent-subtle Data, icons
Accent Brand --sys-color-accent-brand Decorative
Highlight --sys-color-highlight Focus, cursor
Error --sys-color-error Error states
Success --sys-color-success Success states
System / Surfaces
Page --sys-surface-page Page background
Card --sys-surface-card Cards, panels
Alt --sys-surface-alt Alt sections
Hover --sys-surface-hover Hover states
Border --sys-surface-border Borders, dividers
Typography
League Gothic --ref-font-display Headlines, numbers, data
Inter — The quick brown fox --ref-font-body Body, UI, labels
IBM Plex Mono — 0123456789 --ref-font-mono Code, eyebrows, badges

Type Scale

Ag
xxl 110px Display
Ag
xl 72px H1 / Hero
Ag
lg 48px H2
Ag
md 24px H4 / Subhead
Ag
base 18px Body
Ag
sm 15px Button / Nav
Ag
xs 12px Label / Badge

Weights

Regular 400
Medium 500
Semibold 600
Bold 700
Spacing
xs
9px
sm
15px
md
24px
lg
30px
xl
48px
xxl
66px
Border Radius
sm 15px
md 30px
lg 60px
full 999px
Motion
Fast
150ms ease
Base
220ms ease
Slow
350ms ease

Hover the tracks to see each timing.

Components

Buttons

Card & Panel

Card

Uses --comp-card-* tokens. Hover for border highlight.

Panel

Uses --comp-panel-* tokens. Larger radius and padding.

Badges

Default Accent Highlight

Form Input

Stripe