The design system docs people skipped now get read every time

Today's art direction

The Steering Docs

A design-system documentation site cut from petrol paper, where every section carries the date it was last true.

Design-system sites are the most web-native page a studio hands over: tabs across the top, foundations before components, a token table, a changelog. This one keeps that skeleton and gives it a cut-paper cover. Each section is stamped in the margin with the date of the source behind it, because the failure the lead story describes is documentation that goes stale without anyone noticing. The token table is the page reading its own stylesheet.

• Docs tabs
• Margin stamps
• Token table
• State specimen
• Instruction file
• Changelog entries
• Ruled baseline
• Cut-paper cover

One set of rules, every contributor snapped to it

Luke Wroblewski has watched design systems age for twenty years: a team builds one, the product moves on, and the documentation ends up describing a product that no longer exists. In a post on October 1 he argues that coding agents change the deal. When agents write most of the code, the design system becomes part of the steering layer, the context that keeps every site update on brand.

The case is ordinary team life. Marketing adds a landing page, engineering adds docs, a product manager tweaks pricing, and each of their agents brings its own colors, spacing, and voice unless something holds it to one system. So a design lead and a front-end lead define the grid, fonts, colors, spacing, and components once, and everyone's agents snap to them.

“Design teams have spent years trying to get people to actually read their design system documentation. Agents read it every single time.”

Luke Wroblewski, Design Systems for AI Agents

The docs page is built from the stylesheet

On Intent, one of Wroblewski's projects, colors, fonts, type sizes, the responsive grid, and light and dark themes live as design tokens in a single global stylesheet. An AGENTS.md file tells any agent to reuse those theme classes and CSS variables instead of restating a color or a grid value, and a design system page shows every token as a live example an agent can inspect.

Ask for a new button and the agent reuses the existing Button component, dark mode included, with nobody looking anything up. The page stays current because it renders from the same code as the site. The table below works the same way: each value is read from this issue's own stylesheet.

Change a value in the stylesheet and both the page and this table change with it. That is the property Wroblewski's projects rely on.

## Design system
- Colors, type sizes, spacing, and the grid live in styles/tokens.css.
- Reuse those CSS variables and theme classes. Never hard-code a hex value, font size, or breakpoint.
- New UI starts from an existing component in /components.
- Light and dark themes come from the tokens; no separate dark sheet.
- If a token you need is missing, stop and ask the design lead.

Figma first, then the code takes over

Intent's system started as Figma specs, translated into code through a Figma MCP connection. From then on the code was the source of truth, and it picked up a new body font, responsive layouts, and dark mode as the site grew. Agents can write changes back to the original Figma files, Wroblewski notes, but with the code in charge that has not been needed in practice.

Sol and Aria run the same setup, each with tokens, agent instructions, and a design system page built from the site's code. For a studio handing a site to a client team, that is a handoff the client's tools will actually follow.

Changelog

1. Sep 29, 2026Webflow

   Search you design on the canvas, synced from the CMS

   The Algolia Search and Sync app lets you add refinement lists, range filters, toggles, sorting, and Algolia Recommend units to elements you design in Webflow. Pick a CMS collection, map its fields to an Algolia index, and published changes sync without custom code.

2. Oct 1, 2026Framer

   Firewall routes visitors by country and path

   Framer's Firewall redirects or blocks visitors by country, by the path they request, or both, which includes sending a visitor to the right locale on a localized site. Rules live in Site Settings under Hosting, and it needs the Advanced Hosting add-on or an Enterprise plan.

Borrow this: render the docs from the tokens

Build the client's design system page from the same stylesheet the site uses, and print each token beside its live value. The page cannot drift from the site, and it is the first file to point a contributor's agent at.

Where

Any site more than one person, or one person's agents, will edit after launch: marketing sites, docs, product pages.

How

One tokens file of CSS custom properties. A docs page whose swatches and specimens use var() and read values with getComputedStyle. One AGENTS.md line pointing to both.

Keep it honest

No hard-coded values anywhere else. A missing token is a question for the design lead, never something an agent invents.

Prompt Lab

Build a public design system documentation site for a brand as a production landing page, dark petrol-teal, with a cut-paper cover.

Layout: a 64px site bar (brand left, three text links right), then a one-line folio masthead across the full width in small uppercase mono (issue or version number, date, reading time) between hairlines. The hero is full-bleed, 600 to 780px tall: an overhead photograph of a cut-paper collage (swatch chips, circles, and strips snapped to a strict grid) anchored right, with a left-to-right scrim of the ground color holding a 600px text column on the left: mono kicker, a 72px glyphic serif headline capped at 13ch, a two-sentence deck, one coral button, and one text link. Under the hero, a sticky row of docs tabs as anchor links (Overview, Foundations, Tokens, Components, Changelog, Prompt, Sources) on a panel band; the current section's tab gets a 2px coral underline and aria-current as you scroll, and on mobile the row scrolls sideways with a fade at the right edge.

Body: a two-column grid, a 200px margin column and a content column with 68ch paragraphs, over faint horizontal ruled lines every 32px. Every section carries a dated margin stamp that sticks while its section scrolls: a 2px coral top rule, the section role as a bold uppercase mono label, the date in soft coral at 16px, and the source in muted mono, beside a 40px serif h2. No section goes undated. On mobile the stamp becomes one line above the h2. Every block in the content column shares one right edge. The signature component is a token table generated from the page's own :root custom properties: specimen (color chip, "Aa" type sample, or a radius bar), token name, live value read with getComputedStyle, and what it is used for. Also include: a component state specimen (default, hover, focus of the real button, with the tokens it uses listed underneath), an example AGENTS.md block in mono, changelog entries with a date and a filled vendor label in the margin column, a pattern block of a square image crop beside three labelled rule rows, and a prompt block whose numbered usage steps and copy button stick beside the prompt.

Palette: ground #0B2B31, panel #10373E, bone ink #ECEFE8, pistachio #9DBFB6 for labels, coral #EE7451 for the button and rules, soft coral #F5A68C for italic and small coral text. Type: Marcellus for display, Schibsted Grotesk for body, Geist Mono for stamps, labels, and code.

Guardrails: body 19px with 1.7 line height and 60 to 75 character lines; small labels at WCAG AA against their real surface; radius 4 to 12px, no pill shapes; one tight shadow on the token table only; no gradients beyond the hero scrim, no glow, no neon; no readable text in images; hover and focus states on every link and button; a prefers-reduced-motion guard.

Works in Claude Code, Lovable, v0, Webflow, or Beaver Builder AI.

Field note

For a freelancer, the design system page was the deliverable a client rarely opened. If the client's team now edits the site through agents, it becomes the most-read file in the handoff, so it is worth billing for.

Sources

1. Design Systems for AI AgentsLuke Wroblewski, October 1, 2026
2. Intent design systemIntent, live design system page
3. Sol designSol, live design system page
4. Aria design systemAria Networks, live design system page
5. The Algolia Search and Sync app is now availableWebflow Updates, September 29, 2026
6. FirewallFramer Updates, October 1, 2026