# Design System

> Created by ODA during DEFINE. Referenced by Edison during BUILD.
> Every visual decision should trace back to this file.

## Brand
- **Personality:** _[e.g., playful + intellectual, minimal + bold, warm + professional]_
- **Reference:** _[URLs or descriptions of visual inspiration]_

## Colors
| Token | Hex | Tailwind | Usage |
|-------|-----|----------|-------|
| Primary | | | Main actions, links |
| Secondary | | | Supporting elements |
| Accent | | | Highlights, badges |
| Background | | | Page background |
| Surface | | | Cards, panels |
| Text | | | Body text |
| Muted | | | Secondary text, borders |

## Typography
- **Headings:** _[font family, weights]_
- **Body:** _[font family, weight]_
- **Mono:** _[font family]_
- **Scale:** _[when to use text-sm through text-5xl]_

## Spacing
- **Base unit:** _[e.g., 4px / Tailwind default]_
- **Section padding:** _[e.g., py-16 to py-24]_
- **Card padding:** _[e.g., p-6]_
- **Component gap:** _[e.g., gap-4]_

## Components
- **Border radius:** _[e.g., rounded-xl for cards, rounded-full for avatars]_
- **Shadows:** _[when to use shadow-sm vs shadow-md vs shadow-lg]_
- **Borders:** _[style, when to use]_

## Layout
- **Max content width:** _[e.g., max-w-6xl]_
- **Grid:** _[e.g., 1-col mobile, 2-col tablet, 3-col desktop]_
- **Card style:** _[description of card appearance]_

## Animation
- **Transitions:** _[duration, easing — e.g., duration-200 ease-in-out]_
- **Hover states:** _[pattern — e.g., scale-105, opacity change]_
- **Loading states:** _[pattern — e.g., skeleton, spinner]_