The marker had to come down
Three point one six as text, three point two seven under white, four point two one under the pencil. It fails in every direction — a colour picked for how it looks and never measured.
Design preset
Hand-made containers, machine-readable content
Thick pencil borders, four different corner radii so no two match, and cards that sit a degree off true. The text inside them stays upright and plain, because that is the only part of a hand-drawn interface that must not be hand-drawn.
Pencil on paper13.33:1
Ballpoint on paper6.37:1
This marker red4.64:1
The spec's red, as text3.16:1
…and under white3.27:1
4Corner radii, all different
2pxMinimum border
3.16:1The spec's marker red
1°Rotation, containers only
Three rules
No two corners match
Four radius values per element, swapping on hover so the line appears redrawn. One uniform radius and this is an ordinary card with a funny font.
Rotate the box, not the words
A container tilts a degree; its contents counter-rotate so they sit straight. Tilted body text is harder to read and buys nothing.
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 paper, the pencil ink, the two handwriting faces, the larger body
size and the two-pixel border with its irregular radius. The rotations, the dashed rules and
the ruled feint are markup, so a section that wants them still asks for them.
Why is the red darker than the specification?
Because the specified red is the rare colour that fails in all three directions at
once. Keeping the saturation and lowering the lightness holds the marker quality and moves
it to four and a half to one in both of the directions that matter.
Why is the body text so large?
Because a handwriting face at sixteen pixels is harder work than a text face at the same
size — the letterforms are less regular, so the eye does more. A point or two up costs
nothing and is the difference between charming and tiring.
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.