Halo Brand System

Production kit

Start with the complete component layer.

Includes the canonical token CSS, shared component CSS, typed React source, accessible HTML examples and reduced-motion behaviour.

Download web kit · ZIP Machine manifest · JSON

Component contract

One semantic need. One canonical component.

01
Use canonical tokens; do not hard-code colour, spacing, type or motion.
02
Keep keyboard, screen-reader, touch, focus and reduced-motion behaviour.
03
Use Magenta for intervention or active guidance, with dark on-accent labels.
04
Update the system before adding a website-only fork.

8 canonical components

Preview and download.

Each component ships in every available implementation format. The shared CSS is the same layer used by these live specimens.

Primary action Secondary

Web asset

Button

Primary, secondary and quiet actions with complete interaction states.

HTML↓React↓CSS↓

Review the evidence

Web asset

Text link

Editorial inline action with a restrained directional signal.

HTML↓React↓CSS↓

Vehicle record / Evidence

Web asset

Eyebrow

Small navigational label with the Halo intervention dot.

HTML↓React↓CSS↓

VerifiedReview requiredPending

Web asset

Status badge

Literal state labels for verified, warning, pending and danger conditions.

HTML↓React↓CSS↓

Coverage verified8 / 8

All required vehicle views are present for this record.

Source · Capture session 0142

Web asset

Evidence card

A source-aware card for measurable evidence and provenance.

HTML↓React↓CSS↓

Work emailRequiredUsed only to respond to this request.

Web asset

Form field

Accessible label, help, focus and error treatment for inputs.

HTML↓React↓CSS↓

02Product

Web asset

Navigation link

Stable active-state navigation for guides and product surfaces.

HTML↓React↓CSS↓

Web asset

Motion signature

Measured line-and-copy reveal with a reduced-motion equivalent.

HTML↓React↓CSS↓

Versioned handoff

Release: 1.1.0
Shared CSS: /v1/web/halo-web-components.css
React source: /v1/web/halo-web-components.tsx