Cypress Design System

The Cypress design system is the system of:

• This documentation site with stories that document the behavior of components.
• Figma files that specify the behavior of components organized by initiative or location in the app.
• Design tokens (a special type of variables) that specify font size, line height, color, etc.
• Components that are pre-built to design system standards (eg. with accessibility review.)

Use the navigation to browse specific components and guides.

For AI agents

Agent-readable guidance is served as plain markdown. Start with the index at https://design.cypress.io/agents/index.md — it links to every principle, pillar, and component doc with absolute URLs. A full listing also lives at https://design.cypress.io/llms.txt.

Feedback welcome! Please open an issue.