For AI & LLMs

Coding agents build screens faster when they work from the design system instead of guessing. This site gives them the same information people read, in plain text.

Files for agentsCopy Anchor Link

These files are built from the same MDX that renders this site (design-system/content/docs), so they cannot fall out of date with it. Live examples appear on the site only; the Markdown keeps the code next to them.

Starting an agentCopy Anchor Link

Give the agent this before it writes any UI:

Before writing UI for this project, read /llms.txt and the pages it links that
match the task (always: Getting started, Colour, Typography, Writing, and the
components you will use). Use components from @/ui and tokens from the CSS
variables. Follow the rules in /llms.mdx/docs/ai/content.md. If something
you need is not in the design system, say so instead of inventing it.

Rules for agentsCopy Anchor Link

1. Import from @/ui. Never re-create a component that exists there, and never import from a component's folder.
2. Use tokens. var(--color-…), var(--spacing-…), var(--radius-…), var(--shadow-…). Do not write hex values, and do not invent token names: if it is not in Colour or Spacing, it does not exist.
3. Product palette only. Primary blue for actions, greys for structure, green, red and orange for status. Never purple for anything new.
4. Text is 14px or 12px in the interface. Titles use the type scale. Nothing below 12px.
5. Menus use the dropdown menu in @/components/shadcn/dropdown-menu with a Petavue Button as the trigger.
6. Icons are Phosphor, sized to the text: 14px next to 12px text, 16px next to 14px text.
7. One primary button per area. Everything else is secondary, secondaryGhost or ghost.
8. Copy follows Writing: sentence case, no exclamation marks, no taglines, no "powerful" or "seamless", no dashes joining a slogan to a claim.
9. Class names describe the thing (BEM: campaign-card__title). Tailwind is for page layout.
10. Do not edit shared components for a one-off. Style around them with a scoped class, and say what you changed.
11. Verify in the browser. Build, open the screen, check the console is clean, and look at it at 1440 and 1280 pixels wide.

Keeping this site currentCopy Anchor Link

• Tokens on the Foundations pages are read from src/ui/tokens/tokens.css, src/ui/colorography/tokens.css and src/ui/typography/typography.css. Change a token there and the site updates.
• Component pages are MDX files in design-system/content/docs/components, with live examples in design-system/app/live. When you change a component's props, update its page in the same change.
• A new page needs only an MDX file with title and description at the top, and its name in the folder's meta.json to set its place in the sidebar. It then appears in search, in /llms.txt and as Markdown automatically.