Design preset

The grid is not hidden. It is the design.

Cells share their rules, sections are divided by heavy ones, and the structure is drawn rather than implied. Density, hierarchy and type do the work that shadows and rounded corners do elsewhere.

Build a site with this See the system

At a glance

Border radius: 0
Typefaces: Four
Soft shadows: None
Accent: One red

01 · The system

What the preset decides

A visible grid

Adjacent cells share a single hairline rather than each drawing their own. Decide the border per side, or every junction gains a 2px line and the page looks misprinted.

Four faces, four jobs

A display serif for headlines, a reading serif for body, a sans for interface, a mono for data. Each has a job; none is used for mood.

iii

One red

A signal, not a colour scheme — a badge, a CTA, an underline. On the off-white it measures 5.54:1 and clears AA; on black it is 3.11:1, so it never appears there.

02 · In detail

Density is a feature, not a flaw.

Fig. 1.1 · The measure

Most web layouts are built to breathe. This one is built to inform: tighter padding, shared rules and a narrower measure put more on the page without making it harder to read, which is exactly the trade a newspaper makes every day.

The justified column is part of that. Set with hyphenation and a sensible measure it reads as a printed page rather than a web page; set without either it produces rivers of white and looks broken, which is why it is applied only above the tablet breakpoint here.

03 · Method

Four moves

Rule the grid

Decide the columns and let the borders show where they fall.

Set the scale

A display serif far above a reading serif. The gap is the hierarchy.

III

Lay the texture

Dots, graph grid, halftone — or the page reads as blank stock.

Place the red

Once or twice, as a signal. Never on this band.

04 · Rates

Three columns

Starter

per month

One project
Community support
Core components

Choose

Studio · Featured

$24

per month

Ten projects
Priority support
Every component
Design export

Choose

Agency

$72

per month

Unlimited projects
Shared libraries
Client handover

Choose

Placeholder figures — shown to exercise the layout, not an offer

05 · Queries

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 and the structure. The print detail on this page — the drop cap, the ticker, the halftone texture — is still being folded into the preset and is not all emitted automatically yet.

Why is the red missing from the dark band?

Because it fails there. The editorial red measures 5.54:1 on the off-white and clears AA comfortably, but only 3.11:1 against the black. On the inverted section the accent becomes white instead. It is the one rule in this palette that is a constraint rather than a taste.

Does the density survive a phone?

Yes, with one change: the vertical rules come off and the horizontal ones stay, so a single column does not end up with a stray line down its side. Tap targets stay at 44px regardless — density must never shrink the thing you are trying to press.

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.

Open the creator