Craft & Texture

The five laws

Token derivation only

Every craft colour is an L-or-alpha move on an existing token, or a color-mix between two of them. Chroma and hue are always inherited, so a theme patch restyles the whole craft system for free and no variant can drift into a new palette.

Two registers, one grammar

The marketing vocabulary and this product register share their physics and not their volume. Product edge-lights cap at 6% light and 8% dark, gradients are same-hue L-only with a 0.07 ribbon ceiling, and washes, patterns, and grain do not exist in product chrome at all.

Pixel-frozen comfortable baseline

Nothing here moves a resting metric at the comfortable tier. A press is a state change, not a metric change; finish classes are paint only; the fused housings reuse the existing border boxes.

One focal point

At most one tinted control per surface region. Wells never nest — a socket inside a well is the maximum. A composite control has exactly one housing border. Texture is hierarchy support, never noise.

Motion budget

Press-in runs at 90ms and release at the theme's fast duration, both inside the 200ms app-UI cap. Travel is translate-only: 0.5px for controls at or below 28px, 1px above. Scale reads playful; product is mechanical.

Finish legality

finish is a third CVA axis beside variant and size, defaulting to flat, which is class-free — the resting paint of a default button is byte-identical to before the axis existed. Illegal pairs still render exactly what you asked for and warn once in development; they are never silently rewritten. Emphasis belongs to this axis, never to a second font weight.

The eight devices

At most one texture device per element, plus its structural border or ring. Devices compose across levels — a well containing a rimmed tile — never stacked on one element. Removing every craft token yields the exact reUI baseline, which is also the rollback story.

What a family adds

The eight above are the core register: every family inherits them. A family may also contribute devices of its own, declared as paint operations over the same tokens and compiled into family-scoped CSS — never hand-written. Two tiers decide what happens where a contribution meets a core row. A mark — a jewel, a bracket, a graduation — composes: the machining underneath is untouched. A device that paints a machining layer supersedes instead, because a tile cannot be lit from above and struck into the page at once. Everything below is read from the family registry, so a row exists only if the stylesheet carries it.

One registered mark is still unexpressed: the instrument family’s reticle is a centre crosshair, which is neither a corner, an edge, nor a ring, and the paint algebra will grow the operation when a family actually places it rather than before.

The fused-control protocol

InputGroup, ButtonGroup, and SegmentedInput share one protocol. Each stamps its visible children with a position, and the housing owns every piece of chrome: one border, one radius, one fill, one shadow. A three-segment composite therefore draws one housing and two seams rather than six border edges.

• The ring moves to the housing, so the instrument focuses as a unit; the active segment adds an interior tint as a supplementary cue, never a replacement for the ring.
• An invalid segment turns the whole housing destructive and tints its own interior, so multi-segment errors stay locatable. Seams beside it stay neutral: an error is a fill, because lines are structure.
• Hidden children never consume a position. Stamping counts only what renders, which removes the class of bug that order-based corner stripping needed a special case for.
• A trailing action may take the tinted finish — the one juice allowance per composite, producing a search-and-go instrument with a lit end-cap.

Density

Per-theme behaviour

Every row below is derived from the theme parameters themselves — the same authorities the token build compiles — so a colorway appears here by existing and no cell can drift from what ships. Blueprint draws instead of lighting: its special tier is a hairline double rule rather than a ribbon. Terminal is flat and instant — state changes are fill inversions with no travel. Editorial keeps the ribbon at rest and on press but paints its hover flat, because its accent sits close enough to the contrast floor that a lightened hover fill would cost the label its legibility. The machined families — craft, ledger, gauge, caliber, intaglio — all cut wells rather than tint them; they differ in bevel crispness, edge-light volume, and ribbon richness. Contrast outranks craft everywhere.

Reduced motion and forced colours

• Under prefers-reduced-motion the press transform is removed outright, not merely shortened. The fill and shadow response remain, so the state is still visible without motion.
• Forced-colours mode strips every shadow natively. Borders, rings, and seams come back as real edges, so the structural layer carries the full meaning — craft is always additive to a complete flat design.
• Browsers without relative colour syntax render the tinted finish as a flat fill with identical geometry. There is no layout difference and no JavaScript detection anywhere.

Coming to the playground

Finish and device knobs arrive in the theme playground once the playground wave lands; the craft ceilings already bound its editors, so a user-authored theme cannot exceed the restraint law either.