# Ordinal MCP Showcase — Design System

Dark, precise, data-forward. Technical aesthetic inspired by Resend, built for showcasing Ordinal MCP capabilities.

## Fonts

- **Sans:** Geist (400, 500, 600) via `cdn.jsdelivr.net/npm/geist@1.3.1`
- **Mono:** Geist Mono (400, 500) via same CDN
- Mono is used heavily: labels, data values, buttons, inputs, tags, section headers

## Colors

### Surfaces
| Token | Value | Usage |
|-------|-------|-------|
| `--bg` | `#09090B` | Page background |
| `--surface` | `#111113` | Table headers, input bg, code blocks |
| `--surface-alt` | `#18181B` | Hover states |
| `--border` | `rgba(255,255,255,0.06)` | Dividers, card borders |
| `--border-hover` | `rgba(255,255,255,0.1)` | Hover border state |

### Text
| Token | Value | Usage |
|-------|-------|-------|
| `--text-primary` | `#FAFAFA` | Headings, primary content |
| `--text-secondary` | `#71717A` | Body text, descriptions |
| `--text-tertiary` | `#52525B` | Labels, placeholders |

### Accents
| Token | Value | Usage |
|-------|-------|-------|
| `--accent` | `#8ef5b5` | Mint — highlight values, chart primary |
| `--accent-dim` | `rgba(142,245,181,0.08)` | Mint background for tags/badges |
| `--accent-text` | `#6ee89e` | Mint text (slightly dimmer for readability) |
| `--blue` | `#4864f5` | Secondary accent, chart secondary |
| `--error` / red | `#f87171` | Negative deltas, errors |
| `--warning` / amber | `#fbbf24` | Warnings, caution states |

## Typography Scale

| Role | Font | Size | Weight | Notes |
|------|------|------|--------|-------|
| Display | Geist | 32-40px | 600 | `-0.035em` tracking |
| Body | Geist | 14px | 400 | `1.65` line-height |
| Data value | Geist Mono | 24-28px | 500 | `tabular-nums`, `-0.02em` |
| Label | Geist Mono | 11px | 400-500 | uppercase, `0.06em` tracking |
| Code/Input | Geist Mono | 12px | 400 | — |
| Tag | Geist Mono | 10px | 500 | uppercase |

## Layout Principles

- **Max width:** 960px centered
- **Radius:** 6px universal (`--radius: 6px`)
- **Spacing:** tight — 20-28px card padding, 72px between sections
- **Borders:** near-invisible `rgba(255,255,255,0.06)`
- **Cards:** use 1px divider grids (`gap: 1px; background: var(--border)`) instead of individually bordered cards. Children get `background: var(--bg)`.
- **Section labels:** Geist Mono 11px, uppercase, with `01 —` numbering and bottom border

## Component Patterns

### Buttons
- **Primary:** white bg, black text (Geist Mono 12px 500)
- **Secondary:** transparent, 1px border
- **Ghost:** transparent, no border, secondary text color
- **Accent:** mint dim bg, mint text

### Inputs
- Geist Mono 12px
- `var(--surface)` background
- 1px `var(--border)` border
- Focus: `rgba(142,245,181,0.3)` border

### KPI Cards
- 1px divider grid layout (no individual borders)
- Label: Geist Mono 11px tertiary
- Value: Geist Mono 24px 500
- Delta: Geist Mono 11px, green up / red down

### Data Tables
- Header: Geist Mono 11px, `var(--surface)` bg
- Cells: 13px, 10px padding vertical
- Highlight values: `var(--accent-text)`
- Hover: `var(--surface)` row bg
- Pills: Geist Mono 10px, subtle `rgba(255,255,255,0.04)` bg

### Insight Cards
- Stacked list with 1px dividers (not individual cards)
- Tag + content grid layout (64px tag column)
- Tags: Geist Mono 10px uppercase, colored bg

### Code Blocks
- `var(--surface)` bg, 1px border
- Geist Mono 12px, `1.7` line-height
- Syntax: `.key` tertiary, `.str` accent-text, `.num` blue, `.comment` tertiary italic

## Chart.js Theming

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

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

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

// Tooltip
Chart.defaults.plugins.tooltip.backgroundColor = '#18181B';
Chart.defaults.plugins.tooltip.borderColor = 'rgba(255, 255, 255, 0.06)';
Chart.defaults.plugins.tooltip.borderWidth = 1;
Chart.defaults.plugins.tooltip.titleFont = { family: "'Geist Mono', monospace", size: 12 };
Chart.defaults.plugins.tooltip.bodyFont = { family: "'Geist Mono', monospace", size: 11 };
Chart.defaults.plugins.tooltip.titleColor = '#FAFAFA';
Chart.defaults.plugins.tooltip.bodyColor = '#71717A';

// Palette order
const chartPalette = ['#8ef5b5', '#4864f5', '#71717A', '#f87171', '#fbbf24'];
```

## File Structure

Each showcase artifact is a standalone HTML file, no build tools. Include fonts via CDN `@font-face` declarations. Chart.js via CDN `<script>` tag.