One page for the defaults of every style, and the dials that move them. Pick a style, turn a dial, and the specimens, the palette and the fingerprint follow. Export the result as dials.json, then render real screens with it using dial_rig.py.
The specimens are an HTML approximation of each style. The renders further down are the real generator output, produced by the same rig, so they show what a dial does to an actual screen.
01 Fingerprint across styles
The same axes the dials move, measured on every style. The last column is the selected style after the dials.
| Axis | XDHD original | HAUX base | SRZA V1 | MESH v01 | Dialled |
|---|---|---|---|---|---|
| Surface depth · ΔE panel from background | 6.5 | 4.8 | 4.8 | 6.1 | — |
| Hairline strength · ΔE of the divider | 16.7 | 18.6 | 18.6 | 6.8 | — |
| Warmth · red minus blue of the background | -0.012 | -0.012 | -0.012 | 0.039 | — |
| Primary text on panel | 12.86:1 | 16.13:1 | 16.13:1 | 14.7:1 | — |
| Secondary text on panel | 5.81:1 | 6.71:1 | 6.71:1 | 5.6:1 | — |
| Tertiary text on panel | 2.7:1 | 2.95:1 | 2.95:1 | 2.64:1 | — |
| Highlight on background | 18.27:1 | 17.67:1 | 12.36:1 | 2.48:1 | — |
| Glow radius | 3.0 | 3.5 | 3.5 | — | — |
| Chamfer cut (px) | — | 8 | 8 | — | — |
| Form | soft | chamfer | chamfer | rounded | — |
02 Defaults of the selected style
Each swatch shows the default on the left and the dialled value on the right.
03 Specimens
A miniature of the style, restyled live. An HTML approximation: the real generator output is below.
Window
Controls
List and card
04 Real renders from the rig
The same screen drawn by the kit's own generators with each preset applied, through dial_rig.py. Click to enlarge.
HAUX base — 03-BASE-L, cropped to the pad matrix
no dials
radius 1.5, hairline 0.6, depth 0.75, glow 0.7
radius 0.35, stroke 1.4, hairline 1.5, depth 1.3, cut 12
textLift 0.27MESH — EVENT.PAGE, cropped to the cover and RSVP
no dials
radius 1.5, hairline 0.6, depth 0.75
radius 0.35, stroke 1.4, hairline 1.5, depth 1.3
textLift 0.5505 What the dials can reach
Measured from the generators' source, and the reach of each dial.
cut and glow. Both are single points of control, so those dials are exact: one value, one place.#fbf9f4×13 #efe9dc×7 #ffd9a0×3 #e8a24a×3.| Dial | Mechanism | HAUX kit | XDHD original | MESH | Notes |
|---|---|---|---|---|---|
| Surface depth | token | yes | yes | yes — also card shadows | Interpolates panels, wells and headers against the background. |
| Hairline strength | token | yes | yes | yes | Scales the alpha of hair / hair2; MESH moves its line colour. |
| Warmth | token | yes | yes | yes | At most 8 % toward warm or cool. |
| Text lift | token | yes | yes | yes | Blends secondary and tertiary text toward primary. |
| Glow | token | yes | yes | no — MESH has no glow | Scales glow and glowAlpha. |
| Chamfer cut | token | yes | no — soft, no cut | no — rounded | Sets cut. |
| Corner radius | primitive | yes | yes | yes | Radii are literals, so the rig rewrites rect. A token would be cleaner. |
| Stroke weight | primitive | yes | yes | yes | Stroke widths are literals too; the rig rewrites the primitives. |
- Most of the kit is already dial-able. The generators read tokens thousands of times and write far fewer colours inline, so a token change reaches nearly everything. Hard-coded values are the exception, not the rule.
tx3is the most-read token — and the one that fails contrast. One value reaches every place it is used, which is why the Legible preset and the AA fix are a single dial.- Radius and stroke are the gap. Neither is a token, so they are dialled by rewriting the SVG primitives. Promoting
radiusandstrokeWeightto tokens would make them first-class and remove the rewrite. - MESH is dialled by its constants, not a token file. A dial reaches it because its colours are named constants and its few inline paper tones are mapped; adding a
tokens.jsonfor it would be cleaner.
BLNK has no style to dial yet
BLNK is the blank template, and today it has no token set of its own — its chrome is the HAUX base in the default white domain. There are no defaults to show and nothing for a dial to move.
Defining a neutral BLNK token set is on the Plan. When it exists it joins kit.load_looks and appears here with its own fingerprint, specimens and dials.