# Advocacy Leaderboard — Maison Orange Design System

Bright, editorial, warm. White canvas with bold orange energy and typographic contrast. Feels like a magazine, not a spreadsheet.

## Fonts

- **Display:** Outfit (700, 800, 900) via Google Fonts
- **Editorial:** Instrument Serif Italic via Google Fonts
- **Data/Mono:** JetBrains Mono (400, 500, 600) via Google Fonts
- **Body:** Outfit (300, 400, 500) via Google Fonts

```html
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
```

## Colors

### Surfaces
| Token | Value | Usage |
|-------|-------|-------|
| `--bg` | `#FFFCF8` | Page background (warm white) |
| `--surface` | `#FFF7EF` | Hover states, alternate bg |
| `--surface-raised` | `#FFFFFF` | Cards, table bg |
| `--warm-gray` | `#F5F0EB` | Table headers, tag bg, subtle fills |
| `--border` | `rgba(0,0,0,0.08)` | Dividers, card borders |
| `--border-strong` | `rgba(0,0,0,0.15)` | Outline buttons, hover borders |

### Text
| Token | Value | Usage |
|-------|-------|-------|
| `--text` | `#1A1715` | Body text default |
| `--charcoal` | `#2C2825` | Headings, names, high-emphasis |
| `--text-muted` | `#8C8279` | Descriptions, secondary text |
| `--text-dim` | `#B5ADA5` | Labels, placeholders, meta |

### Accents
| Token | Value | Usage |
|-------|-------|-------|
| `--orange` | `#E8530E` | Primary accent, CTAs, highlights |
| `--orange-light` | `#FF7A3D` | Hover states, gradient end |
| `--orange-bg` | `rgba(232,83,14,0.06)` | Subtle orange tint for badges/tags |
| `--orange-bg-strong` | `rgba(232,83,14,0.12)` | Stronger orange tint |
| `--success` | `#2D9D5A` | Positive deltas, completed states |
| `--error` | `#D94343` | Negative deltas, errors |

## Typography Scale

| Role | Font | Size | Weight | Notes |
|------|------|------|--------|-------|
| Display | Outfit | 36-72px | 900 | Uppercase, `-0.04em` tracking |
| Editorial callout | Instrument Serif | 28-48px | 400 italic | Sentence case, `-0.02em` |
| Mixed headline | Outfit + Instrument | varies | 900 / 400i | Uppercase Outfit, italic Instrument for contrast |
| Data value | JetBrains Mono | 18-28px | 600 | `tabular-nums`, `-0.02em` |
| Label | JetBrains Mono | 10-11px | 500-600 | Uppercase, `0.06em` tracking |
| Body | Outfit | 14-16px | 400 | `1.65` line-height |
| Code/Input | JetBrains Mono | 12px | 400 | — |
| Tag | JetBrains Mono | 9-10px | 500 | Uppercase, `0.04-0.06em` tracking |

## Layout Principles

- **Max width:** 1000px centered
- **Radius:** `10px` default, `6px` small (buttons, tags)
- **Tags/pills:** `border-radius: 100px` (fully rounded)
- **Spacing:** 24px card padding, 72px between sections, 16px grid gaps
- **Cards:** white bg with 1px `rgba(0,0,0,0.08)` border
- **Stat grids:** 1px divider grid (`gap: 1px; background: var(--border)`) with `overflow: hidden` and `border-radius: var(--radius)`
- **Section labels:** JetBrains Mono 11px, uppercase, orange number prefix, trailing 1px line

## Component Patterns

### Buttons
- **Primary:** `--orange` bg, white text (Outfit 13px 600)
- **Dark:** `--charcoal` bg, white text
- **Outline:** transparent, 1.5px `--border-strong` border
- **Ghost:** transparent, no border, `--text-muted` color
- **Accent:** `--orange-bg` background, `--orange` text, 1px orange border

### Tags/Pills
- **Orange:** `--orange-bg` bg, `--orange` text
- **Dark:** `--charcoal` bg, white text
- **Outline:** transparent, 1px `--border-strong` border, `--text-muted` text
- **Warm:** `--warm-gray` bg, `--text-muted` text
- All: JetBrains Mono 10px, uppercase, `border-radius: 100px`

### Department Pills
- JetBrains Mono 9px, uppercase, `--warm-gray` bg, `--text-muted` text
- `border-radius: 100px`, padding `3px 8px`

