A near-white ground is unforgiving
All three of the specified colours fail on it — the accent in both directions, the teal badly, the muted grey as text. Soft-UI palettes tend to be picked against a mid grey and then used on a page like this one.
Design preset
One surface. Everything else is light
No layers, no outlines, no second background — a single colour, moulded. The whole design is two shadows: a pale one on the lit side, a darker one opposite, inverted when something is pressed. It is also the style with the sharpest accessibility limit in this set, and this page says where.
Ink on the surface7.38:1
This accent, as text5.12:1
The spec's accent, as text3.41:1
…and under white4.32:1
The spec's teal, under white2.58:1
1Surface colour
2Shadows per element
3Spec colours that failed
16pxRadius
Three rules
A shadow is not a boundary
An extruded control has no border and no fill difference, so it exists only while its shadows do. In a forced-colours mode it disappears entirely. Interactive elements here keep a faint outline underneath.
The light never moves
Top left, on every element, without exception. One element lit from the other side does not look varied — it looks broken, because the eye reads the whole page as one object.
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 one surface colour, the re-measured accents, Plus Jakarta Sans
over DM Sans, the 16px radius and the two-shadow extrusion with its pressed state. The
recessed wells are markup, so a section that wants them still asks for them.
Why are all three accent colours different from the specification?
Because all three fail on the surface the specification itself defines — 3.41, 2.58 and
3.82 to one. That is not bad luck; it is what happens when a palette is chosen against a
darker mock-up and then applied to a near-white page.
Is this style accessible at all?
With care, and with one honest caveat. Text contrast is solvable — the values here all
pass. What cannot be solved by colour alone is the boundary: an element made only of shadows
has none. Keeping a faint outline under anything interactive costs nothing visually and is
the difference between a style and a trap.
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.