Design Direction
Yoga and recovery mode — warm sunrise palette, soft and inviting, rounded elements
Colour Strategy
analogous harmony from hue 25 with warm temperature
Typography Strategy
Comfortaa headings paired with Overpass body text
Colour Palette
primary
#d18147
secondary
#c3ba55
accent
#99d841
neutral
#918b88
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
7px base unit · generous density
Border radius
none
0px
sm
8px
md
18px
lg
30px
xl
48px
full
9999px
Elevation
Shadows
0 1px 2px rgba(209, 129, 71, 0.02)
0 2px 4px rgba(209, 129, 71, 0.03)
0 4px 8px rgba(209, 129, 71, 0.04)
Texture
dots · opacity 1 · normal blend
Grid
editorial · 8 columns · 32px gutter · 80px margin · 1200px max
Motion
Hover, click, and interact to see the motion tokens in action.
80ms
150ms
300ms
450ms
600ms
Easings
Hover states, colour changes, most transitions
cubic-bezier(0.4, 0, 0.2, 1)
Elements appearing - modals, dropdowns, toasts
cubic-bezier(0, 0, 0.2, 1)
Elements leaving - dismissals, close animations
cubic-bezier(0.4, 0, 1, 1)
Playful feedback - toggles, badges, confirmations
cubic-bezier(0.34, 1.4, 0.64, 1)
Physics-based - drag, gestures, elastic effects
cubic-bezier(0.25, 1.1, 0.5, 1)
Iconography
Icon style derived from the system's personality, mood, and visual tokens.
Recommended library
Phosphor
Rounded, friendly icons with multiple weight options
Browse Phosphor ↗Also consider Remix Icon — Expressive icons bridging outlined and filled styles
Stroke weight
1.75px
Matches border width (1.5px)
Corner rounding
8px
Use for icon containers
Icon set preview (organic) — 1.75px 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: #f9f7f6;
--color-primary-100: #f0edea;
--color-primary-200: #eadcd2;
--color-primary-300: #e9c1a5;
--color-primary-400: #dea57c;
--color-primary-500: #d18147;
--color-primary-600: #b8672e;
--color-primary-700: #975526;
--color-primary-800: #65462f;
--color-primary-900: #3f342c;
--color-primary-950: #2a231d;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f8f8f6;
--color-secondary-100: #f0efeb;
--color-secondary-200: #e7e6d4;
--color-secondary-300: #e2ddac;
--color-secondary-400: #d5ce86;
--color-secondary-500: #c3ba55;
--color-secondary-600: #aaa13c;
--color-secondary-700: #8c8431;
--color-secondary-800: #5f5c35;
--color-secondary-900: #3d3c2e;
--color-secondary-950: #29281f;
/* ─── Colors: Accent ─── */
--color-accent-50: #f8f9f6;
--color-accent-100: #eef1ea;
--color-accent-200: #e0ebd1;
--color-accent-300: #cdeca2;
--color-accent-400: #b6e378;
--color-accent-500: #99d841;
--color-accent-600: #7fbe27;
--color-accent-700: #699d20;
--color-accent-800: #4f672d;
--color-accent-900: #37402b;
--color-accent-950: #252b1d;
/* ─── Colors: Neutral ─── */
--color-neutral-50: #f8f7f7;
--color-neutral-100: #eeedec;
--color-neutral-200: #dfdedd;
--color-neutral-300: #c9c7c5;
--color-neutral-400: #b1adaa;
--color-neutral-500: #918b88;
--color-neutral-600: #77726e;
--color-neutral-700: #625e5b;
--color-neutral-800: #4d4947;
--color-neutral-900: #383533;
--color-neutral-950: #252322;
/* ─── 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: #1c1917;
--color-card: #FFFFFF;
--color-card-foreground: #1c1917;
--color-muted: #f3f2f2;
--color-muted-foreground: #6b6561;
--color-border: #e7e5e4;
--color-input: #e2e0df;
--color-ring: #d18147;
/* ─── Typography ─── */
--font-heading: Comfortaa, sans-serif;
--font-body: Overpass, sans-serif;
--font-mono: JetBrains Mono, monospace;
/* ─── Spacing ─── */
--space-lg: 43px;
--space-md: 29px;
--space-sm: 14px;
--space-xl: 58px;
--space-xs: 7px;
--space-2xl: 86px;
--space-3xl: 115px;
--space-4xl: 173px;
/* ─── Border Radius ─── */
--radius-lg: 30px;
--radius-md: 18px;
--radius-sm: 8px;
--radius-xl: 48px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: 0 1px 2px rgba(209, 129, 71, 0.02);
--shadow-mid: 0 2px 4px rgba(209, 129, 71, 0.03);
--shadow-high: 0 4px 8px rgba(209, 129, 71, 0.04);
/* ─── Motion ─── */
--duration-micro: 80ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 450ms;
--duration-glacial: 600ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-entrance: cubic-bezier(0, 0, 0.2, 1);
--easing-exit: cubic-bezier(0.4, 0, 1, 1);
--easing-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
--easing-spring: cubic-bezier(0.25, 1.1, 0.5, 1);
/* ─── Elevation ─── */
--elevation-sunken: #f0f0ef;
--elevation-base: #fafafa;
--elevation-raised: #FFFFFF;
--elevation-floating: #FFFFFF;
--elevation-overlay: #fdfcfc;
/* ─── Component Scale (generous) ─── */
--comp-padding-x: 1.5rem;
--comp-padding-y: 0.75rem;
--comp-gap: 1.25rem;
--comp-border-width: 1.5px;
--comp-font-size: 0.875rem;
--comp-input-height: 3rem;
--comp-button-height: 3rem;
--comp-icon-size: 1.25rem;
/* ─── Grid (editorial) ─── */
--grid-columns: 8;
--grid-gutter: 32px;
--grid-margin: 80px;
--grid-max-width: 1200px;
}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.