Spacing & density
Prism never forks for a new audience — it reconfigures. Three independent, composable layers retune the same components from a 10-foot Smart TV down to a phone, and from an airy onboarding flow to a dense clinical table.
Spacing ruler & density
The 4px scale, the radius ladder, and the same controls shown at compact / neutral / relaxed — all driven by tokens/spacing.css and tokens/scales.css. The density columns render real components, so the rhythm change is the actual system, not a mock-up. Click a bar or radius tile to copy its token.
The three layers
1. Device size tiers (automatic, breakpoint-driven)
Font roles (--fs-*), space roles (--gap-*, --pad-*, --control-height) and radius roles (--radius-*) all step up across four tiers:
| Tier | Trigger | Character |
|---|---|---|
| mobile | base | tightest radius, touch targets, bottom-reachable actions |
| tablet | ≥ 640px | slightly larger type & spacing |
| desktop | ≥ 1024px | full information density |
| cinema | ≥ 1920px or data-scale="cinema" | big type, tall controls, scaled icons — 10-foot UI |
The cinema tier can be forced anywhere with data-scale="cinema" so a TV preview renders at the right scale regardless of the actual viewport.
2. Density (explicit, per-scope)
Set data-density on <html> or any subtree to trade whitespace for information:
| Density | Use for | Effect |
|---|---|---|
compact | admin tables, patient reports, finance dashboards | tighter rows, smaller gaps — more on screen |
neutral | the balanced default | — |
relaxed | student/parent applications, onboarding | more whitespace, lower cognitive load |
Density adjusts the space and control-height roles; it does not change font sizes (those stay on the frozen Tailwind steps) — it changes the rhythm around them.
3. Theme (light / dark)
data-theme — orthogonal to the above. See Theming & signatures.
How they compose
<html data-density="compact"> <!-- dense by default -->
<section data-density="relaxed"> … </section> <!-- one airy panel -->
<aside data-scale="cinema"> … </aside> <!-- a TV preview -->
Because every role token is scoped, axes mix freely at any level with no per-component code. A CommerceOS admin can run compact globally while its first-run onboarding panel opts into relaxed.
Authoring rules
- Never hand-pick padding for density. Consume
--pad-card,--gap-section,--gap-stack,--gap-inline,--control-height— they already resolve per tier and density. - Type uses the
--fs-*roles, which snap to Tailwind steps and bump by tier — never an in-between size. - Hit targets meet
--size-touch(44px) at every density; cinema uses the 56pxxlcontrol size. - Test each surface at all three densities and at the cinema tier — it's a QA gate.
The relevant tokens live in tokens/scales.css (roles + tiers + density) and tokens/spacing.css (primitives).
Live specimens
Spacing scale
Size tiers · mobile → cinema
Density scale
Control sizing
Radius