# ConnectIQ project instructions

For any UI implementation or visual edit:

1. Read `DESIGN.md`.
2. Read `tokens.json`.
3. Treat those files as the visual source of truth.
4. Use semantic CSS variables rather than raw values.
5. Do not modify design tokens unless the task explicitly asks for a design-system change.
6. Do not redesign unrelated screens.
7. Preserve ConnectIQ's compact, operational B2B visual language.
8. Never implement the purple Figma selection outlines visible in reference screenshots.
9. Run an accessibility and visual-consistency check before completing UI work.

## Themes

The system has three. Pick one deliberately and never mix them in a single view.

- **light** — the default. Every operational screen. Read `semantic.color`. Build this unless the task names another.
- **dark** — the same application on dark surfaces. Read `semantic.dark.color`. Same 14px density, same 4px grid, same radius scale, same hues. See `DESIGN.md` section 21.
- **presentation** — decks, reports, customer-facing dashboards. Dark surfaces plus `presentation.*` for type and layout. See `DESIGN.md` section 22. Never for an operational screen.

Do not invert light tokens by hand to make a dark surface — read `semantic.dark`. Do not use presentation type sizes in application code.

**Radius is the same in all three themes** — 4/6/8/12/16/20/pill. There is no presentation-specific radius. Never introduce 14px or 10px; both were explicitly rejected as off-scale.

**Application body text is `font.size.base` = 14px** (it was 13px through 1.0). `font.size.md` was retired because it duplicated base — use `base` for 14px and `lg` for 16px. Table and metadata text stays 12px deliberately.

## Colour rules that catch people out

- `warning` is the one hue that differs by theme: `#F1BF00` on light, `color.warning.dark` `#E0A83A` on dark.
- Dark tinted backgrounds and chart fills are alpha washes of the semantic hue. Never substitute a solid hex.
- `chart.modelled` `#9B8FD8` means projected or forecast, and is **chart-scoped only** — never brand, navigation, focus, badges or any interaction affordance. This is the sole sanctioned purple. See `DESIGN.md` section 5.5.
- On dark, the primary action inverts to white with black text. Orange is still not the default filled primary.
- De-prioritised and paused states are grey at 50% opacity, never red.
- Use `font.family.display` (Neue Montreal) for display headings and page titles only. Poppins and IBM Plex Mono are not part of ConnectIQ.

If a requested design needs a value that is not in the token set, state the missing token and proposed semantic purpose before introducing it.