The design gate: twelve basics a page must meet before it's published
Since 23 October 2026, Anticode refuses to publish a page that misses any of twelve design basics. Half are about the page working for everyone: a language, a phone viewport, a title, visible keyboard focus, reduced motion, alt text. The other half catch what makes a page look generated: serif fallbacks, a third font family, the purple-to-blue gradient, stock phrases, placeholder text and empty links. Each rule names what it found.
Why some design rules block and others don't
The Critic runs nineteen design checks on every build and shows them in the Report tab, but most of them are advice: a page with a lifting card hover is a little generic, not broken. A website design quality gate is for the things that shouldn't reach the public at all, either because some visitors can't use the page, or because the page announces that nobody finished it. Those few rules are objective enough to enforce, so publishing enforces them.
The twelve checks
| Check | Fails when | Fix |
|---|---|---|
| Declares its language | The html element has no lang attribute | Set lang, for example lang="en" |
| Fits phones | There's no viewport meta tag | Add a viewport tag |
| Has a name | There's no title, or it's empty | Give the page a title |
| Visible keyboard focus | The styles have no :focus, :focus-visible or :focus-within rule | Style :focus-visible so keyboard users can see where they are |
| Respects reduced motion | The page animates or uses transitions with no prefers-reduced-motion rule | Turn animation down under prefers-reduced-motion |
| Every image has a text alternative | An img has no alt attribute at all | Describe it, or use alt="" for decoration |
| Sans-serif type only | A font declaration falls back to serif or names a serif face such as Georgia, Times or Playfair | Use the design system's sans-serif |
| One font family, or one pairing | The page loads three or more Google Fonts families | Drop to one family, or one pairing |
| No purple-to-blue gradient | A CSS gradient uses purple, violet or indigo | Use a flat surface or the site's own colours |
| No stock AI phrases | The visible text contains a phrase from the stock list, such as "next-gen" | Say what the product actually does |
| No placeholder text | Filler or template blanks: dummy Latin, unfinished-note markers, "your name here", example.com addresses, 555 numbers, sample street addresses | Replace with the real detail, or remove it |
| Every link goes somewhere | A link's address is empty, a bare #, or a javascript: URL | Point it at a page, a section, an email address or a phone number |
Each failure carries a short detail, usually the text it matched ("Found: no lang on <html>", or the phrase it saw), so you never have to guess which part of the page tripped it.
How it reads a page
The gate doesn't render the page or ask a model. It works on the HTML string: the CSS is gathered from every style block and style attribute, the visible text is the body with its markup, styles and scripts stripped out, and the fonts are read from the Google Fonts addresses the page loads. On a site with several pages, every page is checked and a failure names the page it's on. For an app, which writes most of its words from its own script, the text check reads the code too, and the link check is skipped because apps handle their own navigation.
Where it applies
- At publish. The server runs the gate after the security checks. Any failure refuses the publish and lists each failed check, from the builder, the CLI or an assistant over MCP alike.
- Before you press Publish. The release checklist runs the same gate after every build and change, and shows what's missing.
- Inside app builds. When the model writes an app, the gate is part of what it must fix: anything failing goes back to the model for one repair pass before the app is shown, and later polish passes are dropped if they make any check worse.
False positives and how to read them
Pattern rules have edges, and it's better to know them than to be surprised:
- Real words that match. A games shop that sells next-gen consoles will hit the stock-phrase rule. Rephrase ("current-generation consoles") rather than fight it.
- A real purple brand. The gradient rule looks for purple tones inside a gradient, not for purple in general. A flat purple button passes.
- An honest serif. The rule is strict: any serif fallback fails, even a deliberate one. Anticode's seven design systems are all sans-serif, so this only appears when a font was asked for by name.
- Back-to-top links. A link to
#topis fine; only a bare#with nothing after it fails.
Limits
- It can't be switched off. There's no override for a single page or project.
- Basics, not good design. A page can pass all twelve and still be dull. The Critic's other checks, and your own eye, cover the rest; the guide to making an AI website look professional is a good next read.
- Not a full accessibility audit. It checks a handful of essentials. Colour contrast, heading order and link text need more than this, as the guide to AI website accessibility explains.
Questions people ask
Why can't I publish when the Report tab looked fine?
The Report tab shows the Critic's advice. The gate checks a slightly different set, including accessibility basics. Open the release checklist to see exactly which rule failed.
Does the design gate run on apps?
Yes, all but the link check. App builds are also repaired against it before you see them.
Is alt="" allowed?
Yes. An empty alt tells screen readers an image is decoration. The check only fails an image with no alt attribute at all.