Walden.

Tokens · components · patterns

Design
System

01

Typography

Two families. Vintage for display moments. DM Sans for everything else. Avoid font-bold — this system favors medium and semibold.

Display

font-display · Vintage

Aa

Pitch Editor · Cycle 4

Weights 400–600 · Tailwind: font-display

UI / Body

font-sans · DM Sans

Aa

Default body size is 14px. Most interface copy, buttons, labels, and form fields use text-sm.

Weights 300–600 · Tailwind: font-sans (default)

Production type scale

Page title Active Pitches 36px · semibold
Section heading Betting Table 24px · semibold
Subheading Problem statement 18px · medium
Body (default) The pitch board is a place to put things down — not to finish them. 14px · normal
Label / small Last updated 2 hours ago 12px · medium
Badge / micro In Progress 10px · medium
Eyebrow Section · navigation · meta 11px · 0.18em

Font weights

Light · 300

font-light

Normal · 400

font-normal

Medium · 500

font-medium

Semibold · 600

font-semibold

02

Color

Foundation neutrals plus the Ceramic accent palette. Each accent has a full-strength value and a -light background variant for badges and status fills.

Foundation

Paper

--paper

#FAF9F7 · bg-paper

Ink

--ink

#1A1A1A · text-ink

Stone

--stone

#E8E6E1 · border-stone

Surface

--card / --surface

#FFFFFF · bg-card

Soft

--soft

50% ink · secondary text

Faint

--faint

25% ink · placeholders

Ceramic palette

Celadon

--celadon / --celadon-light

#93A696 / #E8F0E9

Primary accent · success · focus ring · cycles

Clay

--clay / --clay-light

#B36A40 / #FDF3ED

Destructive · warnings · warmth

Kiln

--kiln / --kiln-light

#2D2A26 / #F5F4F3

Deep neutral · code tokens

Ash

--ash / --ash-light

#495E70 / #EEF1F3

Informational · secondary accent

Badge patterns

In Progress Shaping Cycle 4 Draft Only you

Pattern: bg-{color}-light text-{color} rounded-full text-[10px] font-medium. Use full color for icons and dots; light variant for the fill.

Chart colors

chart-1

chart-2

chart-3

chart-4

chart-5

03

Semantic tokens

shadcn/ui components consume these automatically. Map them as aliases in Figma — they flip when you toggle dark mode above.

--background bg-background #FAF9F7
--foreground text-foreground #1A1A1A
--card bg-card #FFFFFF
--primary bg-primary #1A1A1A
--primary-foreground text-primary-foreground #FAF9F7
--secondary / --muted bg-secondary · bg-muted #F5F4F3
--muted-foreground text-muted-foreground 50% opacity
--accent bg-accent · hover states #EFEDEA
--destructive bg-destructive #B36A40
--border border-border 8% opacity
--ring focus-visible:ring-ring #93A696
--sidebar bg-sidebar #FAF9F7
--sidebar-primary bg-sidebar-primary #93A696

Dark mode values (reference)

background

#0E0E10

card / surface

#18181B

foreground

#E8E6E1

ring

#B0C2B3

celadon

#B0C2B3

clay

#D08661

celadon-light

rgba(176,194,179,0.12)

destructive

#D08661

04

Radius & spacing

Base radius is 10px (0.625rem). Spacing follows Tailwind's 4px grid.

Border radius

sm

6px

rounded-sm

md

8px

rounded-md

lg

10px

rounded-lg

xl

14px

rounded-xl

2xl

20px

rounded-2xl

full

50%

badges · avatars

Common spacing

4px
gap-1 · list items
8px
gap-2 · tight groups
12px
p-3 · small buttons
16px
gap-4 · card padding
20px
p-5 · card padding (alt)
24px
gap-6 · section gaps

Shadows

Prefer borders over shadows for separation. When needed: subtle lift only.

shadow-sm

Slight lift

shadow-md

Moderate cards

shadow-lg

Hover-elevated cards

05

Components

shadcn/ui primitives styled with Walden tokens, plus product-level patterns from the codebase.

Buttons

shadcn variants: default, secondary, destructive, outline, ghost, link · Sizes: xs, sm, default, lg, icon

Inputs

Text input

Textarea

Cards

Pitch

Notification preferences

Small batch · 2 weeks

Shaping

Task

Wire up email digest

Scope: Notifications

Cycle

Cycle 4

Mar 3 – Apr 11 · Building

Navigation

◉ Pitch Board
○ Betting Table
○ Cycles
○ People

Page layout

Walden.

Pitch Board
Cycles

Active Pitches

Example pitch card

max-w-3xl content area

Component inventory

shadcn/ui primitives

Button · Input · Textarea · Card · Dialog · Sheet · Tabs · Select · Combobox · Popover · Dropdown Menu · Avatar · Sidebar · Tooltip · Switch · Toggle · Accordion · Breadcrumb · Skeleton · Sonner

Product components

CycleBadge · PrivateBadge · OrgBadge · TeamBadge · UserAvatar · UserAvatarGroup · ThemeToggle · AppHeader · UserMenu · BlockEditor · ~80 custom icons in app/components/icons/

06

Motion

Subtle, considered timing. One page-level animation per route — never nested.

animate-page

Page enter · 500ms ease-out

fade + 12px up

fade-up

Entry stream · 400ms

fade + 6px up

transitions

Nav items: 150ms
Cards: 200ms
Color changes: transition-colors
Theme switch: 200ms

Stagger delays

Classes .d1 through .d5 add 50ms increments (0.05s – 0.25s)