# Halo web component kit

Release: 1.0.0

This kit contains the canonical small web building blocks used to keep Halo interfaces recognizable and accessible. Load `halo.css` first, then `halo-web-components.css`. Use the HTML examples directly or copy the typed React components from `halo-web-components.tsx`.

## Non-negotiable rules

- Primary Magenta actions use the canonical dark `--halo-on-accent` label, never white.
- All interactive controls retain a visible focus state and a minimum 44px touch target.
- State colour always appears with a literal text label.
- Motion respects `prefers-reduced-motion` and never loops decoratively.
- Light Halo marks are restricted to dark controlled surfaces; dark marks are restricted to light surfaces.
- Do not fork component geometry or colour inside a page. Update the system source first.

The human guide and machine-readable rules are available from `https://brand.halocompass.com/`.
