WCAG AAA Mode
Design Direction
High-contrast accessible version, WCAG AAA compliant, clear data hierarchy, no colour-only signalling
Colour Strategy
complementary harmony from hue 210 with neutral temperature
Typography Strategy
Urbanist headings paired with Red Hat Display body text
Colour Palette
primary
#598cc0
secondary
#b68c63
accent
#8c53c5
neutral
#888c91
success
#20c578
warning
#d48d11
error
#c52020
info
#205fc5
Typography
Design is intelligence made visible
Great typography is the foundation of great design. The pairing of heading and body typefaces creates a visual hierarchy that guides the reader through content with clarity and purpose, while expressing personality at every level.
Spacing
2px base unit · compact density
Border radius
none
0px
sm
2px
md
5px
lg
10px
xl
16px
full
9999px
Elevation
Shadows
none
none
none
Texture
mesh · opacity 1 · normal blend
Grid
dense · 16 columns · 12px gutter · 16px margin · 1440px max
Motion
Hover, click, and interact to see the motion tokens in action.
0ms
50ms
80ms
120ms
200ms
Easings
Hover states, colour changes, most transitions
linear
Elements appearing - modals, dropdowns, toasts
linear
Elements leaving - dismissals, close animations
linear
Playful feedback - toggles, badges, confirmations
linear
Physics-based - drag, gestures, elastic effects
linear
Iconography
Icon style derived from the system's personality, mood, and visual tokens.
Recommended library
Radix Icons
Minimal, precise icons for component-driven design systems
Browse Radix Icons ↗Also consider Heroicons — Sharp, precise icons built for utility-first interfaces
Stroke weight
1.5px
Matches border width (1px)
Corner rounding
2px
Use for icon containers
Icon set preview (technical) — 1.5px stroke
Size scale
xs
12px
sm
16px
md
20px
lg
24px
xl
32px
On colour
primary
secondary
accent
muted
error
success
ComponentsPro
Component showcase is a Pro feature
Upgrade to see fully themed buttons, inputs, cards, badges, and more - all wired to this system's tokens.
PatternsPro
Patterns are a Pro feature
Upgrade to see fully themed form layouts, empty states, loading skeletons, and error handling - all built with this system's tokens.
Export
:root {
/* ─── Colors: Primary ─── */
--color-primary-50: #f6f7f8;
--color-primary-100: #ebedf0;
--color-primary-200: #d5dee7;
--color-primary-300: #aec7e0;
--color-primary-400: #89add2;
--color-primary-500: #598cc0;
--color-primary-600: #3f73a6;
--color-primary-700: #345e89;
--color-primary-800: #364a5e;
--color-primary-900: #2e363d;
--color-primary-950: #1f2429;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f8f7f7;
--color-secondary-100: #efedeb;
--color-secondary-200: #e5ded7;
--color-secondary-300: #dbc7b3;
--color-secondary-400: #cbad90;
--color-secondary-500: #b68c63;
--color-secondary-600: #9c7349;
--color-secondary-700: #805e3c;
--color-secondary-800: #5a4a3a;
--color-secondary-900: #3b3630;
--color-secondary-950: #282420;
/* ─── Colors: Accent ─── */
--color-accent-50: #f7f6f8;
--color-accent-100: #edeaf0;
--color-accent-200: #ded4e8;
--color-accent-300: #c7abe3;
--color-accent-400: #ad85d6;
--color-accent-500: #8c53c5;
--color-accent-600: #733aac;
--color-accent-700: #5e308d;
--color-accent-800: #4a3460;
--color-accent-900: #362e3e;
--color-accent-950: #241e29;
/* ─── Colors: Neutral ─── */
--color-neutral-50: #f7f7f8;
--color-neutral-100: #ecedee;
--color-neutral-200: #dddedf;
--color-neutral-300: #c5c7c9;
--color-neutral-400: #aaadb1;
--color-neutral-500: #888c91;
--color-neutral-600: #6e7377;
--color-neutral-700: #5b5e62;
--color-neutral-800: #474a4d;
--color-neutral-900: #333638;
--color-neutral-950: #222425;
/* ─── Colors: Semantic ─── */
--color-success: #20c578;
--color-success-light: #eff6f2;
--color-warning: #d48d11;
--color-warning-light: #f7f3ee;
--color-error: #c52020;
--color-error-light: #f6efef;
--color-info: #205fc5;
--color-info-light: #eff1f6;
/* ─── Colors: Surface ─── */
--color-background: #fafafa;
--color-foreground: #17191c;
--color-card: #FFFFFF;
--color-card-foreground: #17191c;
--color-muted: #f2f2f3;
--color-muted-foreground: #61666b;
--color-border: #e4e5e7;
--color-input: #dfe0e2;
--color-ring: #478cd1;
/* ─── Typography ─── */
--font-heading: Urbanist, sans-serif;
--font-body: Red Hat Display, sans-serif;
--font-mono: JetBrains Mono, monospace;
/* ─── Spacing ─── */
--space-lg: 14px;
--space-md: 10px;
--space-sm: 5px;
--space-xl: 19px;
--space-xs: 2px;
--space-2xl: 29px;
--space-3xl: 38px;
--space-4xl: 58px;
/* ─── Border Radius ─── */
--radius-lg: 10px;
--radius-md: 5px;
--radius-sm: 2px;
--radius-xl: 16px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: none;
--shadow-mid: none;
--shadow-high: none;
/* ─── Motion ─── */
--duration-micro: 0ms;
--duration-fast: 50ms;
--duration-normal: 80ms;
--duration-slow: 120ms;
--duration-glacial: 200ms;
--easing-default: linear;
--easing-entrance: linear;
--easing-exit: linear;
--easing-bounce: linear;
--easing-spring: linear;
/* ─── Elevation ─── */
--elevation-sunken: #f0f0f0;
--elevation-base: #fafafa;
--elevation-raised: #FFFFFF;
--elevation-floating: #FFFFFF;
--elevation-overlay: #fcfcfc;
/* ─── Component Scale (compact) ─── */
--comp-padding-x: 0.75rem;
--comp-padding-y: 0.375rem;
--comp-gap: 0.5rem;
--comp-border-width: 1px;
--comp-font-size: 0.875rem;
--comp-input-height: 2rem;
--comp-button-height: 2rem;
--comp-icon-size: 1rem;
/* ─── Grid (dense) ─── */
--grid-columns: 16;
--grid-gutter: 12px;
--grid-margin: 16px;
--grid-max-width: 1440px;
}Brand Guidelines
Standalone HTML, print to PDF. Colours, typography, spacing, all in one page.
Presentation Deck
PPTX template with palette, typography, and blank slides in your brand.
Figma Tokens
JSON for Tokens Studio plugin. Import colours, type, spacing straight into Figma.
PDF Brand Guide
Full brand guidelines as a real PDF file. Colours and typography rendered exactly.
AI Skill
System prompt you can paste into Cursor or any AI tool to generate on-brand UI instantly.