A
Visible structure
Two- and four-pixel borders define every division, and they stay that thick on a phone. Thinning them is what quietly turns a Swiss layout into an ordinary responsive page.
00Design preset
The grid is the authority.
Drawn, not implied. Borders do the structural work that gaps and shadows do elsewhere, and the typeface stays neutral so that scale, weight and position carry the whole hierarchy.
0Border radius
4pxSection borders
1Signal colour
21:1Text contrast
01System
What the preset decides
B
One signal
Red is a stop sign, not a decoration. It appears on numerals at display size, on rules and on focus — and never as small readable text, where it measures 3.70:1 and fails.
C
Asymmetry
Eight to four. Five to seven. Never six to six. The imbalance creates the tension that a perfectly centred layout gives away for nothing.
02Method
Red is large or structural
The accent measures 3.70:1 against white. That clears the three-to-one bar for large text and for non-text indicators like a focus ring or a rule, and it falls short of the four-and-a-half needed for normal-size text.
Which makes the small uppercase red label — the single most characteristic element of this style — the one thing it must not do. On this page the section numerals are red at display size and the words beside them are black. On a red fill the label is black too, at 5.67:1, because white on that red is the same failing 3.70.
03Inversion
A card flips wholesale, or not at all.
Hover the cards above. The background, the text and the border change together in a hundred and fifty milliseconds. A gentle opacity fade would read as hesitant — this style states things rather than suggesting them.
04Pricing, as this preset renders it
Three tiers
Placeholder figures — shown to exercise the layout, not an offer
05Questions
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 zero radius. The grid patterns, the geometric
composition and the collapsed borders are still being folded into the preset and are not all
emitted automatically yet.
Why are the red labels black?
Because red on white measures 3.70:1. That clears the three-to-one minimum for large text
and for non-text indicators, and falls short of the four-and-a-half for normal-size text. The
numerals are red because they are display-sized; the words beside them are black because they
are not. On a red fill the label is black as well, at 5.67:1 — white there would be the same
failing 3.70.
Do the borders really stay 4px on a phone?
Yes. Thinning them is the most common way this style is lost: the layout still stacks
correctly and the type still scales, but the structure stops being visible and the page reads
as any other responsive site. Border weight is not a desktop luxury here.
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.