Blueprint
The Blueprint skin: its design, tokens, type and contrast.
A technical drawing: cyanotype paper, white linework, hatching for filled states, dimension lines for slider tracks, and lettering for labels. It was the first themed skin, built to prove that a skin can change everything about how UI SDK's components look while changing nothing about how they behave.
<UISet skin="blueprint">…</UISet>
Tokens
| Name | Value | Role |
|---|---|---|
| Paper | oklch(0.36 0.11 254) | The page: a deep cyanotype blue |
| Line | oklch(0.96 0.02 230) | Text, borders, fills: drawn in white |
| Faint | Line at 16% | Hover fills and the fine grid |
| Grid | Line at 7% | The 8px and 64px drawing grid on the paper |
| Ring | oklch(0.9 0.13 200) | Focus: a cyan line, distinct from the white drawing |
Type. Barlow Semi Condensed; labels and buttons in spaced capitals, like drafting lettering.
Drawing language.
- Text boxes are a line to write on, not a box.
- Checked and filled states are hatched, not filled solid: a switch's track, a slider's range.
- Slider tracks are dimension lines with end ticks; the thumb is a diamond.
- Popups are a sheet laid on the drawing, with an offset shadow line.
- What isn't reached yet (an empty star, an upcoming step) is drawn faint.
Scheme. Dark only: theme doesn't change it.
Contrast. White linework on the paper clears 4.5:1 for text and 3:1 for every control edge; the chart colors are a set chosen for the blue paper and checked for color blindness (neighbors CVD ΔE ≥ 14.6).