Pills, always
Every button fully rounded. Not "quite rounded" — a slightly-rounded rectangle reads as a different design system entirely.
Design preset
Surfaces, not boxes
Colour arrives as whole tinted planes rather than as accents on a white page, corners are generous enough to be architectural, and every button is a pill — the single most identifiable thing about this system.
What the preset decides
Three decisions
State layers
Hover and press are opacity overlays rather than colour swaps, so an element keeps its identity while responding.
Tone plus elevation
The card tone is barely one-tenth of a step from the page. The shadow is what makes the boundary visible, which makes it structural rather than ornamental.
Surfaces
Tone alone is not a boundary
The container tint measures 1.12:1 against the page behind it. That is a difference you can see on a good monitor in a bright room and not much else — so the elevation shadow is doing accessibility work here, not decoration.
Which means "no border by default" has to be read as "no border in addition to elevation". A surface that loses its shadow — in a flat section, in print, in a high-contrast mode — needs the outline back.
Pricing, as this preset renders it
Three tiers
Placeholder figures — shown to exercise the layout, not an offer
Questions
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; a
generated site inherits the palette, the type scale and the radii. The blurred shapes, the
state layers and the filled text field are still being folded into the preset and are not
all emitted automatically yet.
Why do the cards have shadows if the system is tonal?
Because the tone on its own is 1.12:1 against the page, which is not a boundary anyone
can rely on. The specification says to separate containers with tone rather than borders, and
that only works because elevation is carrying the difference. Remove the shadow and the card
needs its outline back.
Do the buttons have to be fully round?
Yes — it is the clearest single marker of the system. A twelve-pixel radius on a button
reads as a different design language, even when every other value is correct.
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.