The 17 guardrails

Brand = identity only

Lime brand (#b6d600) is identity only — logo, focus ring, spinner, banner icon, decorative identity icons, and the brand icon-tile. It is never a button, CTA, link, active state, badge, or chart colour.

Detectvar(--color-brand) on a background / border-color of an interactive element; bg-lime-*; a stale #9ae600.

FixMove interactive fills to var(--color-primary); keep brand on the focus ring and spinner.

Primary = every interactive state

Indigo primary (#5155C6 Light / #818cf8 Dark) is every CTA, hover, active / selected / checked, progress and slider fill, primary badge, and in-chrome link. Text on a primary fill is primary-text (#ffffff).

DetectA button / active state still filled with brand after the v0.10→v1.2 swap, or the retired #4f46e5 hue after v1.6.

Three palette roles, organised by responsibility

Brand (lime, identity), Primary (indigo, interaction) and AI (purple, automation and premium) each have a distinct job. Use the palette for actions and accents only — never as a large background fill; reach for the -bg tint instead. Neutrals carry ~90% of the UI.

DetectA reference to the deleted secondary or quaternary roles, or to tertiary (renamed ai in v1.5).

FixInformational contexts → info; urgency → warning; links → primary; a neutral button surface → surface-muted.

Semantic = status only; fill ≠ text

success / warning / danger / info communicate status, never interaction (button-danger excepted). Fill tokens are for icons, borders and indicators; the -text tokens are contrast-safe foregrounds on the -bg tints — never swap them.

Charts use the dedicated DataViz ramp — never the palette

Series 1–5 map to chart-1…chart-5 directly. They no longer map to palette roles — v1.5 severed that link and fully retuned both ramps, so a chart must never pull primary, ai or a semantic colour. Beyond five series, repeat the ramp with a pattern or shape cue; gridlines use border-strong. In Accessibility the ramp is greyscale and requires a non-colour cue (pattern, dash, label).

DetectA series assigned a palette role, a semantic colour, or the retired v1.4 ramp (#f43f5e, #84cc16, #f97316…).

Brand-text is text-only

brand-text (#0a0a31) appears only as text on a brand-lime fill. Never use it as a background or fill.

Detect#0a0a31 appearing in background / bg-*.

Canvas integrity

Use the active theme's canvas; never replace or flood it. No dark blocks in Light; no bleached or white blocks in the dark themes (Dark #1d2125, Accessibility #000000).

Detectbody / #root / main with a non-canvas background; hardcoded #fff blocks under a dark data-theme.

Border for structure, shadow for lift — all tokens

Containers separate via a 1px border (border-strong for cards, inputs and tables; hairline for subtle dividers). A raised surface may pair surface.raised with shadow-raised; overlays use shadow-overlay. Stacking comes from the z-index scale only. In Accessibility there are no shadows — borders carry all elevation.

DetectHardcoded rgba(…) shadow strings instead of var(--shadow-raised|overlay); a hardcoded scrim instead of var(--color-overlay); raw z-index integers.

Fix1px solid var(--color-border-strong) on structure; var(--shadow-raised) on cards/menus, var(--shadow-overlay) on modals/drawers.

Radius scale — four steps

none 0 (tables, full-bleed), sm 4px (badges, chips, tooltips), base 8px (buttons, cards, inputs, modals), full 9999px (pills, avatars, FAB). No ad-hoc radii.

Detectborder-radius other than 0 / 4px / 8px / 9999px; rounded-(md|lg|xl) on components.

Type roles and floor

Inter for structure (display, headings); Geist for operation (body, label, nav, caption); Geist Mono for code. There is a 12px floor (caption). Never mix Inter and Geist within one element.

Focus = a 2px ring (visibility wins)

Focus adds a 2px border-focus outline at 2px offset — lime in Light/Dark, white in Accessibility. The filled palette button (now just ai) keeps its own-hue ring; the brand button uses ink; danger uses danger. Every interactive component ships an explicit focus variant.

Detectoutline: none with no replacement ring.

Icons = Material Symbols Outlined, weight 300

Brand colour is allowed only on identity icons; functional, interactive and status icons inherit currentColor / primary / the semantic token. Icon-only controls need an aria-label.

Detectlucide / heroicons / font-awesome imports. (Swapping an existing icon set is nice-to-align, not a blocker.)

Active sidebar nav = primary-bg

The active sidebar nav item takes primary-bg (a low-saturation indigo tint) with a primary icon and bold weight. (v0.10 used brand-bg — now wrong.)

Announcement card border

An announcement card carries border-announcement (high-contrast against the canvas) on the border only — the surface stays the card surface.

Accessible sizing

Interactive targets are ≥ 32×32px in Light/Dark. The Accessibility theme raises the floor to 44×44px via padding and size overrides. Non-interactive display elements may be smaller (e.g. small avatars).

DetectInteractive controls below a 32px hit area.

Motion respects prefers-reduced-motion

Use the duration and easing tokens; wrap every transition in @media (prefers-reduced-motion: reduce) and collapse it to duration-instant. duration-enter / duration-exit do not exist, and easing-enter is for entrances only — never a hover, a bidirectional, or a looping transition. The keyframe library lives in the motion foundation.

Detecteasing-enter on a hover or a loop; a hardcoded ms or cubic-bezier(); an animation with no reduced-motion fallback.

Scrollbars are themed

Scrollable containers use scrollbar-track / scrollbar-thumb / scrollbar-thumb-hover at 10px, thumb at rounded.full. WebKit needs ::-webkit-scrollbar; Firefox needs scrollbar-color + scrollbar-width: thin — ship both. See the scrollbar foundation.

Detectscrollbar-width: none, a hidden scrollbar on a scrollable region, or a browser-default scrollbar left on a themed surface.