Ten things worth doing. Each one is shown twice — as it is now, and as it could be — so the difference can be seen rather than described. None of them costs anything but the work of doing it: no new software, no plugin changes, no JavaScript.
They are grouped by what they buy us. Four make a design look more expensive. Three cost one line each and improve all ninety-one templates at once. Two are decisions a page has to make that no single design can. One is a fault we have today.
Makes it look expensive
01 — Shadows in layers, not one blur
One shadow has one falloff, and real light does not fall off in one step. Six faint layers, each about twice the offset of the last, plus a one-pixel highlight along the top edge where the light would hit.
Default one shadow
Made six layers and an edge light
Where we would use it. Every card, panel and raised surface in the library. Two declarations, no new design work, and it is the difference between a card sitting on the page and being drawn on it.
02 — Color fields with a surface
A two-stop gradient is the most recognisable shortcut in web design, because every part of it is predictable from every other part. Four soft radials give it a light source, and a little generated noise stops it looking like a computer made it.
Default linear gradient, two stops
Made four radials and grain
Where we would use it. Every template with a colored background — the CTA family, hero-gradient, stat-band, quote-band, newsletter-band. The noise is generated, so there is no image to ship.
03 — A card across the join
A card sitting half in one section and half in the next. It can only exist if somebody was looking at both sections at once, and a reader can tell — which is what makes a page look designed rather than assembled.
Before two sections meeting at a line
Twelve years on the same roofs
Sanderstead and the CR postcodes since 2013.
A survey costs nothing
Half an hour, no obligation, and a written price after it.
After a card crossing it
Twelve years on the same roofs
Sanderstead and the CR postcodes since 2013.
A survey costs nothing
Half an hour, no obligation, and a written price after it.
Where we would use it. Between a hero and whatever follows it. Nothing in the library does this. hero-overlap and showcase-overlap overlap inside one block; this crosses between two, which needs both to leave room.
04 — A shaped edge between sections
Sections do not have to meet in a horizontal line. An angle or a curve is the most recognisable “someone designed this” signal there is.
Before a straight line
Get a fixed price
Written before anyone climbs a ladder.
What people say
They found the leak in twenty minutes after two other firms could not.
After an angled join
Get a fixed price
Written before anyone climbs a ladder.
What people say
They found the leak in twenty minutes after two other firms could not.
Where we would use it. The band templates — cta-band, stat-band, proof-band, emergency-strip. The library has none of it. The angled block has to grow its own padding, or the slice cuts through its text.
One line, every template
05 — Headlines that break like a person would
The browser fills each line as full as it can and dumps whatever is left on the last one, which is how headlines end up with one word stranded. One property evens the lines out instead.
Default one word stranded
A survey costs nothing and takes about half an hour
Made text-wrap: balance
A survey costs nothing and takes about half an hour
Where we would use it. h1, h2, h3, h4 { text-wrap: balance; } written once, high up. It affects every heading in every template, cannot look worse, and needs no decision from anybody. Best return of anything here.
06 — Gradients that do not go muddy
Blending two saturated colors the default way drags the middle through a gray smear. Naming a better color space is the whole fix — same two colors, one word added.
Default — gray through the middle
in oklab — even the whole way
Where we would use it. Every gradient in the suite. A two-word change per declaration, and there is no case where the default is the better answer.
07 — The gap nobody chose
Both sections are correct on their own. Each has generous space above and below, because each was designed as though it were the only thing on the page. Stacked, that space adds up. The pink band is the real gap, measured on the page as you look at it.
Before both sections pad the join
A survey costs nothing
Half an hour, no obligation, and a written price after.
How it goes
You tell us what happened. We survey. We do the work.
After the lower section gives up its top
A survey costs nothing
Half an hour, no obligation, and a written price after.
How it goes
You tell us what happened. We survey. We do the work.
Where we would use it. All 91, and it is not a template decision — it is one rule made once: the space between two sections belongs to the lower one. It costs nothing and it is happening on every page a buyer builds today.
The page has to decide
08 — Alternate the background
Three sections on the same background have no seams, so the page reads as one long section with headings in it. Nothing looks broken. It just never says where one idea stops.
Before same color throughout
A survey costs nothing
Half an hour, no obligation.
How it goes
You tell us. We survey. We do the work.
What people say
They found the leak in twenty minutes.
After alternating
A survey costs nothing
Half an hour, no obligation.
How it goes
You tell us. We survey. We do the work.
What people say
They found the leak in twenty minutes.
Where we would use it. Nowhere in a template, and that is the point. Every one of the 91 ships looking its best on its own background, so a buyer who picks five gets the top version by default.
09 — One loud band, not three
A strong color works by contrast with what surrounds it. Three of them and there is no quiet left for any of them to be loud against, so none of them lands.
Before three strong bands
Twelve years on the same roofs
Sanderstead and the CR postcodes.
A survey costs nothing
Half an hour, no obligation.
How it goes
You tell us. We survey. We do the work.
Get a fixed price
Written before anyone climbs a ladder.
After one, at the ask
Twelve years on the same roofs
Sanderstead and the CR postcodes.
A survey costs nothing
Half an hour, no obligation.
How it goes
You tell us. We survey. We do the work.
Get a fixed price
Written before anyone climbs a ladder.
Where we would use it. About ten templates want a strong background — the CTA family, emergency-strip, offer-strip, stat-band, newsletter-band. Each is right alone. A page needs a way to tell all but one of them to stand down.
A fault we already have
10 — White on the accent fails in dark mode
These ratios are measured live from the colors on your screen, so they change when your system switches between light and dark. In dark mode the accent goes light, and white text on it drops to about 2.3 — unreadable. White on the accent is the most automatic choice in web design and it is only safe while the accent stays dark.
Where we would use it. Body text needs 4.5 to 1, large text 3.0. Any palette that flips for dark mode has to re-decide the text color on every role, not just the background. Worth checking across the whole palette before the next wave.
If only three get done
Balanced headlines (05) and gradients in oklab (06). One line each, written once, applied to all ninety-one. Nothing else on this page has that reach for that little work, and neither can make anything look worse.
The gap between sections (07). One rule — the space belongs to the lower section — and it is wrong on every page anyone builds today. It is invisible until it is measured, which is why it has never been raised.