# WSB frontend design system
`app.scss` is the only global stylesheet imported by the application. Its
partials are ordered from low-level contracts to shared component rules:
- `abstracts/_tokens.scss`: theme-independent typography, radii, and semantic
tokens.
- `abstracts/_dimensions.scss`: the primitive typography, icon, control,
spacing, and radius scales. Density profiles resolve these into CSS values.
- `themes/_themes.scss`: the existing light and dark WSB values.
- `themes/_density.scss`: `compact`, `default`, `comfortable`, and `spacious`
runtime density profiles. Each profile independently scales type, icons,
controls, spacing, and radii. `default` preserves the original dimensions.
- `_global.scss`: reset, document defaults, utilities, and shared workbench
primitives.
Use `var(--wsb-*)` from Svelte component styles. Theme and density are runtime
attributes on `<html>` (`data-theme` and `data-density`), so they can change
without rebuilding CSS. New shared visual rules belong in `_global.scss`; a
component should retain only layout that is genuinely local to that component.
Components consume resolved properties such as `--wsb-font-size-12`,
`--wsb-icon-size-16`, `--wsb-control-size-28`, `--wsb-spacing-8`, and
`--wsb-corner-radius-4`. Density factors are private to the SCSS token layer;
they must not be calculated inside a component. Viewport breakpoints,
one-pixel strokes, and large workspace geometry deliberately remain
density-independent.