Design System
All components, tokens, and guidelines rendered visually.
1. Color Palette
Backgrounds (Warm Beige Scale)
Canvas
#FDFBF7
beige-50
Page bg
#F5F0E8
beige-100
Surface
#EDE8DE
beige-200
Hover
#E2DCD0
beige-300
Muted
#D4CEC2
beige-400
Text (Warm Dark Scale)
Heading
#2A1F14
text-heading
Primary
#3D2E1F
text-primary
Body
#5C4E40
text-body
Secondary
#8A7A66
text-secondary
Placeholder
#C4B9A8
text-placeholder
Teal Accent (Full Ramp)
Teal 50
#E1F0EB
teal-50
Teal 100
#B3DCCF
teal-100
Teal 300
#5BB89C
teal-300
Teal 500
#1A7A64
teal-500
Teal 600
#136352
teal-600
Teal 800
#0A4438
teal-800
Teal 900
#062E26
teal-900
Semantic Colors
Success
Light #E7F2E4
Mid #3D7A35
Dark #1E4A1A
Warning
Light #FBF0DB
Mid #A8781A
Dark #5C4210
Error
Light #FAEAEA
Mid #B83A3A
Dark #6B1F1F
2. Typography
Headline Scale (Source Serif 4)
display / 56px / weight 600
Homepage hero only
h1 / 40px / weight 600
Page titles
h2 / 30px / weight 500
Section headings
h3 / 22px / weight 500
Card titles, FAQ questions
h4 / 18px / weight 500
Sub-sections, footer headings
Body Scale (DM Sans)
lead / 18px / weight 400
Hero subtitle, page intros. The quick brown fox jumps over the lazy dog.
body / 16px / weight 400
Default body text. The quick brown fox jumps over the lazy dog.
body-sm / 14px / weight 400
Feature cards, form labels. The quick brown fox jumps over the lazy dog.
caption / 13px / weight 400
Timestamps, breadcrumbs. The quick brown fox jumps over the lazy dog.
small / 12px / weight 500
Badges, pills, tags. The quick brown fox jumps over the lazy dog.
Code (JetBrains Mono)
mono / 14px / weight 400
const data = await clymin.extract(sources);
3. Buttons
Primary (Teal Filled)
Secondary (Outlined)
Ghost (Text Only)
CTA Pairing Rules
Hero: Primary (large) + Secondary (large)
Section: Primary (standard) + Ghost
4. Cards
Surface Card (hover me)
Card title
Canvas bg #FDFBF7, 0.5px border, radius-lg 12px, padding 20px. Hover shifts border to teal-100 and lifts 2px.
Tinted Card
Card title
Teal-50 bg #E1F0EB, no border, radius-lg 12px, padding 20px. Use sparingly for emphasis.
5. Form Inputs
This field is required.
6. Badges and Pills
7. Borders and Radius
Corner Radius
radius-sm
4px
Pills, badges, tags
radius-md
8px
Buttons, inputs
radius-lg
12px
Cards, dropdowns
radius-xl
16px
Hero, large containers
full
50%
Avatars, dots
Border Weights
0.5px default
#E2DCD0
1px emphasis
#D4CEC2
2px active/focus
#1A7A64
Dividers
Section divider (full-width, 0.5px)
Content divider (inset 24px, 0.5px)
Accent divider (centered, 2px, 48px wide)
8. Shadows
None (default, 95% of site)
Subtle (nav dropdown, floating bar)
Elevated (sticky header, chat widget)
9. Lucide UI Icons (16px only)
Chevron
Close
Search
Menu
External
Check
Plus
Minus
Arrow
Copy
10. Spacing Scale (4px base)
11. Motion and Transitions
duration-fast: 150ms (hover buttons, links)
duration-smooth: 200ms (card lift, dropdowns)
Hover me (200ms lift)
12. Layout Containers
max-w-7xl / 1280px (page container)
max-w-3xl / 768px (text content)
max-w-xl / 576px (forms)