UI development

bin/dev ui
bin/generate-tokens --check
bin/sync-brand-assets --check
bin/build ui

The supplied Angular Open Bay SVGs and complete semantic light/dark JSON are authoritative. ui/brand/provenance.json records original paths and SHA-256. Token generation produces CSS, TypeScript/native maps, and Android colors from one JSON source. Do not hand-edit generated exports.

Use Inter 400/500/600/700 with system fallback, a 4 px spacing base, 10 px controls, 16 px cards, 20 px dialogs, 44 px interaction targets, and 160 ms motion that respects reduced motion. Fonts are local. Use supplied outlined logos, minimum 180 px horizontal, 32–47 px compact, or 16–31 px micro, with clear space.

Components

FhButton, fields, select/checkbox/radio/switch, dialog/confirmation/popover/menu, tabs/tooltip/toast, avatar/status/skeleton/empty states, shell/navigation, message and composer, event/form, member/profile, and theme controls are exported from @firehall/ui. Reka owns suitable interaction mechanics; Firehall owns styling and typed props/events. FhIcon exposes a curated Font Awesome Free vocabulary; decorative icons are hidden from assistive technology and icon-only buttons need labels. No remote Font Awesome kit is loaded.

Messages distinguish local preview, sending, failed, and sent presentations. Only the explicit preview creates local messages, always marked as preview. Most surfaces stay neutral. No tagline, decorative edge strips, emergency indicators, external avatar service, or oversized marketing headings belong in app screens.

Checks

Playwright captures the major compositions in light/dark at 320, 390, 768, and 1440 px. Reviewed baselines live in ui/tests/browser/baselines; failures and traces go to .firehall. Axe scans, labels, keyboard dialogs, focus restoration, tabs, long content, and text scaling are tested. A passing automated scan does not replace manual assistive-technology/device review.