# Method 8 design skill

Invoke this skill whenever designing for **Method 8** — the assessment and
compliance platform by Onwards Analytics. It tells you where to find tokens,
patterns, and reference screens so you don't re-derive the system from scratch.

## First moves, every time

1. **Read `README.md`** in this project. It's the source of truth for voice,
   color rules, spacing, iconography, and naming.
2. **Open `index.html`** in the preview to see every token and UI kit at a
   glance. Find the closest existing screen to what you're building.
3. **Link `colors_and_type.css`** from any new HTML file you create:
   ```html
   <link rel="stylesheet" href="../colors_and_type.css">
   ```
   Use token names (`var(--color-gray-700)`, `var(--spacing-3xl)`) — never
   inline hex or pixel values that already have a token.

## Anchors — the things that must always be true

- **Inter, 400/500/600.** Slate-700 type on white. No other font.
- **Single-button-color rule.** One dark-slate primary per screen, all other
  actions are white-with-border secondary.
- **Stat icon hues are domain-locked:** Programs=sky, Assessments=violet,
  Modules=fuchsia, Actions=orange. Never swap.
- **Sentence case** for every label, button, column header. No emoji except
  the dashboard greeting wave.
- **British spelling for `Programme`.** Matches the schema and product UI.
- **Borders, not shadows, on data cards.** 1px gray-200 hairlines.
- **Radii: 8/10/12/pill.** Pick from those four and stop.

## Reference order when in doubt

1. The live product screenshot (`assets/CreatorDashboard.png`)
2. The reference-screens/ recreations
3. The UI kit closest to your surface
4. The README's Visual foundations section
5. Ask the user — don't invent

## What to copy vs. what to write fresh

- **Always copy:** sidebar shell, header bar, stat-card pattern, activity feed
  row, status pill, primary/secondary buttons.
- **Write fresh:** anything specific to the new flow — but inherit spacing,
  type, and color from the kit you started from.

## Output checklist before handing off

- [ ] Page uses `colors_and_type.css` — no hardcoded colors
- [ ] Inter loaded with feature-settings `cv02 cv03 cv04 cv11`
- [ ] Sidebar/header match the production density (240px / 64px)
- [ ] Stat-card icon hues are paired correctly to their domain
- [ ] All buttons follow the one-primary-per-screen rule
- [ ] No emoji except the dashboard greeting wave
- [ ] Sentence case throughout
- [ ] `Programme` spelled with the British -mme