# Agency Overview — Design System

Clean, minimal, quant. Light-mode dashboard inspired by Ramp's aesthetic. White/black/gray with bright yellow for data visualization. Tech-forward, dense, precise.

## Fonts

- **Sans:** Geist (400, 500, 600) via `cdn.jsdelivr.net/npm/geist@1.3.1`
- **Mono:** Geist Mono (400, 500) via same CDN
- Mono used heavily: all data values, labels, table headers, timestamps, badges

## Colors

### Surfaces
| Token | Value | Usage |
|-------|-------|-------|
| `--bg` | `#F7F7F7` | Page background |
| `--surface` | `#FFFFFF` | Cards, table bg |
| `--surface-alt` | `#F0F0F0` | Hover states, table headers |
| `--border` | `rgba(0,0,0,0.08)` | Dividers, card borders |

### Text
| Token | Value | Usage |
|-------|-------|-------|
| `--text-primary` | `#0A0A0A` | Headings, primary values |
| `--text-secondary` | `#6E6E6E` | Body, descriptions |
| `--text-tertiary` | `#A3A3A3` | Labels, placeholders |

### Accents
| Token | Value | Usage |
|-------|-------|-------|
| `--yellow` | `#FACC15` | Primary accent — chart bars, KPI highlights |
| `--yellow-dim` | `rgba(250,204,21,0.12)` | Yellow tag backgrounds |
| `--yellow-dark` | `#CA8A04` | Yellow text on white (accessible) |
| `--red` | `#EF4444` | Negative deltas, errors |
| `--green` | `#22C55E` | Positive deltas |

## Typography Scale

| Role | Font | Size | Weight | Notes |
|------|------|------|--------|-------|
| Display | Geist | 28px | 600 | `-0.035em` tracking |
| Body | Geist | 13px | 400 | `1.5` line-height |
| Data value | Geist Mono | 22px | 500 | `tabular-nums`, `-0.02em` |
| Label | Geist Mono | 11px | 500 | uppercase, `0.06em` tracking |
| Table cell | Geist Mono | 12px | 400 | tabular-nums |
| Tag | Geist Mono | 10px | 500 | uppercase |

## Layout Principles

- **Max width:** 1200px centered
- **Radius:** 6px (`--radius: 6px`) — sharp, not soft
- **Spacing:** tight — 20px card padding, 40px between sections
- **Borders:** minimal `rgba(0,0,0,0.08)`, no shadows
- **Cards:** white with 1px border, no elevation. Flat and clean.
- **Section labels:** Geist Mono 11px uppercase, tertiary color, bottom border

## Chart.js Theming

```javascript
Chart.defaults.scale.grid.color = 'rgba(0, 0, 0, 0.04)';
Chart.defaults.scale.border.display = false;
Chart.defaults.scale.ticks.color = '#A3A3A3';
Chart.defaults.scale.ticks.font = { family: "'Geist Mono', monospace", size: 10 };

// Dark tooltip for contrast
Chart.defaults.plugins.tooltip.backgroundColor = '#0A0A0A';
Chart.defaults.plugins.tooltip.titleColor = '#FFFFFF';
Chart.defaults.plugins.tooltip.bodyColor = '#A3A3A3';
Chart.defaults.plugins.tooltip.cornerRadius = 4;

// Palette: yellow primary, grays for secondary
const chartPalette = ['#FACC15', '#0A0A0A', '#A3A3A3', '#EF4444', '#D4D4D4'];
```