### Tier Badges
| Tier | Icon Bg | Style |
|------|---------|-------|
| Platinum | `linear-gradient(135deg, --orange, #FF9B5E)` | Orange gradient ring |
| Gold | `linear-gradient(135deg, #F5A623, #F7C948)` | Gold gradient |
| Silver | `--warm-gray` | Subtle warm fill |
| Bronze | `rgba(0,0,0,0.04)` | Near-transparent |

### Stat Cards
- 1px divider grid (no individual borders)
- Label: JetBrains Mono 10px, `--text-dim`, uppercase
- Value: JetBrains Mono 28px 600, `--charcoal`
- Unit suffix: 14px 400 `--text-dim`
- Delta: JetBrains Mono 11px, green `#2D9D5A` up / red `#D94343` down

### Podium
- Three cards with rank circle badges on top
- 1st: `--orange` rank badge, orange avatar border, orange bottom bar (80px)
- 2nd: `--charcoal` rank badge, charcoal bottom bar (56px)
- 3rd: `--text-muted` rank badge, `--warm-gray` bottom bar (40px)
- Points: JetBrains Mono 18px 700, `--orange`

### Data Tables
- Header: JetBrains Mono 10px, `--warm-gray` bg
- Cells: 13px, 12px padding vertical
- Rank: JetBrains Mono 12px 600, `--text-dim`
- Name: Outfit 13px 600, `--charcoal`, with 32px avatar
- Highlight values: `--orange`, font-weight 600
- Hover: `--surface` row bg

### Challenge Cards
- White card, 1px border, 3px top color bar
- Active: orange top bar, orange status text
- Upcoming: `--text-dim` top bar
- Completed: `#2D9D5A` green top bar
- Emoji: 28px, title 15px 700, desc 13px `--text-muted`
- Reward: JetBrains Mono 11px 600, `--orange`

### Progress Bar
- Track: `--warm-gray`, 8px height, fully rounded
- Fill: `linear-gradient(90deg, --orange, --orange-light)`
- Label: Outfit 14px 700, value JetBrains Mono 12px 600 `--orange`
- Milestones: JetBrains Mono 10px, `--text-dim`

### Editorial Callouts
- **Orange variant:** `--orange` bg, white text, Instrument Serif Italic 36px, decorative circle (rgba white 0.08)
- **Dark variant:** `--charcoal` bg, Outfit 900 uppercase + Instrument Serif italic mixed headline, `--orange-light` for italic text

## Illustration Language

Geometric shapes in orange and charcoal. Concentric circles, nested rectangles, triangles with circle intersections, data point constellations. Always stroke-based, never filled blobs. Used sparingly as decorative accents, not as main content.

- Stroke width: 2px
- Colors: `--orange` primary, `--charcoal` secondary, white on dark backgrounds
- Style: Technical, precise, editorial... not playful doodles

## Texture

Subtle grain overlay on body via SVG noise filter, opacity 0.3. Adds warmth without competing with content.

## Chart.js Theming

```javascript
// Grid
Chart.defaults.scale.grid.color = 'rgba(0, 0, 0, 0.04)';
Chart.defaults.scale.border.display = false;

// Ticks
Chart.defaults.scale.ticks.color = '#B5ADA5';
Chart.defaults.scale.ticks.font = { family: "'JetBrains Mono', monospace", size: 11 };

// Legend
Chart.defaults.plugins.legend.labels.color = '#8C8279';
Chart.defaults.plugins.legend.labels.font = { family: "'JetBrains Mono', monospace", size: 11 };

// Tooltip
Chart.defaults.plugins.tooltip.backgroundColor = '#2C2825';
Chart.defaults.plugins.tooltip.borderColor = 'rgba(0, 0, 0, 0.15)';
Chart.defaults.plugins.tooltip.borderWidth = 1;
Chart.defaults.plugins.tooltip.titleFont = { family: "'JetBrains Mono', monospace", size: 12 };
Chart.defaults.plugins.tooltip.bodyFont = { family: "'JetBrains Mono', monospace", size: 11 };
Chart.defaults.plugins.tooltip.titleColor = '#FAFAFA';
Chart.defaults.plugins.tooltip.bodyColor = 'rgba(255,255,255,0.7)';

// Palette order
const chartPalette = ['#E8530E', '#FF7A3D', '#2C2825', '#8C8279', '#2D9D5A'];
```

## File Structure

Standalone HTML file, no build tools. Fonts via Google Fonts CDN, Chart.js via CDN `<script>` tag.