Using designtoken.md with Google Stitch
Google Stitch generates a design.md file with ~30 lines of color names, font choices, and basic layout descriptions. That's a great starting point, but your agent can do much more with richer context. Here's how to supercharge Stitch's design system with full token definitions from designtoken.md.
Generate your tokens
Head to the designtoken.md generator and configure a token set that matches your Stitch project's visual direction:
- Go to designtoken.md/generator
- Pick your colors, typography, and spacing preferences
- Switch to the designtoken.md tab in the output panel
- Click Copy to copy the full token file
Open Stitch's design system panel
Inside your Google Stitch project:
- Open the Design System tool from the toolbar
- Navigate to the design.md tab
- You'll see Stitch's default ~30 lines of design description: color names, font choices, and a brief layout paragraph
Replace with richer tokens
Swap out Stitch's default content for your full designtoken.md output:
- Select all the content in Stitch's design.md tab
- Paste the designtoken.md content you copied
- Stitch now has access to full 50–900 color scales, a 9-level type scale, spacing definitions, shadow scales, and component tokens, instead of just a handful of color names and font choices
What changes
See the difference between Stitch's default design.md and what you get with designtoken.md:
# Design Tokens
## Colors
Primary: #4A7C59
Secondary: #C2785C
Background: #FAFAF9
## Typography
Heading: Plus Jakarta Sans
Body: Inter, 16px# designtoken.md
## Color Palette
### Primary
- **50:** #F0F7F2
- **100:** #D4E8D9
- **200:** #B0D4B8
- **500:** #4A7C59 ← base
- **700:** #30503A
- **900:** #18261D
## Typography Scale
| Level | Size | Weight | LH | LS |
|---------|------|--------|-----|---------|
| display | 48px | 800 | 1.1 | -0.03em |
| body | 16px | 400 | 1.6 | 0 |
... + spacing, radius, shadows, componentsWith richer tokens, Stitch's agent gets deterministic values for every design decision (full color scales, precise typography rules, spacing, elevation, and component definitions) instead of interpreting a handful of descriptive lines.
Best practices
- Keep Stitch's visual theme description at the top if you want. It gives the agent creative context. Paste the designtoken.md content below it for structured token values.
- Regenerate tokens whenever you change your Stitch theme so the two stay in sync.
- The designtoken.md format is designed for deterministic parsing. Stitch's agent will read the structured headings and tables directly.
- For even richer context, use the JSON tab from the generator and paste
tokens.jsonalongside the markdown. - If you find yourself using the same tokens across multiple projects, turn them into a reusable design skill on skill.design so your agent can install your design preferences as a package.
Static token files, whether design.md or designtoken.md, give your agent vocabulary. For runtime token resolution, brand guardrails, and composition intelligence at production scale, explore Designless Studio.