A signal must be legible
The specified red fails as text, under white and under the ink. In a control panel the red is the one colour that cannot be decorative — if it cannot be read, it is not a warning.
Design preset
One light source, two shadows, every control
The lamp is fixed above and to the left, so a raised key carries a white highlight on that side and a grey one on the other. Press it and both invert. Everything numeric is monospace, because if a machine produced the value it should look like it.
Ink on chassis10.02:1
Label grey5.94:1
This alert red, as text4.98:1
The spec's red, as text2.64:1
…and under white3.34:1
2.64:1The spec's alert red
4.98:1This one
2Shadows, always
12pxRadius
Three rules
Two shadows, never one
A dark shadow one way and a white highlight the other. One shadow alone is a card lying on a page; the pair is a surface moulded out of the page itself.
Values are monospace
Specifications, readouts, prices, status. The split between Inter and the mono is functional rather than decorative, and it is what gives the page its instrument quality.
Three tiers
Placeholder figures — not an offer
Frequently asked
Is this a mock-up or the real thing?
A specimen, hand-built to the preset's specification so the style can be seen whole
rather than as a thumbnail. The preset itself is a set of WordPress Theme Settings, and a
generated site carries the chassis colour, the alert red, Inter over JetBrains Mono, the 12px
radius and the two-shadow extrusion with its pressed state. The recessed wells and the
embossed hero type are markup, so a section that wants them still asks for them.
Why is the red darker than the specification?
Because the specified red measures 2.64 to one as text on this chassis. A pale grey
ground is unforgiving: a colour that looks vivid on a dark mock-up loses almost all of its
separation here.
Does the extrusion work without shadows?
No — and that is the honest limitation of the style. An extruded control has no border
and no fill difference, so in a forced-colours mode or in print it disappears. Anything
genuinely interactive needs a boundary underneath the moulding.
Build a site in this preset.
Describe the business and your own AI agent builds it on WordPress with Unyson+ — real page-builder pages, with this design system applied site-wide.