Design Direction
This is a system that takes abundance seriously. It is not a restaurant menu template or a food-blog aesthetic. It is built around the visual language of sacred communal eating: coarse linen, red wine soaked into tablecloths, fish pulled from salt water, bread broken by hand. The grain texture on surfaces references aged parchment and worn stone. Editorial grid with wide gutters gives the layout the quality of a hand-set page. Motion is smooth and unhurried, because nothing about this world is in a rush.
Colour Strategy
The primary is a deep terracotta-orange, the colour of fired clay amphorae and sun-baked stone. Its split-complements are a bruised dark rose (the inside of a red wine stain on linen) and a faded Aegean blue (the distant sea at midday). These three sit in maximum tension: warmth against cool, earthy against oceanic. Saturation is kept mid-range throughout so nothing tips into kitsch. The wine stain rose carries the drama; the terracotta anchors the system in the physical and the ancient.
Typography Strategy
Cormorant Garamond at 600 weight carries centuries of manuscript authority. Its compressed letterforms and high contrast make even short headings feel like illuminated text. Crimson Pro as the body is a deliberate full-serif choice: this is a system built for reading, for long passages, for the kind of storytelling where you linger on sentences. The 1.414 scale ratio gives the headings real presence over the body without the two competing. Generous line height at 1.75 lets every line of body text breathe like a verse.
Colour Palette
primary
#d37946
secondary
#cc4d7b
accent
#38b7e1
neutral
#918b88
success
#20c55d
warning
#d49d11
error
#c52026
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
7px base unit · balanced density
Border radius
none
0px
sm
4px
md
10px
lg
18px
xl
28px
full
9999px
Elevation
Shadows
0 1px 3px rgba(211, 121, 70, 0.16), 0 1px 2px rgba(211, 121, 70, 0.12)
0 4px 6px -1px rgba(211, 121, 70, 0.2), 0 2px 4px -2px rgba(211, 121, 70, 0.16)
0 20px 25px -5px rgba(211, 121, 70, 0.24), 0 8px 10px -6px rgba(211, 121, 70, 0.16)
Texture
grain · opacity 0.045 · multiply 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
4px
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: #f9f7f6;
--color-primary-100: #f0ecea;
--color-primary-200: #eadbd2;
--color-primary-300: #e9bea4;
--color-primary-400: #e0a07b;
--color-primary-500: #d37946;
--color-primary-600: #b9602c;
--color-primary-700: #984f24;
--color-primary-800: #65432f;
--color-primary-900: #3f332c;
--color-primary-950: #2a221d;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f9f6f7;
--color-secondary-100: #f0eaec;
--color-secondary-200: #e9d3db;
--color-secondary-300: #e6a8bf;
--color-secondary-400: #db80a1;
--color-secondary-500: #cc4d7b;
--color-secondary-600: #b23362;
--color-secondary-700: #932a50;
--color-secondary-800: #633143;
--color-secondary-900: #3e2d33;
--color-secondary-950: #2a1e22;
/* ─── Colors: Accent ─── */
--color-accent-50: #f6f8f9;
--color-accent-100: #e9eff1;
--color-accent-200: #cfe5ed;
--color-accent-300: #9ddcf0;
--color-accent-400: #71ccea;
--color-accent-500: #38b7e1;
--color-accent-600: #1e9dc7;
--color-accent-700: #1981a4;
--color-accent-800: #295a6b;
--color-accent-900: #2a3b41;
--color-accent-950: #1c282c;
/* ─── 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: #20c55d;
--color-success-light: #eff6f1;
--color-warning: #d49d11;
--color-warning-light: #f7f4ee;
--color-error: #c52026;
--color-error-light: #f6efef;
--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: Cormorant Garamond, serif;
--font-body: Crimson Pro, 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: 18px;
--radius-md: 10px;
--radius-sm: 4px;
--radius-xl: 28px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: 0 1px 3px rgba(211, 121, 70, 0.16), 0 1px 2px rgba(211, 121, 70, 0.12);
--shadow-mid: 0 4px 6px -1px rgba(211, 121, 70, 0.2), 0 2px 4px -2px rgba(211, 121, 70, 0.16);
--shadow-high: 0 20px 25px -5px rgba(211, 121, 70, 0.24), 0 8px 10px -6px rgba(211, 121, 70, 0.16);
/* ─── 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: #eadbd2;
--selection-fg: #3f332c;
}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.