Authoring components

Order of operations for any component work:

Tokens first. If the design needs a new value, add it to design-system/tokens.css with a comment saying what it means. Components reference var(--alfrex-…) only — a hard-coded hex or px in a component is a bug.
Class next. Add or extend the .als-* class in design-system/components.css. Follow the existing convention: block .als-card, elements .als-card__head, modifiers .als-btn--ghost.
Preview last. Each component gets components/<name>/index.html — a self-contained page that links the two shared CSS files by relative path and shows the component's real variants with realistic Alfrex data (shipment IDs, panel dimensions, freight money — not lorem ipsum).

component-authoring