Paper Design System
Read a live site, and write its system.
Input
A live website, davidprotein.com, opened in a real browser and read the way it renders.
davidprotein.com
home · 1440 + 375
product page · 1440
Output
A Paper design system: 52 tokens and a ten-section sheet, every value traced to the page.
David Protein Design System
52 tokens
51 measured · 1 authored
10 sections
25 Aug 2026
David Protein · --color-accent #FF6900
Output · the cover, davidprotein.com reconstructed as a system
The Challenge
A brand’s design system usually lives inside its website. The palette, the type scale and the button shapes are all real, but they are spread across a few hundred CSS rules and utility classes, where nobody can see them as a system.
The Solution
The skill measures the rendered page, not the source. It reads every computed style and the site’s own CSS variables, then rebuilds the system as Paper tokens and one sheet a designer can read, edit and build from.
02 · Colour, a black field and one campaign accent
Measured, then named
Every token keeps its provenance. 51 were measured off the rendered page, weighted by how much of it they paint, and one is the site’s own: the campaign orange it declares as --featured-color. The site sets that per product, with four values live today, so the sheet takes the current one and lists the rest.
03 · Typography, every substitution declared
Every substitution declared
Instrument Serif renders exactly. Suisse International and ABC Monument Grotesk Mono are licensed faces that are not installed here, so the sheet sets them in Helvetica Neue and DM Mono and says so on the page. Both real families were saved for a manual install.
04 · Buttons, every call to action a 46px pill
10 · Composition, the token set exercising itself
Skill Information
Paper Design System turns a live website into a design system on the Paper canvas. It opens the page in a real browser and reads what the browser renders: the computed style of every element, weighted by how much of the page each one covers, beside the site’s own CSS custom properties. Tailwind classes, CSS-in-JS and media queries all resolve to real values there, and none of them are legible in the stylesheet text.
From that harvest it distils the palette, the type scale, buttons with their states, cards, forms, radii, spacing and the page sections a designer would reuse. Every value goes into Paper’s own token store, and one design-system sheet lays them out to read, edit and build from.
On davidprotein.com, on 25 August 2026, it read the home page at 1440 and 375 and a product page at 1440: a black field with its inks split per ground, a serif display over a grotesque body and mono labels, every call to action a pill, flat cards with no shadows, and one campaign accent. Ten sections, 52 tokens.
It also collects the logo and the font files, and writes color-palette.json and typography.json in the format the Brand skill reads, so the next skill in the chain starts from the measured system rather than a guess.
From that harvest it distils the palette, the type scale, buttons with their states, cards, forms, radii, spacing and the page sections a designer would reuse. Every value goes into Paper’s own token store, and one design-system sheet lays them out to read, edit and build from.
On davidprotein.com, on 25 August 2026, it read the home page at 1440 and 375 and a product page at 1440: a black field with its inks split per ground, a serif display over a grotesque body and mono labels, every call to action a pill, flat cards with no shadows, and one campaign accent. Ten sections, 52 tokens.
It also collects the logo and the font files, and writes color-palette.json and typography.json in the format the Brand skill reads, so the next skill in the chain starts from the measured system rather than a guess.
Credits
BXRRY
Skill Design & Build:
John Barry
TOOLS
Agent:
Claude Code
Canvas:
Paper, through its MCP server
Measurement:
A live browser, read with getComputedStyle
THIS RUN
Site:
davidprotein.com
Measured:
25 August 2026
Output:
52 tokens and a ten-section sheet
Image credits spent:
None