04 · Swatchbook: a free design-token peeper in riso print-shop style

Swatchbook is a working tool in a single HTML file. You drop in a screenshot or paste a stylesheet, and it gives back a palette, type scale, spacing, radii, shadows and motion as CSS variables, a Tailwind config, W3C tokens JSON, SCSS and a DESIGN.md brief. The thing that makes people stop is the loud print-shop look and the extraction moment: a pink scan bar sweeps the image, little coloured squares fly into their paint chips, and a fan of colour cards on the hero always shows the current palette.

Inspiration

Visual direction

References

Why these choices

Print-shop language fits a colour tool because chips, plates, proofs and registration are the real vocabulary of colour work. It is also deliberately light and loud, a counterpoint to the dark glossy sites elsewhere in the set.

The page is honest about its limits. A web page cannot read another site's styles, so the "Straight talk" box says the tool works from a screenshot or stylesheet text and points to CSS Peeper for point-and-click inspection. Screenshot mode cannot see fonts or spacing, and the exports say so in their own comments ("set by hand").

Everything runs locally in the browser, which is the right trade for a free tool: no server, no upload, nothing to host. The cost is a 1,400-line file that does colour science by hand. Extraction works on a downsampled copy (max 240px) so it stays quick. The halftone pauses when off screen or when the tab is hidden, caps pixel ratio at 1.5, and draws one frame under reduced motion. Roles are labelled "found" or "derived", so the tool does not pretend a guess is a fact.

Who this kind of site is for

The site style. It wins for studios, print and packaging businesses, colour and paint brands, design-adjacent SaaS, and any brand that wants to feel hand-made and confident. It is the wrong call for banks, clinics, legal or anything where loud and playful would cost trust, and for audiences who need a quiet, dense interface.

The tool itself. Designers and front-end developers use it to pull a starting palette and scale out of a competitor or client screenshot. Agencies doing redesign audits can run an old site's stylesheet through it and get a one-page inventory of every colour, font stack, size, radius and shadow, with usage counts. Anyone feeding a style brief to an AI coding tool can export DESIGN.md and paste it into the prompt. Non-designers can use the contrast cards to check whether a colour pairing is readable.

How to make it

Stack and key techniques

The prompt

Build "Swatchbook", a free design-token peeper, as ONE self-contained index.html (inline CSS and JS, no libraries, no build step; Google Fonts is the only allowed external request).

Concept: the user drops a screenshot or pastes a stylesheet and gets a usable design system back. State plainly on the page that a web page cannot read another live site's styles, so it works from a screenshot or stylesheet text, and point to the CSS Peeper extension for live inspection. Nothing leaves the browser. The preview UI uses a fictional app called Fernway.

Visual direction: light riso print-shop. Paper #F3ECDC, ink #141210, pink #FF48B0, cobalt #2440E6, sunflower #FFB511. Fonts: Dela Gothic One (display), Instrument Sans (body), Space Mono (values). 3px black rules, hard offset shadows, headlines printed twice with a second colour offset in multiply blend, halftone dots, crop and registration marks, tape strips, paper grain, a zigzag receipt edge. One overshoot easing curve for everything; tactile press states.

Layout: hero, tape marquee, then five numbered plates: 01 Input, 02 Contrast, 03 Tokens, 04 Press proof, 05 Export.

Signature moments (all required):
1. Hero: three-ink rotated halftone on canvas (yellow, pink, blue, multiply), driven by drifting blobs plus mouse position. Pause off-screen and when the tab is hidden. Beside it, a fan deck of paint-chip cards that always shows the current role colours.
2. Input: drag-drop, file picker, and Ctrl+V for images or CSS; three built-in sample screenshots drawn on canvas; a full-page "DROP IT" overlay on file drag. On load, a scan bar sweeps the image and coloured squares fly into their palette chips.
3. Palette extraction on a downsampled copy: histogram bins, OKLab, farthest-point seeding, k-means, mode-colour swatches so flat colours come back exact, merge near duplicates, detect the page background from the image edge.
4. Loupe eyedropper: hover for an 11x11 magnified grid with hex; click to pin and copy.
5. Flip chips: click copies hex and flips to show HEX, RGB, HSL, OKLCH.
6. CSS parser: resolve var(), read hex/rgb/hsl/oklch/oklab/named colours, report fonts, type sizes with a ratio estimate, spacing base, radii, shadows, durations and easings with usage counts.
7. Role guesser for background, surface, text, muted, border, accent, accent-2, each tagged found or derived, all editable.
8. WCAG contrast cards (AA large, AA, AAA stamps) that update on edit.
9. Press proof: a Fernway pricing page styled only from CSS custom properties fed by the tokens, with an "as found" and "flipped" theme.
10. Five exports with copy and download: CSS variables, Tailwind config, W3C tokens JSON, SCSS, DESIGN.md (plain-language rules for an AI coding tool, with measured contrast).

Constraints: responsive down to 360px, visible focus states, aria labels, prefers-reduced-motion support, no horizontal scroll, no console errors. Say honestly where screenshot mode cannot know fonts or spacing.

Verification loop: write a script that checks the sample CSS parses to the expected counts, the JSON export parses, the Tailwind export evaluates, and the CSS export loads in a CSSStyleSheet. Then screenshot desktop and mobile at 7 or more scroll stops, plus hover, flip and drag states. Read the screenshots, fix overlaps and dense areas, and repeat until clean.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so the table rests on Anthropic's model tiering and earlier-generation reviews, plus extrapolation.

Feature Opus 5.5 (likely outcome) Sonnet 5.5 (likely outcome)
Palette extraction (OKLab, seeding, k-means, mode swatches, edge background) Does fine. Likely gets the core right, since Opus 5.5 did well on agentic coding benchmarks Attempts it, likely simplifies: plain k-means on RGB, mean colours instead of mode swatches, so flat colours come back slightly muddy
CSS parser (block peeling, var() resolution, six colour formats) Does fine, with a small chance of edge-case gaps such as nested @media or oklab Attempts it with likely bugs: selectors read as declarations, or nested at-rules dropped
Five exporters with valid output Does fine. Valid Tailwind and tokens JSON are likely Attempts it with likely bugs, such as unquoted keys like 2xl or malformed shadow tokens in the JSON
Halftone hero, three rotated inks, mouse response Does fine, though the mobile density issue may need a pass Likely simplifies to one or two dot layers, or attempts it with muddy overlap
Scan bar plus flying particles Does fine, perhaps with less polished timing Likely attempts with timing bugs: particles aimed at stale chip positions after layout shifts
Flip chips, fan deck, staggered reveals Does fine Does fine on the flip, likely fewer layered touches
Loupe eyedropper Does fine Likely attempts with bugs: offset errors on scaled canvas or positioning near the top edge
Misregistered headlines, riso detail and polish Likely close to Fable, with occasional alignment slips Likely more template-like, with fewer rules, tapes and print marks

Overall (a judgment call): Opus 5.5 would likely keep roughly 85 to 95 percent of the visual impact and function in one pass. Sonnet 5.5 would likely keep roughly 65 to 80 percent, with the loss concentrated in extraction accuracy, parser edge cases and secondary motion. A screenshot feedback loop and a script check like the builder's 23 checks would likely close most of that gap for either model. Splitting the build (extraction and parser first, visuals second) would help Sonnet most.

← Previous reportNext report →