sample · sparkline
acid · area
theme system\u00b7 chapter 32 \u00b7 4 providers \u00b7 4 cross-cutting contracts
four providers \u00b7 one cascade \u00b7 every primitive participates
substrate. motion. density. locale. four cross-cutting brand contracts that every primitive in @zero/ui reads from. before this pack the contracts lived as CSS conventions; now they live as React Context, with a display: contentswrapper that adds zero layout cost. consumers compose the cascade once at the app root; descendant primitives inherit the tier without any further wiring.
as of
00 · livepick any two skins \u00b7 same primitives render side by side \u00b7 the diff strip lists every role that changesA/B the brand
left
right
signature · brand-canonical · amber-led · the wordmark variant
defaultpaper · 24h
+1.42%
decisions
6,143
refused
5,879
acidambergreenbluereddefault
trade receipt#7b1b2e51
- agent
- sera
- market
- sol-perp
- side
- short
- pnl
- +$1,420 · +1.42%
sample · depth bar
bids vs asks
bloomberg · inheritance-canonical · amber-led · capital-markets parent body
paper · 24h
+1.42%
decisions
6,143
refused
5,879
acidambergreenbluereddefault
trade receipt#7b1b2e51
- agent
- sera
- market
- sol-perp
- side
- short
- pnl
- +$1,420 · +1.42%
sample · sparkline
acid · area
sample · depth bar
bids vs asks
- brand-signal
oklch(0.752 0.122 81.2)→oklch(0.78 0.135 75) - figure
oklch(0.861 0.0349 84.58)→oklch(0.8507 0.0668 73.42) - ground
oklch(0.0706 0.0145 82.32)→oklch(0.0422 0.0173 29.23) - warn
oklch(0.78 0.135 75)→oklch(0.78 0.135 38)
as of
01 · four providersThemeProvider \u00b7 MotionProvider \u00b7 DensityProvider \u00b7 LocaleProviderthe four cross-cutting React-tree contracts
| # | provider | context shape | wrapper attribute | default |
|---|---|---|---|---|
| 72 | ThemeProvider | { skin, substrate: 'dark' } | data-skin \u00b7 data-substrate | signature \u00b7 dark |
| 73 | MotionProvider | { tier, reducedMotion } | data-motion | full |
| 74 | DensityProvider | { density } | data-density | cozy |
| 75 | LocaleProvider | { locale, direction } | lang \u00b7 dir | en \u00b7 ltr |
why providers, not CSS conventions alone
a CSS variable cascade gives descendants the value but no React-level access. consumers that want to read the tier in a hook (e.g., a chart that adapts its tick density to the density tier, or a date input that formats per locale) need a context. shipping the four together \u00b7 one wrapper, one hook \u00b7 means every consumer reaches them by typing.as of
02 · cascade compositioncanonical mounting orderthe four-deep wrap pattern
<ThemeProvider skin="signature"> <MotionProvider tier="full"> <DensityProvider density="cozy"> <LocaleProvider locale="en" direction="ltr"> <App /> </LocaleProvider> </DensityProvider> </MotionProvider></ThemeProvider>'use client';import { useTheme, useMotion, useDensity, useLocale } from '@zero/ui';import { chapterMetadata } from '../../lib/meta'; function MyComponent() { const { skin } = useTheme(); const { reducedMotion } = useMotion(); const { density } = useDensity(); const { locale, direction } = useLocale(); return <span data-skin={skin}>{locale}</span>;}order matters only for the cascade
for React Context, each provider is independent \u00b7 the order you nest is irrelevant. for the CSS variable cascade, theme must exist before motion can pivot off it. the brand book's root layout mounts none of these by default. chapter 32 is the contract reference; consumer apps compose the stack at their root.as of
03 · density grammarcompact \u00b7 cozy \u00b7 comfortableone provider \u00b7 three table densities
| time | asset | p/l |
|---|---|---|
| 14:22 | sol-perp | +82.30 |
| 14:24 | eth-perp | -14.10 |
| 14:39 | btc-perp | +41.40 |
| time | asset | p/l |
|---|---|---|
| 14:22 | sol-perp | +82.30 |
| 14:24 | eth-perp | -14.10 |
| 14:39 | btc-perp | +41.40 |
| time | asset | p/l |
|---|---|---|
| 14:22 | sol-perp | +82.30 |
| 14:24 | eth-perp | -14.10 |
| 14:39 | btc-perp | +41.40 |
why three stops, not five
the tri-stop grammar covers every consumer surface in cockpit \u00b7 league \u00b7 coliseum \u00b7 studio. five stops (xs/sm/md/lg/xl) doubles the CSS variable surface without unblocking any concrete request. the local DataTable declarations from ADR-020 remain as fallbacks; the provider's pivots win via inheritance when both are mounted.as of
04 · motion tiersfull \u00b7 reduced \u00b7 offone provider \u00b7 three motion tiers
| tier | --ease-step | --breath | --pulse | use case |
|---|---|---|---|---|
full | cubic-bezier(0.32, 0.72, 0, 1) | 1 | 1 | default \u00b7 the four-clock organism runs |
reduced | linear | 0 | 1 | respects prefers-reduced-motion |
off | linear | 0 | 0 | print substrate \u00b7 accessibility-first embeds |
motion is not optional chrome
the four-clock organism (chapter 03) is how the brand breathes. shutting it off changes how a primitive feels, not just how it looks. reach for tier='reduced'when the consumer has set prefers-reduced-motion; reach for tier='off' only for print, embeds, and accessibility-first surfaces where motion has been explicitly opted out.as of
05 · locale contractlang \u00b7 dir \u00b7 useLocale()one provider \u00b7 two locales \u00b7 one receipt
╭── TRADE RECEIPT ──────╮ │ asset · sol-perp │ side · long │ size · 12.000 │ price · $248.40 │ ts · 14:22:08Z │ hash · 0x7a4f ╰───────────────────────╯
╭── TRADE RECEIPT ──────╮ │ asset · sol-perp │ side · long │ size · 12.000 │ price · $248.40 │ ts · 14:22:08Z │ hash · 0x7a4f ╰───────────────────────╯
LocaleProvider does not translate
translating ZERO into a second locale is a copy-pipeline concern: edit the strings in brand/voice/lexicon-*and grade with rewriteIn from @zero/brand-runtime. the LocaleProvider just exposes which locale to format numbers, dates, and day-of-week against. rendering the sameReceipt at en versus es changeslang and dir on the wrapper; downstream format helpers key off those attributes.