Approved Application shell
--bf-color-application-shell Reading live value… Tableau de Bord
Step 6-006 — Core UI Foundation
Foundation
The shared BrixFax design tokens. The page reads the computed live values used by the app.
global.css provides the safe defaults; approved browser-published values override
those defaults without duplicating component styles.
Colour roles
Roles describe purpose, not a specific page or component.
Approved Text on shell
--bf-color-text-on-shell Reading live value… Candidate Canvas
--bf-color-canvas Reading live value… Candidate Surface
--bf-color-surface Reading live value… Candidate Subtle surface
--bf-color-surface-subtle Reading live value… Candidate Text
--bf-color-text Reading live value… Candidate Muted text
--bf-color-text-muted Reading live value… Candidate Border
--bf-color-border Reading live value… Candidate Action
--bf-color-action Reading live value… Candidate Text on action
--bf-color-text-on-action Reading live value… Candidate Danger
--bf-color-danger Reading live value… Candidate Success
--bf-color-success Reading live value… Candidate Warning
--bf-color-warning Reading live value… Candidate Information
--bf-color-info Reading live value… Candidate Focus
--bf-color-focus Reading live value… Candidate Selected
--bf-color-selected Reading live value… Candidate Selected border
--bf-color-selected-border Reading live value… Typography
BrixFax interface foundation
--bf-font-size-display Shopping Lists
--bf-font-size-heading Clear everyday text with comfortable line height on narrow screens.
--bf-font-size-body Updated 5 August 2026
--bf-font-size-meta --bf-font-family-sans Reading live value… --bf-font-size-meta Reading live value… --bf-font-size-body Reading live value… --bf-font-size-heading Reading live value… --bf-font-size-display Reading live value… --bf-font-weight-regular Reading live value… --bf-font-weight-semibold Reading live value… --bf-font-weight-bold Reading live value… --bf-font-weight-strong Reading live value… --bf-line-height-tight Reading live value… --bf-line-height-heading Reading live value… --bf-line-height-body Reading live value… Spacing scale
One seven-step scale covers component interiors, page rhythm, and layout gaps.
--bf-space-1 Reading live value… --bf-space-2 Reading live value… --bf-space-3 Reading live value… --bf-space-4 Reading live value… --bf-space-5 Reading live value… --bf-space-6 Reading live value… --bf-space-7 Reading live value… Shape and control size
Small
--bf-radius-small Reading… Medium
--bf-radius-medium Reading… Large
--bf-radius-large Reading… Pill
--bf-radius-pill Reading… Elevation and page widths
Borders remain the default. Shadows communicate menus, overlays, and clear layering.
Menu
--bf-shadow-menu Reading… Overlay
--bf-shadow-overlay Reading… Readable pages stay constrained; operational workspaces may use more of the viewport.
--bf-page-width-reading Reading live value… --bf-page-width-standard Reading live value… --bf-page-width-wide Reading live value… --bf-page-width-workspace Reading live value… Interaction states
--bf-focus-ring Reading live value… --bf-disabled-opacity Reading live value… --bf-color-selected Reading live value… Non-negotiable accessibility rules
- Every interactive control has a visible keyboard focus state.
- Colour never carries status or meaning alone.
- Icon-only actions have accessible names and adequate target sizes.
- Mobile layouts preserve reading and action order without horizontal page scrolling.
- Loading, success, warning, and error states are announced and visually distinguishable.