The brand colour had to move
White on the specification's violet is 4.23 to one and the slate on it is 3.45 — it fails in both directions, so no label rescues it. One step darker fixes the fill, the link and the text colour at the same time.
Design preset
Stable grid, wild decoration
The content sits in clean readable areas and the world around it is full of shape. Hard offset shadows with no blur, two-pixel borders, and corners that are rounded on three sides and square on the fourth.
4.23:1White on the spec's violet
5.70:1White on this one
2pxBorder, everywhere
0Blur, ever
Three rules
Slate on every confetti colour
Pink, amber and mint all fail under white and all pass comfortably under the slate. They are fills behind shapes, and when they do carry text, the text is dark.
The decoration stays outside
Shapes live beside the content column, never across it. That is the whole difference between this and a page that merely looks busy.
Slate on confetti
5.52:1Slate on #F472B6 — white is 2.65
8.76:1Slate on #FBBF24 — white is 1.67
7.61:1Slate on #34D399 — white is 1.92
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 pairing, the mixed radii and the sticker shadow
from the start. The confetti shapes, the squiggles and the dot grid are markup, so a section
that wants them still asks for them.
Why is the violet not the one in the specification?
Because that violet is the rare case where a fill fails in both directions at once:
4.23 to one under white and 3.45 under the slate. There is no text colour that saves it. One
step darker and the same value works as a fill, as a link and as body emphasis.
Why no soft shadows?
Because a blurred shadow makes an element look like a card lying on a page, and a hard
offset makes it look like a sticker stuck to one. The second is the entire feeling of this
style, and it is one CSS value away from being lost.
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.