01 / Architecture

Three layers, strictly separated

The rule that makes a system agnostic is boring and absolute: a component may never contain a literal value. Not a hex code, not a pixel, not a font name. It reads tokens. Skins write tokens. Nothing else crosses the line.

LAYER 1

Anatomy

Semantic DOM skeletons with named parts and declared states. Keyboard behaviour, focus management, ARIA. Zero appearance. This is the layer Radix gives you.

data-part · data-state

LAYER 2

Token contract

A fixed, versioned list of custom property names. Components consume it. It is the public API of the visual layer, and breaking it is a major version.

--se-color-* · --se-space-*

LAYER 3

Skin

A stylesheet that assigns values to the contract, and nothing more. Studio Edit ships one. A creative's published portfolio can load another.

skins/*.css

packages/
  anatomy/     unstyled primitives + Radix wrappers   no CSS at all
  tokens/      contract.css, scales, type definitions  no components
  skins/       studio-edit.css, studio-edit-dark.css, high-contrast.css
  react/       thin bindings, re-exports anatomy
  docs/        this site