# Rosemary, made readable by agents

- Client: This site
- Years: 2026
- Categories: [systems] [ai]
- Role: Everything, from the tokens and components to the agent guidance and the eval
- Access: open
- Markdown: /ai/showcase/rosemary.md
- Human: /rosemary

## Project

Rosemary is the design system this site is built on. I wrote it for the people and the AI agents who build with it, then measured whether the agents follow it.

## Evidence

- Guidance: The project's agent instructions tell Claude which tokens, text styles, motion, layers and components to use, and what to do when something is missing.

- Check: A script flags any color, font size, spacing, radius, motion or z-index value that bypasses a token, and the site will not build until every one is fixed.

- Eval: I gave Claude 9 everyday requests, such as a filter, a dialog and a newsletter sign-up. Each one was built by a fresh Claude agent in its own copy of the site, once with the Rosemary guidance removed and once with it in place.

- Result: Off-system values fell from 6.3 to 0.0 per 100 CSS declarations. The agent used the right Rosemary component in 27 of 27 runs with the guidance and 9 of 27 without it. The site still built after 27 of 27 runs with the guidance and 26 of 27 without it.

- Method: Each task ran three times in each version with Claude Sonnet, and the same check scored both. I dropped a tenth task because the site already did what it asked. I built the eval with Claude Code.

## Related projects

- [CityScout, from idea to enterprise](/ai/showcase/cityscout)
- [Theming at enterprise scale](/ai/showcase/theming-migration)