Layers
9 cascade layers, ordered weakest → strongest. Each has a single responsibility.
@layer reset, props, theme, color, typography, composition, layout, components, overrides;
1 · Reset
Normalize browser defaults. Box-sizing, margin removal, media defaults.
| Rule | Effect |
|---|
*, *::before, *::after | box-sizing: border-box, margin: 0 |
img, svg, video, canvas | display: block, max-width: 100% |
input, button, textarea, select | font: inherit |
body | min-height: 100dvh, text-rendering: optimizeLegibility |
2 · Props
Static design constants. Font stacks, system references. Never change at runtime.
| Property | Value |
|---|
--font-system-ui | system-ui, sans-serif |
--font-monospace-code | ui-monospace, monospace |
3 · Theme
Brand configuration. Fluid scaling ratios, viewport range, font roles. Override these to re-theme.
| Variable | Default | Purpose |
|---|
--_fluid-min-vp | 22.5rem | viewport floor (360px) |
--_fluid-max-vp | 77.5rem | viewport ceiling (1240px) |
--_type-min | 1.125rem | base size @ mobile |
--_type-max | 1.25rem | base size @ desktop |
--_type-min-ratio | 1.2 | scale ratio @ mobile |
--_type-max-ratio | 1.25 | scale ratio @ desktop |
--_space-min | 0.5rem | base space @ mobile |
--_space-max | 0.75rem | base space @ desktop |
--_space-min-ratio | 1.4 | space ratio @ mobile |
--_space-max-ratio | 1.65 | space ratio @ desktop |
--_font-heading | system-ui | heading font family |
--_font-body | system-ui | body font family |
--_font-mono | ui-monospace | code font family |
4 · Color
OS preference detection. Sets --_dark, --_motion, and user preference scales.
| Detection | Attribute | Sets |
|---|
| Dark mode | data-ui-scheme="dark" | --_dark: 1 |
| Reduced motion | data-ui-motion="none" | --_motion: 0 |
| Compact density | data-ui-density="compact" | --_space-scale: 0.75 |
| Comfortable | data-ui-density="comfortable" | --_space-scale: 1.25 |
| Small type | data-ui-size="small" | --_type-scale: 0.85 |
| Large type | data-ui-size="large" | --_type-scale: 1.15 |
5 · Typography
The sentinel pattern. --_type activates fluid font-size, tracking, and leading only where set.
| Selector | --_type | Notes |
|---|
body | 0 | base size, body font, bg + text color |
h1 | 5 | heading font family, contrast 0.92 |
h2 | 4 |
h3 | 3 |
h4 | 2 |
h5 | 1 |
small | -1 | |
code, pre | — | mono font, 0.85em |
6 · Composition
Context-free layout primitives. Work anywhere, nest freely.
| Class | Behavior | Key variable |
|---|
.stack | vertical flex, gap | --_gap |
.row | horizontal flex, gap | --_gap |
.grid | auto-fit grid, min column width | --_col, --_gap |
.split | space-between flex | --_gap |
.flank | sidebar + fluid main | --_flank, --_gap |
| Modifier | Effect |
|---|
.ai-center, .ai-start, .ai-end, .ai-baseline, .ai-stretch | align-items |
.jc-center, .jc-between, .jc-end | justify-content |
.span | grid-column: 1 / -1 |
.wrap, .nowrap | flex-wrap control |
7 · Layout
Page-level semantic regions. CSS grid areas with responsive breakpoints.
| Class | Grid areas | Breakpoint |
|---|
.layout-doc | nav, sidebar, main, toc | sidebar drawer <768px, toc >1024px |
.layout-app | sidebar, main | sidebar drawer <768px |
.layout-stack | header, main, footer | single column always |
| Child class | Grid area | Variable |
|---|
.layout-sidebar | sidebar | --_sidebar (width, default 16rem) |
.layout-main | main | max-width: 72ch |
.layout-nav | nav | — |
.layout-toc | toc | --_toc (width, default 14ch) |
.layout-toggle | — | hidden on desktop, visible on mobile |
8 · Components
Styled elements. Each uses the --_bg pattern for auto contrast.
| Component | Local vars | States |
|---|
.card | --_bg: --surface(1) | — |
button | --_bg, --_border, --_shadow | :hover, :active |
[popover].popover | --_bg: --surface(1) | anchor positioned, animated |
.fab | — | fixed bottom-right, anchor source |
input, select | — | accent-color: --fill() |
9 · Overrides
Responsive visibility, print, and accessibility helpers.
| Class | Behavior |
|---|
.mobile | visible <768px only |
.tablet | visible 768–1024px only |
.desktop | visible ≥1024px only |
.np | hidden in print |
.vh | visually hidden, accessible to screen readers |