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.
Surfaces (Tailark-first)
Prefer semantic tokens (bg-background, bg-card, text-foreground, border-border, text-muted-foreground). Linear ramp aliases (void/carbon/mist) remain for legacy app chrome only - new UI uses zinc/shadcn semantics Tailark ships with.
One foundation
components/ui/* and marketing blocks use the same token set - no .tailark-blocks type/shadow forks for new work.
Brand accent
CTAs use the cta button variant (bg-brand). Default/primary buttons use zinc primary (Tailark). Brand blue is not the default primary fill.
Typography
16px body base. Tailwind default scale (12 / 14 / 16 / 18 / 20 / 24 / 30…). Weights 400 / 500 / 600. Inter + system sans.
Elevation
Shadows are Tailwind-default (tintable with shadow-black/*). Use border + elevated card for most surfaces; shadow-md/xl for popovers and modals.
Radius
Radius base is 0.5rem (8px) to match Tailark Quartz.
Interactive cursors
Buttons, links, labels, and other clickable controls use cursor-pointer. Disabled controls use cursor-not-allowed.
Mesh gradient backgrounds
Pattern and idea card placeholders use Paper MeshGradient 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 600.
Display 30px / 500
Hero 30px / 500
Section 20px / 500
Emphasis 16px / 500
Body 16px / 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
16px
8px
9999px
4px
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)