# FIH brand binding — Match Report wireframes

Values extracted from the official FIH logo asset
(`https://www.fih.hockey/static-assets/images/cssimages/svg/fih-logo.svg`),
saved locally as `assets/fih-logo.svg`. Nothing here is invented.

## Source colours (as shipped in the logo)

| Role | Hex | OKLch |
|---|---|---|
| FIH navy | `#1B1464` | `oklch(26.5% 0.134 277)` |
| FIH red | `#D2091B` | `oklch(54.6% 0.220 27)` |

## Tokens

```css
--bg            oklch(98.6% 0.004 277)   /* navy-tinted page */
--surface       oklch(100% 0 0)
--fg            oklch(20% 0.024 277)
--muted         oklch(43% 0.020 277)     /* ≥ 4.5:1 on --paper */
--faint         oklch(49% 0.016 277)     /* ≥ 4.5:1 on --paper */
--border        oklch(91% 0.008 277)
--border-strong oklch(80% 0.014 277)
--accent        oklch(38% 0.150 277)     /* navy, mid — borders, selection */
--accent-deep   oklch(26.5% 0.134 277)   /* = FIH navy — primary actions */
--paper         oklch(97.2% 0.005 277)
--paper2        oklch(93.5% 0.008 277)
--red           oklch(54.6% 0.220 27)    /* = FIH red */
--focus         oklch(54.6% 0.220 27)    /* = FIH red, focus rings only */
--green/--yellow/--amber                 /* card semantics, not brand */
```

## Type

- Display / UI: `system-ui, -apple-system, 'Segoe UI', sans-serif`
- Mono (numbers, labels, minutes, shirt numbers): `'IBM Plex Mono', ui-monospace, Menlo, monospace`
- Board only adds `'Space Grotesk'` for headlines.

## Posture rules

1. **Navy is the action colour, red is never a button.** In a hockey
   match-reporting tool red means *red card*. FIH red is reserved for the
   logo, the focus ring, the red-card swatch and the destructive
   `End Match` outline — never a primary fill.
2. **Accent cap: two visible navy uses per screen** — the primary button
   plus one selection/step indicator.
3. **Greyscale-first wireframe.** Brand colour is a thin layer over a
   neutral wireframe; surfaces stay white/paper, never tinted navy.
4. **The logo is used, not redrawn.** `assets/fih-logo.svg` is the
   official file, referenced by relative path at its natural 72×34 ratio.
5. **Card colours are semantic, not brand** — green/yellow/red swatches
   follow the FIH match-report form, so they sit outside the accent cap.