designpaca

Six stages

From one line of brief to a page that passed its own audit

Every stage has a pass condition. Fail it and you don't move on. Below is what one brief actually became at each stage, from a coffee roastery landing page built with this skill.

1. Brief gate

   Compress the brief into three lines: what, for whom, constraints. Pick a path by scope.

   For whom: home baristas of 3+ years who can taste the roast profile

2. Reference research

   Pick three real sites at three different layers — structure, tone, detail.

   R2 = an independent literary publisher. Tone comes from outside the category

3. Direction

   Synthesize the references into one axis. Choose exactly one risk worth taking.

   Sentiment stays in the name. The screen carries numbers.

4. Design tokens

   Decide the numbers before writing code. The performance budget is fixed here too.

   --measure: 65ch / --leading-normal: 1.55 / JS budget 0KB

5. Build

   Layout → surface → depth → motion. It must be finished with every effect switched off.

   <h1>Acidity 8.5 · Body 6.0 · Light roast</h1>

6. Preflight

   Read your own work as a stranger's. All twelve gates must answer no.

   12/12 gates passed · 0 slop fingerprints · 31px overflow at 320px → fixed

What remains after six stages is one page and one design.md. The next person reads that file and continues the same decisions.

This page, measured

Fixing the copy does not remove the slop

Polishing sentences fixes sentences. The radius vocabulary, the translucent panels, the number of type steps all stay. So here are this page's own form metrics. If a number comes back badly, it ships as it is.

Measured on the production build. Unmeasured entries stay empty — a hole is more honest than an invented number.

What this page actually got caught on

Not the result of auditing someone else. The result of auditing itself.

• 6 eyebrow labels — the count rule caps them at ceil(7 sections / 3) = 3

  Kept three, dropped the rest. Sections read fine without a label above the heading

• The scroll reveal used clip-path — hard gate 8 allows only transform and opacity

  Switched to a cover pushed with translateX. Same result, and clip-path's interpolation limits went away with it

• Divider colour sits at 1.30:1 — fine as decoration, a WCAG 1.4.11 failure as an input border

  Added a 6.11:1 alias and split the two uses. No new colour, so the palette count is unchanged

• The text column was 960px — wider than the measure we had just set (561px)

  Bound the grid's main column to --measure. The skill's own example code was wrong too, so that got fixed as well

• 13px of horizontal overflow at 320px — even with the table inside an overflow container

  A grid item's default min-width is auto, so content pushes the parent wider. overflow-x only works once min-width:0 is set

• The button inside the dark band sat at 2.88:1 — the threshold is 4.5:1

  The band inverted the accent colour but left the text on it white. Added an inverted counterpart token and switched both together

• Scrolling to the very bottom still left the last 3 of 6 pipeline stages at opacity 0 — half of this page's core section was gone

  Elements near the page bottom never reach cover 22% in animation-range. Visible with effects off but missing with them on is not the same as having a fallback. The effect was removed

All seven were caught while building this page, and fixed after being caught. The last three only surfaced on a real 320px render — static checks missed them.

Your language is probably not Latin

Tools built on Latin assumptions stop at the script boundary

Design tooling written in English carries no rules for other scripts. 9–11px text is a label in Latin and unreadable in Korean. A line-height of 1.5 is standard in Latin and cramped in Korean.

Line breaking fails first. The default breaks Korean mid-word — the equivalent of breaking English mid-syllable, in the middle of a sentence. Both paragraphs below use the same text, width and font. The only difference is one line of word-break.

• word-break: keep-all — without it, words break at arbitrary points
• line-height 1.6–1.8 — more generous than Latin needs
• no negative letter-spacing — Korean glyphs are near-monospaced and collapse immediately
• 25–40 characters per line — Latin's 65–75 is far too long
• not specifying a Korean font is itself a sign of unfinished work

Every rule states why

A prohibition without a reason does not survive contact with a brief. If the user asks for it explicitly, the user wins.

Never start without references

Starting from memory produces the category average.

One accent colour

Wanting a second one means the hierarchy failed.

Be bold in exactly one place

Shout in two places and both go unheard.

Spectacle ranks fourth

Judging weights are Design 40 / Usability 30 / Creativity 20 / Content 10.

Never invent a number

A number-shaped hole is honest. An invented number costs trust.

It must be finished with every effect off

That state is the basis of every fallback. If it collapses, the effects were doing the structure's job.