Tableau de Bord
Components
Reusable component catalogue, usage register, variables, and live examples.
Used in
Production pages remain unchanged until they explicitly adopt the new .bf-* classes.
Selected component
Core UI
src/styles/global.css Step 6-007
Reusable Core UI contract
Opt-in classes use the approved Step 6-006 tokens. This pass defines the component language only; production-page conversion comes later.
.bf-button Primary, secondary, quiet, danger, icon, size, disabled and loading states. .bf-field Labels, help, required, validation, disabled and read-only controls. .bf-choice Checkboxes, radios, selected cards and the reusable Switch component. .bf-badge / .bf-notice Status badges, notices, empty states and loading states. .bf-card / .bf-panel Section headers, toolbars, action rows, dividers and metadata. Buttons
One base class with semantic variants and three control heights.
Variants
Sizes and states
Form controls
Labels and messages stay associated with native controls.
Selection controls
Native checkbox and radio inputs remain visible and keyboard operable.
Checkboxes and radios
Switch sizes
Feedback
Colour reinforces meaning but the text always carries the status.
Badges
The list is visible to all selected Household members.
The changes were stored successfully.
One extracted price still needs review.
Correct the marked fields and try again.
Add the first item to begin this Shopping List.
Current catalogue values are being prepared.
Containers and action structure
Cards hold one concept; panels group a header, body and footer workflow.
Reusable interactive card with a clear destination.
Panel content can contain forms, tables, media or a multi-step review.
Narrow and coarse-input checks
The same component classes reflow without a separate mobile component set.
390 px reference width
Standard controls use the 3rem coarse height inside this reference scope and on real coarse-pointer devices.