The card is lighter than the page
Which makes it the harder surface, not the easier one. The spec's secondary grey is 4.09 to one on the canvas and 3.57 inside a card — it fails in both places, and worse where you would check last.
Design preset
Depth from darkness, warmth from one ember
Four shades of slate stacked on each other, a single amber that glows rather than shouts, and enough space around everything that the page feels calm instead of dense. No second accent, no gradient, no colour doing the work of hierarchy.
Ink on the canvas18.92:1
Amber on the canvas9.20:1
Canvas on the amber9.20:1
White on the amber2.15:1
Spec muted, on the card3.57:1
4Layers of dark
1Accent colour
8pxDefault radius
3.57:1The spec's muted, on a card
Three rules
Glow is not contrast
The ambient orbs and the halo on a hovered button are the signature of the style and they are decoration. Every pairing here passes before any glow is applied to it.
The space is the style
Section padding runs to 176px. Tightening it is the quickest way to lose the calm, and it costs nothing to keep — unlike a colour, space is free.
Four shades of dark
#0A0A0FCanvas
#12121ARaised
#1A1A24Card
60%Glass
Each step is a few points of lightness, which is why the layering reads as depth rather than as four different colours — and why a glass panel has to be measured against whatever sits behind it rather than against the page.
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 palette, the type stack and scale, the soft radius, the four
surfaces and the 8% borders. The glass fills, the ambient orbs and the backdrop blur are
markup rather than stored values, so a section that wants them still asks for them.
Why is the button text dark?
Because white on the amber is 2.15 to one. An amber button reads as a dark object — it
is saturated and warm — and it is not: the canvas colour on it is 9.20. The specification
gets this right and it is still the first thing people change.
Why only one accent?
Because the contrast of the whole design is warm against cool. Add a second accent and
the amber stops being the ember in the dark and becomes one of two colours in a theme, which
is a different and much more ordinary thing.
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.