View, edit, and export

View the design system

Open the Design System panel to see the active design system for any screen. The panel shows the resolved tokens: colors, fonts, roundedness, spacing, and component patterns.

If the project has multiple design systems, the panel displays the one applied to the currently selected screen.

Set a default design system

To apply a design system to all future screens in a project, select it as the project default. New screens generated after this point will automatically inherit its tokens.

Existing screens are not retroactively updated. To bring them into alignment, apply the design system to them individually.

Edit via the Design System panel

The Design System panel supports direct edits to the active design system. Changes you make here update both the structured tokens and the DESIGN.md summary.

Editable properties include:

• Color palette: primary, secondary, tertiary, and neutral base colors
• Typography: headline, body, and label font families
• Roundedness: corner radius scale

For more granular changes (component guidelines, do’s and don’ts, or the overview narrative), edit the DESIGN.md markdown directly.

Export with your project

When you export a project, the DESIGN.md file is included in the zip alongside the generated screens. This gives downstream consumers (developers, other design tools, or other agents) a portable record of the design system.

The exported DESIGN.md is a standalone document. It doesn’t depend on Stitch to be useful.

Working outside Stitch?

The @google/design.md CLI validates any DESIGN.md file against the formal spec, checks WCAG contrast ratios, and exports tokens to Tailwind or W3C Design Token formats. It works with any DESIGN.md, whether it was generated by Stitch or written by hand.