---
name: baseline-design
description: "This skill should be used when the user explicitly says 'Baseline style', 'Baseline design', '/baseline-design', or directly asks to use/apply the Baseline design system. NEVER trigger automatically for generic UI or design tasks."
version: 1.0.0
allowed-tools: [Read, Write, Edit, Glob, Grep]
---

# Baseline Design

You are a senior product designer. When this skill is active, every UI decision follows the Baseline design language.

**Before starting any design work, declare which fonts are required and how to load them** (see `references/platform-mapping.md`). Inter and JetBrains Mono are mandatory — never substitute.

---

## 1. DESIGN PHILOSOPHY

Baseline is a business operations and financial analytics platform. The design language makes data trustworthy by staying out of its way. White canvas, slate neutrals, one green accent — nothing decorates for decoration's sake. Every visual decision asks: does this help the user understand their numbers faster?

The primary tension is between the clinical precision of financial data and the warmth of growth optimism embodied by a single fresh green. Primary buttons are green, data deltas are green, positive states are green — everywhere else is slate. Two feelings, one color signal.

**Design lineage:** Bloomberg Terminal restraint, Notion's content-first clarity, Linear's precision UI craft. A tool that respects the intelligence of its users by showing exactly what's happening.

### Principles

1. **Green means go — and nothing else.** The accent (#22C55E) lives on primary CTAs, positive data deltas, and success states. Never use it for decoration, section backgrounds, or secondary actions. One color, one job.

2. **Data is always first-class.** Charts, tables, and metric tiles are primary UI elements — not supporting visuals. Headlines serve the data, not the other way around.

3. **Light-first, dark for rhythm.** Pages start on white. Deep navy sections (#080D18) are rhythm breaks used deliberately — not the default product state. Product UI runs on white.

4. **Shadows ground without decorating.** Cards use one subtle shadow layer to define depth. No glows, no colored shadows, no stacked box-shadows. Depth comes from border + shadow, nothing else.

5. **Geometry without warmth signals.** Buttons are 8px radius. Cards are 12px. Nothing curves beyond its purpose. Pill shapes are reserved for status badges only — they don't appear on buttons or cards.

6. **Type hierarchy via weight only.** 700 for headings, 600 for subheadings, 400 for body, 500 for labels and badges. Color never creates hierarchy — only weight and size do.

7. **Density respects the user.** Data rows are 48px. Card padding is 24px minimum. Dense doesn't mean cramped — it means no wasted space between signal and signal.

---

## 2. CRAFT RULES — HOW TO COMPOSE

### Visual Hierarchy Layers

| Layer | Element | Token |
|-------|---------|-------|
| 0 — Canvas | Page background | `--background` (#F8FAFC light, #080D18 dark) |
| 1 — Surface | Cards, panels | `--surface1` (#FFFFFF light, #0F172A dark) |
| 2 — Raised | Inputs, nested containers | `--surface2` (#F1F5F9 light, #1E293B dark) |
| 3 — Float | Dropdowns, tooltips | `--surface1` + `--shadow-2` |
| 4 — Overlay | Modals, sheets | `--surface1` + `--shadow-3` |

### Typography Discipline

- **Max 2 font weights per screen.** Headings at 700, body at 400. Labels and badges at 500. Never mix 600 and 700 on the same screen.
- **Tracking tightens as size increases.** Display: -0.025em. Heading: -0.02em. Subheading: -0.01em. Body: 0em. Label: +0.06em (uppercase).
- **Line length maximum 72ch** for body text. Data tables and metric grids are exempt.
- **JetBrains Mono only for technical strings:** API keys, account IDs, code blocks, file paths. Financial numbers stay in Inter.

### Spacing Semantics

- **4px (xs):** Icon-to-label nudges, tag internal gap.
- **8px (sm):** Component internal spacing — icon+label in button, cell gap.
- **16px (md):** Standard list item padding, form field vertical gap.
- **24px (lg):** Card internal padding. The minimum for any card.
- **32–48px (xl, 2xl):** Section internal spacing — between cards in a grid.
- **64–96px (3xl, 4xl):** Full-section vertical rhythm on marketing pages.

### Color Strategy

- **One chromatic color per screen.** #22C55E (light) / #4ADE80 (dark) is the only chromatic moment.
- **All differentiation otherwise is tonal** — from the slate ramp.
- **Status colors** (green/amber/red) appear only in badges, alert banners, and delta indicators. Never as section backgrounds or decorative elements.
- **Dark sections:** Use `--surface1` / `--surface2` from the dark ramp. Never introduce a new color — just the green accent.

### Border Grammar

| Situation | Treatment |
|-----------|-----------|
| Card on light canvas | `border: 1px solid #E2E8F0` |
| Card on dark background | `border: 1px solid #1E293B` |
| Input default | `border: 1px solid #E2E8F0` |
| Input focus | `border: 1px solid #22C55E` + no focus ring (border IS the signal) |
| Data table header | `border-bottom: 1px solid #E2E8F0` |
| Divider | `1px solid var(--border)` |
| Never | Solid non-transparent border values outside this table |

### Metric Tile Composition

Baseline's signature component — a KPI card with three elements:

```
┌──────────────────────────┐
│ Revenue                  │  ← label: Inter 12px, --text2
│ $48,200                  │  ← number: Inter 700 32px, --text1
│ ↑ 12.4% vs last month    │  ← delta: Inter 500 12px, --accent (positive)
└──────────────────────────┘
```

Rules:
- Number always in Inter (not mono) — financial figures are UI, not code
- Delta arrow (↑ / ↓) inline before percentage, green for positive, `--error` for negative
- Label is `--text2`, never `--text3` (too faint for primary metrics)
- Card padding always 24px
- Minimum 3 per row; never 1 per row (metrics need comparison context)

### The Squint Test

Squint until you can only see zones. The page should read as: white zone (content), one dark zone (rhythm break), one green dot (primary CTA). If green appears more than once per viewport, you've overused the accent. If there's no green visible in the primary viewport, the CTA may be missing.

---

## 3. ANTI-PATTERNS — WHAT TO NEVER DO

1. **No green buttons for secondary actions.** Only the primary CTA on a screen gets green. Secondary buttons are white with a slate border. Ghost buttons are text-only.

2. **No dark backgrounds for product UI.** The deep navy is a marketing rhythm break. The actual product lives on white. Dashboard views, settings pages, and data tables are always light.

3. **No decorative gradients.** No gradient backgrounds, gradient borders, or gradient text on any UI element. Flat surfaces only.

4. **No second accent color.** Purple, blue, orange as accent — not Baseline. Only #22C55E on light, #4ADE80 on dark.

5. **No emoji as icons.** Lucide icons at 16px for inline, 20px for navigation, 24px for feature sections. Never emoji.

6. **No font weights above 700.** Headings at 700. Nothing higher. No 800 or 900.

7. **No border-radius above 16px on cards or containers.** Cards: 12px. Modals: 16px. Pills: 999px. Nothing between 16px and 999px.

8. **No colored body text.** Text1/2/3/4 are all slate neutrals. Accent only for links and positive deltas. Red only for negative deltas and error messages.

9. **No counting-up animations on metric tiles.** Numbers appear immediately. Animation distracts from comprehension.

10. **No toast notifications for errors.** Inline error states on forms, inline banners in data views. Toasts only for transient confirmation (saved, copied, sent).

11. **No pill-shaped buttons.** Button radius is 8px. Pill (999px) is reserved for status badges only — "Active", "Pending", "Overdue".

12. **No shadows on flat decorative elements.** Shadows are semantic — they tell the user something is elevated and interactive. Icon decorations, dividers, and section backgrounds never get shadows.

---

## 4. WORKFLOW

1. **Declare fonts** — check `references/platform-mapping.md` for Inter + JetBrains Mono loading
2. **Set tokens** — apply CSS custom properties from `references/tokens.md`
3. **Build components** — use exact specs from `references/components.md`
4. **Check green usage** — squint test: is green the only chromatic signal? More than one green CTA per screen is a violation.
5. **Verify both modes** — light is primary; dark mode must feel equally confident (not just color-inverted)
6. **Test extremes** — very long company names, $0 metrics, negative deltas, 10,000+ row tables, empty states
7. **Platform-adapt** — consult `references/platform-mapping.md` for CSS variables and Tailwind config

---

## 5. REFERENCE FILES

| File | Contains |
|------|----------|
| `references/tokens.md` | Fonts, type scale, color system (light + dark), spacing, radii, elevation, motion, iconography |
| `references/components.md` | Buttons, cards, inputs, data rows, metric tiles, tags, navigation, overlays, state patterns |
| `references/platform-mapping.md` | CSS custom properties, SwiftUI extensions, Tailwind config, font loading |