Wafel is the AppSignal design system. This website helps explain and document it.
The name is Dutch for waffle. The English word comes from it, and goes back to an Old High German word for honeycomb, from the same root as "weave". The design system weaves something for our developers, and ships stroopwafels to our users.
Canonical sources
The live appsignal-server repo is a reliable source of truth for the design system. It is the experience we ship to customers. This website scrapes CSS and React components from that repository whenever this website is rebuilt. You can see the most recent build date in the footer of every page.
Peer resources
The monorepo includes a Storybook for React controls, which we serve via Chromatic. While storys are reliable reflections of how the underlying control works, we do not have full Storybook coverage for components. When storys are available for a component in the canonical set, we include it.
We have a Figma library for the design system. For various reasons, we cannot automatically synchronize content from the canonical source (the monorepo) to Figma. As a result, Figma must be hand-maintained. To help with that, this website generates a Figma drift report which enumerates mismatches we discover.
Downstream consumers
Coding agents
Point your agent to llms.txt rather than the bare URL of the site. There exists an entire, terse, md-only, AI optimized shadow site. It's generated from the same data, but structured based on what has evaluated well.
How we evaluate Wafel with AI says what "evaluated well" means here - what the site does for that reader, how we test it, and what we have not measured.
Claude Design
Unlike Figma, Claude Design provides a programmatic way to push tokens into their design system structure. At present, we are not synchronizing tokens to Claude Design, but that is in the roadmap.
Other tools (paper.design)
For now, we recommend using the website with other AI-enabled design tools in the same way you would use it with a coding agent - by pointing to llms.txt. As we learn more about new products, we'll test and tune this site to serve them.
About this site
With the exception of component-detail pages, all pages on this site are hand-authored and stored in the design system website repo.
Refer to the colophon if you want to see all the details of how we gather and correlate data.
The coverage report counts every gap on this site and names the pages that have it.
This site also uses a handful of ordinary-looking words in ways you would not guess, mostly so the generated tables can be read. The glossary defines them.