Design system
Growthtyping design system
shadcn/ui primitives on Radix, Linear dark surfaces, and SaaS blue brand accent. Tokens are defined in lib/design-system.ts and app/globals.css.
Usage rules
When to reach for Linear surface utilities vs shadcn semantic tokens.
Surface ramp (app chrome)
Use bg-void for main content. Sidebar uses bg-carbon (one step darker in light, elevated in dark). Nav hovers use bg-obsidian.
Semantic tokens (primitives)
Use bg-background, bg-card, border-border, and text-foreground inside components/ui/* and auth flows. Primitives stay theme-portable.
Brand accent
CTAs use the cta button variant (bg-brand + text-primary-foreground + shadow-cta). Never use text-paper on brand fills — paper maps to ink in light mode.
Typography
15px body base. Scale: 14 / 15 / 16 / 18 / 20 / 28px. Regular (400) + medium (500). SF Pro on Apple via system stack; Inter elsewhere.
Light mode neutrals
Product UI uses OKLCH subtle/default/strong tokens. Brand blue stays for CTAs only.
Borders over shadows
Lists, nav, gallery cards, and table rows use border-graphite only. Reserve the shadow scale for wells, popovers, modals, and CTA lift.
Interactive cursors
Buttons, links, labels, and other clickable controls use cursor-pointer. Disabled controls use cursor-not-allowed. Menu/select rows keep cursor-default.
Mesh gradient backgrounds
Pattern and idea card placeholders use Paper MeshGradient (@paper-design/shaders-react) with category palettes. Real example_render_url photos still win when present.
Semantic colors
shadcn/ui semantic tokens mapped to CSS variables in globals.css. Use these for component primitives.
background
foreground
card
card-foreground
popover
popover-foreground
primary
primary-foreground
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
destructive
border
input
ring
Surface ramp (dark)
Dark mode values. Light mode flips to Craftled House stripe greys — see Light mode ramp below.
ash
oklch(0.58 0.012 264)
bone
oklch(0.915 0.002 286)
carbon
oklch(0.152 0.005 286)
fog
oklch(0.621 0.014 264)
graphite
oklch(0.229 0.008 286)
mist
oklch(0.849 0.014 264)
obsidian
oklch(0.177 0.006 286)
paper
oklch(1 0 0)
smoke
oklch(0.318 0.01 286)
void
oklch(0.141 0.005 286)
Surface ramp (light)
Light mode surface ramp — white canvas with product neutral borders and text.
ash
oklch(0.52 0.01 286)
bone
oklch(0.268 0.005 286)
carbon
oklch(0.968 0.001 286)
fog
oklch(0.52 0.01 286)
graphite
oklch(0.955 0.002 286)
mist
oklch(0.442 0.01 286)
obsidian
oklch(1 0 0)
paper
oklch(0.268 0.005 286)
smoke
oklch(0.932 0.002 286)
void
oklch(1 0 0)
Product neutrals (light)
Product UI neutrals. Subtle oklch(0.52 0 0), default oklch(0.442 0.01 286), strong oklch(0.268 0.005 286).
bgSelected
oklch(0.968 0.001 286)
border
oklch(0.955 0.002 286)
default
oklch(0.442 0.01 286)
strong
oklch(0.268 0.005 286)
subtle
oklch(0.52 0 0)
Accents
Brand blue is the primary CTA accent. Supporting accents for status and badges.
brand
oklch(0.623 0.214 259.815)
coralRed
oklch(0.627 0.194 25.331)
irisViolet
oklch(0.585 0.204 277)
lavender
oklch(0.606 0.218 293)
pulseGreen
oklch(0.596 0.145 142.5)
signalTeal
oklch(0.689 0.118 195)
Typography
15px body. Scale 14–28px. SF Pro on Apple, Inter fallback. Max weight 500.
Display 28px / 500
Hero 28px / 500
Section 20px / 500
Emphasis 16px / 500
Body 15px / 400 — default copy
Caption 14px / 400
Label 14px / 400
Micro 12px / 400 — badge floor
Page title 36–40px / 500 — marketing H1
Radius
Base radius is 6px (shadcn --radius). Cards use 12px; pills are full.
4px
12px
6px
9999px
2px
Shadows
Five roles only. Prefer borders for lists and nav; reserve shadows for elevation hierarchy.
shadow-inset
Inset wells and composer panels
shadow-sm
Raised cards and inputs
shadow-md
Floating popovers (dropdown, select, hover-card)
shadow-xl
Modals, drawers, command palette
shadow-cta
Primary CTA button micro-elevation
- App sidebar — border only, no shadow
- Ideas gallery cards — border only, no shadow
- Settings lists — border only, no shadow
- Table rows — border only, no shadow
Buttons
Badges
Source of truth
Import tokens from lib/design-system.ts. CSS variables live in app/globals.css.
lib/design-system.ts — tokens, roles, class names
app/globals.css — :root / .dark CSS variables + @theme inline
components/ui/* — shadcn primitives (Radix)