Thornveil Glade
Design Direction
This system is built for the in-between: the threshold moment, neither day nor night, neither mortal nor fey. Every decision pushes toward depth over clarity. Surfaces are dark and layered, glowing at the edges. Motion is slow and deliberate, as if the interface is aware of you. The stipple texture mimics the organic scatter of dew on leaves or pollen in still air. Nothing here is clean or corporate; it is grown, not made.
Colour Strategy
The primary is a deep enchanted green, the colour of moss under moonlight and phosphorescent lichen. Its split-complements are a cool dusk violet and a sharp amber-gold. The violet carries the otherworldly strangeness of fey magic; the amber-gold is the flicker of captured fireflies. The tension between green and violet is organic yet uncanny, grounded in the forest but slipping toward something not quite natural. Saturations run high because this place glows from within rather than being lit from outside.
Typography Strategy
Gloock at a low weight is fine-boned and archaic, with ink traps and high contrast that suggest old illuminated manuscripts rather than modern display type. It does not announce itself loudly; it whispers with authority. Crimson Pro in the body sustains that literary, handwritten-to-type quality at reading scale, with generous line height that makes text feel like it breathes. The 1.414 ratio creates dramatic leaps between type levels, so hierarchy reads as ceremony rather than information architecture.
Colour Palette
primary
#4eca88
secondary
#a855c4
accent
#d7c342
neutral
#88918c
success
#4ace9e
warning
#daab3e
error
#ce4a6b
info
#4a72ce
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
8px
md
18px
lg
30px
xl
48px
full
9999px
Elevation
Shadows
0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(78, 202, 136, 0.1)
0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(78, 202, 136, 0.15)
0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(78, 202, 136, 0.2)
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.
100ms
200ms
400ms
600ms
800ms
Easings
Hover states, colour changes, most transitions
cubic-bezier(0.65, 0, 0.35, 1)
Elements appearing - modals, dropdowns, toasts
cubic-bezier(0.33, 0, 0, 1)
Elements leaving - dismissals, close animations
cubic-bezier(0.67, 0, 1, 0.67)
Playful feedback - toggles, badges, confirmations
cubic-bezier(0.22, 1.6, 0.36, 1)
Physics-based - drag, gestures, elastic effects
cubic-bezier(0.16, 1.3, 0.3, 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 Phosphor — Rounded, friendly icons with multiple weight options
Stroke weight
1.5px
Matches border width (1px)
Corner rounding
8px
Use for icon containers
Icon set preview (luxury) — 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: #f6f9f7;
--color-primary-100: #eaf0ed;
--color-primary-200: #d3e9dd;
--color-primary-300: #a9e5c5;
--color-primary-400: #81d9aa;
--color-primary-500: #4eca88;
--color-primary-600: #35b16f;
--color-primary-700: #2b915b;
--color-primary-800: #326248;
--color-primary-900: #2d3e35;
--color-primary-950: #1e2923;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f8f6f8;
--color-secondary-100: #eeebf0;
--color-secondary-200: #e3d4e8;
--color-secondary-300: #d5ace2;
--color-secondary-400: #c186d5;
--color-secondary-500: #a855c4;
--color-secondary-600: #8f3baa;
--color-secondary-700: #75318c;
--color-secondary-800: #553460;
--color-secondary-900: #392e3d;
--color-secondary-950: #261e29;
/* ─── Colors: Accent ─── */
--color-accent-50: #f9f8f6;
--color-accent-100: #f1f0ea;
--color-accent-200: #ebe7d1;
--color-accent-300: #ebe2a3;
--color-accent-400: #e2d479;
--color-accent-500: #d7c342;
--color-accent-600: #bda928;
--color-accent-700: #9b8b21;
--color-accent-800: #675f2d;
--color-accent-900: #403d2b;
--color-accent-950: #2b291d;
/* ─── Colors: Neutral ─── */
--color-neutral-50: #f7f8f7;
--color-neutral-100: #eceeed;
--color-neutral-200: #dddfde;
--color-neutral-300: #c5c9c7;
--color-neutral-400: #aab1ad;
--color-neutral-500: #88918c;
--color-neutral-600: #6e7772;
--color-neutral-700: #5b625e;
--color-neutral-800: #474d4a;
--color-neutral-900: #333835;
--color-neutral-950: #222524;
/* ─── Colors: Semantic ─── */
--color-success: #4ace9e;
--color-success-light: #202d28;
--color-warning: #daab3e;
--color-warning-light: #2e291e;
--color-error: #ce4a6b;
--color-error-light: #2d2023;
--color-info: #4a72ce;
--color-info-light: #20242d;
/* ─── Colors: Surface ─── */
--color-background: #0e110f;
--color-foreground: #e4e7e5;
--color-card: #1a1e1c;
--color-card-foreground: #e4e7e5;
--color-muted: #242826;
--color-muted-foreground: #909894;
--color-border: #2c302d;
--color-input: #222523;
--color-ring: #47d188;
/* ─── Typography ─── */
--font-heading: Gloock, 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: 30px;
--radius-md: 18px;
--radius-sm: 8px;
--radius-xl: 48px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(78, 202, 136, 0.1);
--shadow-mid: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(78, 202, 136, 0.15);
--shadow-high: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(78, 202, 136, 0.2);
--shadow-glow: 0 0 40px rgba(78, 202, 136, 0.3), 0 0 80px rgba(78, 202, 136, 0.15);
/* ─── Motion ─── */
--duration-micro: 100ms;
--duration-fast: 200ms;
--duration-normal: 400ms;
--duration-slow: 600ms;
--duration-glacial: 800ms;
--easing-default: cubic-bezier(0.65, 0, 0.35, 1);
--easing-entrance: cubic-bezier(0.33, 0, 0, 1);
--easing-exit: cubic-bezier(0.67, 0, 1, 0.67);
--easing-bounce: cubic-bezier(0.22, 1.6, 0.36, 1);
--easing-spring: cubic-bezier(0.16, 1.3, 0.3, 1);
/* ─── Elevation ─── */
--elevation-sunken: #050605;
--elevation-base: #0c0e0d;
--elevation-raised: #1c211e;
--elevation-floating: #2a322e;
--elevation-overlay: #3d4842;
/* ─── 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: #326248;
--selection-fg: #eaf0ed;
}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.