Foundations Lab
Design System Tweaks
Tweak existing tokens, check the impact on real components and export a patch to fold back into the design system.
globals.css.Editing
Tokens by foundation
Canvas
Base background of every page.
--bg-canvasSurface
Bands, neutral areas and secondary backgrounds.
--bg-surfaceRaised
Cards, panels and raised surfaces.
--bg-raisedMuted
Low-emphasis neutral fills.
--bg-mutedInverse
High-contrast surface against the canvas.
--bg-inverseHover
Hover state of interactive items.
--bg-hoverSelected
Persistent selected state.
--bg-selectedPrimary text
Headings, commands and primary content.
--fg-primarySecondary text
Descriptions and reading metadata.
--fg-secondaryTertiary text
Eyebrows, captions and supporting information.
--fg-tertiaryMuted text
Supporting text at the lowest legible emphasis.
--fg-mutedInverse text
Text used on inverse surfaces.
--fg-on-inverseSubtle border
Quiet separators and internal divisions.
--border-subtleDefault border
Outline of cards, inputs and controls.
--border-defaultStrong border
Active states or structural contrast.
--border-strongFocus ring
Focus ring for keyboard navigation.
--ring-focusBrand
Primary action and brand accent.
--accent-brandBrand hover
Hover state of the brand accent.
--accent-brand-hoverSuccess
Completed, positive and confirmed states.
--accent-successDanger
Destructive states, critical states and errors.
--accent-dangerWarning
Pending states, alerts and review.
--accent-warningPreview
Components in context
Preview
Agent orchestration
Simulate how the foundations react across surfaces, text, borders, actions, states and elevation.
Pipeline