Design Preferences (radii, Shadows, Fonts, Spacing)

A handful of design decisions, made up front, separate "looks like every AI demo" from "looks like a real product."

CORNER RADIUS. How rounded are the corners of buttons, inputs, cards?

• 0px: hard, brutalist, very 2010-startup.
• 4px: subtle rounding, professional.
• 8px: friendly, modern, the default in most design systems.
• 12-16px: soft, consumer-friendly.
• 24px+: pill-shaped, playful. Pick one and stick with it across the whole app.

SHADOWS. Drop shadows on elements that "lift off" the background.

• None: flat design, very modern.
• Subtle (small offset, low blur, low opacity): the default for most professional apps.
• Heavy (large offset, high blur): retro, can look dated. Decide which elements get shadows: cards yes/no, buttons yes/no, modals usually yes (a heavy one).

FONTS. Pick two: a heading font and a body font. They can be the same. The most agent-friendly choices because they're well-supported and look professional:

• Inter (body) + Inter (heading): sans-serif, clean, modern.
• Inter (body) + Plus Jakarta Sans (heading): same vibe with more personality in the headings.
• Source Sans (body) + Source Serif (heading): if you want a professional/editorial feel.
• JetBrains Mono (for any code or data tables): readable monospace.

SPACING SCALE. Tailwind's default scale (4px increments: 4, 8, 12, 16, 24, 32, 48, 64) is good and well-known to agents. Use it. Don't introduce custom spacing values.

COLOR PALETTE. Pick:

• A primary color (your brand color).
• A neutral scale (whites, grays, blacks).
• A semantic set (green for success, red for error, yellow for warning, blue for info). Tailwind's default colors plus a custom primary works for most apps. Tell the agent the exact hex codes.

The deliverable: a design-tokens.md file in your repo with these choices. Reference it in CLAUDE.md. Every agent prompt about UI work includes "follow design-tokens.md."

A worked example for a small services business:

# Design Tokens

## Colors
- Primary: #2563eb (blue-600)
- Primary dark: #1e40af (blue-700)
- Neutral: Tailwind gray scale
- Success: #16a34a (green-600)
- Error: #dc2626 (red-600)
- Warning: #f59e0b (amber-500)

## Typography
- Body font: Inter, system-ui, sans-serif
- Heading font: Inter, system-ui, sans-serif
- Mono font: JetBrains Mono, monospace
- Base size: 16px
- Heading scale: 2xl (24px), 3xl (30px), 4xl (36px)

## Spacing
- Use Tailwind default scale
- Card padding: 24px (p-6)
- Section gap: 32px (gap-8)

## Borders & Shadows
- Border radius: 8px (rounded-lg) for cards and buttons
- Border radius: 6px (rounded-md) for inputs
- Card shadow: shadow-sm
- Modal shadow: shadow-xl

## Components
- Buttons: solid primary, ghost secondary, destructive red
- Inputs: bordered with focus ring in primary color
- Cards: white background, subtle shadow, 8px radius