Visual & data

Visual quality gate

A hard spec — three colours, two fonts, an 8pt grid — and a pixel check before anything ships.

Paid $15 list, $12 until 2026-12-31 · one skill, yours for good. The outline, the steps and the file open after purchase.

Background

One sentence: aesthetics are constrained into existence, not thought into existence. Pin the rules down first, find the reference first, and accept with pixels and a checklist at the end.

Why it is built this way

The six steps are ordered so every constraint exists as a number before any pixel is drawn. S1 fixes the final pixel size against the platform table, S2 writes the Spec down as colours ≤3, typefaces ≤2, an 8pt grid, ≤5 type sizes and one focal point, S3 names the single thing borrowed from the reference. S4 then forbids adding a fourth colour mid-way. A spec written after production is a description of what happened, and nothing downstream can veto against it.

Acceptance is split into machine axes and judgement axes on purpose. aesthetic_score.py computes focus, tonal range, subject-ground contrast, colour relationships and restraint in detail; the five remaining axes need a written anchor per axis with evidence of at least six characters, and a missing axis returns exit code 2. Vetoes stay numeric because the eye negotiates with those: 4.5:1 body contrast, three dominant colours, 900x383. --allow-bleed exists so a full-bleed photograph drops edge crowding from FAIL to WARN.

Where it bites

• A fourth colour arrives at revision A late revision adds one accent colour, and the palette quietly goes to four. The hard gate counts anything above three as a veto, black white and grey excluded, so the count gets caught by vqg_check.py rather than by a second look.
• Text pressed against the edge Copy laid to the bleed line loses a character row when the platform crops, and the card looks cramped on the phone. S5 measures crowding on all four edges, and --allow-bleed is the declared exception for photographic layouts, which still asks a human to confirm no text touches the edge.
• Bare numbers back in the renderer Someone hard-codes font(FONT_body, 17) and fill=(31,31,31) to get one card out the door, and the next batch drifts off the grid. --tokens-src scans the renderer for bare sizes, bare rgb tuples and bare hex, exempting (0,0,0) masks and inline token-ok comments.
• A judgement axis with no evidence Five axes get filled with numbers and no anchors because the deadline is close, and the total score becomes fiction. The rubric requires a score plus evidence of at least six characters per judgement axis, a missing axis exits 2, and a single axis below 2 or a total below 65 blocks release.

When to use it

An art-quality gate before delivery: pin down a Design Spec (≤3 colours / ≤2 typefaces / 8pt grid) → anchor a reference → pixel-level machine checks (dimensions, dominant colour count, whitespace, edge crowding, contrast, highlights / shadows / skin tone / grain) → list the '3 ugliest spots' and fix until they pass. Use when the user says 'this cover / interface looks bad', 'improve the look', 'the layout is messy', 'the colours are ugly', 'not premium enough', 'check it before delivery', or whenever any image, cover, card image, photograph, AI-generated image, PPT, docx or page needs an aesthetic acceptance check before delivery; also read references/style-cards.md first when you need to set a visual style direction for a piece of content. Not for the topic and the copy themselves.