Overview & Cascade

Builder Studio styles with plain CSS — design tokens as CSS custom properties, global stylesheets for cross-cutting rules, and *.module.css for component-scoped styling. There is no Tailwind or CSS-in-JS. This section maps that system so tokens, cascade order, and file ownership are visible in one place.

The cascade

The root entry point is app/globals.css, imported once by app/layout.tsx. Before any of its own rules, it @imports the shared layers in this exact order — so later files can rely on earlier ones (tokens first, so everything downstream can read var(--*)):

1. styles/tokens.css — Design tokens (:root custom properties) — imported first (235 lines)
2. styles/utilities.css — Global a11y/layout utilities (.bs-sr-only, .bs-skip-link) (40 lines)
3. styles/dashboard-form-primitives.css — Shared form controls (consumed via formStyles.ts) (218 lines)
4. styles/route-state-primitives.css — Route error/empty/retry states (via stateActionClasses.ts) (116 lines)
5. styles/animations.css — Shared @keyframes + .animate-* classes (63 lines)

After those imports, app/globals.css defines the CSS reset, base element defaults, and accessibility rules that the rest of the app inherits.

Layout-scoped global sheets

These global stylesheets are not reached through globals.css. They are imported directly by nested route layouts, so their rules only load for those routes:

• styles/dashboard-shell.css — Dashboard shell classes (via styleConstants.ts); imported by (protected)/layout (764 lines)
• styles/canvas-layers.css — Canvas viewport layer classes; imported by canvas/layout (60 lines)
• styles/canvas.css — Canvas global interaction rules; imported by canvas/layout (113 lines)

For the full token catalogue see Design Tokens; for the complete file inventory and the TypeScript class-name contracts see CSS Files & Contracts; for scanned drift metrics and verified bugs see Audit & Drift.