Design Direction
This system exists in a garage where the lights are left on but the engine has not turned over in years. Everything is documented rather than celebrated, catalogued with care. The flatness of the palette and the stipple texture reference old workshop manuals and classified ads on yellowed newsprint. No motion is wasted, no element shouts. The design treats obsolescence as something worth preserving, not mourning.
Colour Strategy
The primary is a de-saturated burnt iron orange, the colour of a fender that has been rained on for twenty years. Its complement is a faded workshop-sky teal, not vivid, closer to the blue you find on old enamel signage left too long in the sun. The two sit in maximum complementary tension, but both are pulled well back from full saturation so the result is dusty and tired rather than bold. The amber accent is the colour of old motor oil on a concrete floor: warm, familiar, going nowhere.
Typography Strategy
Libre Baskerville as the heading face carries mechanical weight without any softness. Its serifs are blunt and sturdy, the kind of letterform you would stamp into a metal plate. Alegreya as the body font is a literary serif with slightly irregular terminals that read like handwritten notes in a logbook. The 1.333 scale gives real hierarchy without theatrics. Spaced-out headings at 0.04em suggest engraved nameplates, garage signs, chassis numbers.
Colour Palette
primary
#b88161
secondary
#679fb1
accent
#c19a58
neutral
#918b88
success
#78c520
warning
#d49a11
error
#c54720
info
#2073c5
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.
Selection colour · highlighted text looks like this · try selecting any text on this page
Spacing
4px base unit · balanced density
Border radius
none
0px
sm
2px
md
5px
lg
10px
xl
16px
full
9999px
Elevation
Shadows
0 1px 2px rgba(184, 129, 97, 0.02)
0 2px 4px rgba(184, 129, 97, 0.03)
0 4px 8px rgba(184, 129, 97, 0.04)
Texture
stipple · 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
Material Symbols
Comprehensive icon system with variable weight and fill
Browse Material Symbols ↗Also consider Lucide — Clean geometric icons with consistent stroke weight
Stroke weight
1.5px
Matches border width (1px)
Corner rounding
2px
Use for icon containers
Icon set preview (default) — 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: #f8f7f6;
--color-primary-100: #efedeb;
--color-primary-200: #e5dcd6;
--color-primary-300: #dcc1b2;
--color-primary-400: #cca58e;
--color-primary-500: #b88161;
--color-primary-600: #9e6747;
--color-primary-700: #82553a;
--color-primary-800: #5b4539;
--color-primary-900: #3c342f;
--color-primary-950: #282320;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f7f8f8;
--color-secondary-100: #ebeeef;
--color-secondary-200: #d7e1e4;
--color-secondary-300: #b5d0d9;
--color-secondary-400: #93bbc8;
--color-secondary-500: #679fb1;
--color-secondary-600: #4e8598;
--color-secondary-700: #406e7d;
--color-secondary-800: #3c5158;
--color-secondary-900: #30383b;
--color-secondary-950: #202527;
/* ─── Colors: Accent ─── */
--color-accent-50: #f8f8f6;
--color-accent-100: #f0eeeb;
--color-accent-200: #e7e0d5;
--color-accent-300: #e0cead;
--color-accent-400: #d3b788;
--color-accent-500: #c19a58;
--color-accent-600: #a7813e;
--color-accent-700: #896a33;
--color-accent-800: #5e4f36;
--color-accent-900: #3d382e;
--color-accent-950: #29251f;
/* ─── Colors: Neutral ─── */
--color-neutral-50: #f8f7f7;
--color-neutral-100: #eeedec;
--color-neutral-200: #dfdddd;
--color-neutral-300: #c9c6c5;
--color-neutral-400: #b1adaa;
--color-neutral-500: #918b88;
--color-neutral-600: #77726e;
--color-neutral-700: #625d5b;
--color-neutral-800: #4d4947;
--color-neutral-900: #383533;
--color-neutral-950: #252322;
/* ─── Colors: Semantic ─── */
--color-success: #78c520;
--color-success-light: #f2f6ef;
--color-warning: #d49a11;
--color-warning-light: #f7f4ee;
--color-error: #c54720;
--color-error-light: #f6f0ef;
--color-info: #2073c5;
--color-info-light: #eff2f6;
/* ─── 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: #d17a47;
/* ─── Typography ─── */
--font-heading: Libre Baskerville, serif;
--font-body: Alegreya, serif;
--font-mono: JetBrains Mono, monospace;
/* ─── Spacing ─── */
--space-lg: 24px;
--space-md: 16px;
--space-sm: 8px;
--space-xl: 32px;
--space-xs: 4px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
/* ─── Border Radius ─── */
--radius-lg: 10px;
--radius-md: 5px;
--radius-sm: 2px;
--radius-xl: 16px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: 0 1px 2px rgba(184, 129, 97, 0.02);
--shadow-mid: 0 2px 4px rgba(184, 129, 97, 0.03);
--shadow-high: 0 4px 8px rgba(184, 129, 97, 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 (balanced) ─── */
--comp-padding-x: 16px;
--comp-padding-y: 10px;
--comp-gap: 10px;
--comp-border-width: 1px;
--comp-font-size: 14px;
--comp-input-height: 40px;
--comp-button-height: 40px;
--comp-icon-size: 16px;
/* ─── Grid (editorial) ─── */
--grid-columns: 8;
--grid-gutter: 32px;
--grid-margin: 80px;
--grid-max-width: 1200px;
/* ─── Selection ─── */
--selection-bg: #e5dcd6;
--selection-fg: #3c342f;
}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.