{"slug":"design-tokens","title":"Design tokens","summary":"The Design tab changes brand color, corner radius, density, type scale, typefaces, and whole directions without spending a turn. Each change is saved to the project source.","body":"Open **Design** in the project panel. Each control edits one value in the project's own theme files, so the change is an ordinary revision that the preview, the assistant, Code, and Export all see.\n\n## Controls\n\n| Control | Changes |\n| --- | --- |\n| **Brand** | The seed color the app's palette is built from. |\n| **Radius** | How rounded cards, buttons, and fields are. |\n| **Density** | Full or Compact spacing. |\n| **Type** | The type scale, when the theme offers more than one. |\n| **Typeface** | The display and text font families. |\n| **Direction** | A preset that sets brand, geometry, and type together. |\n\nControls are disabled while the assistant is working, so a manual change and a turn do not collide.\n\n## When a control is missing\n\nIf the assistant restructured the theme, a control whose value it cannot find is disabled rather than guessing. When nothing can be found, the tab says **No editable design tokens found in this project**. Ask the assistant to restore the standard theme values, or make the change with a prompt.\n\n**Direction** needs both typeface values in the theme. If they are missing, the control explains that and stays off rather than applying half a direction.\n\n## Beyond these controls\n\nAnything else about the look, such as a new card style or a different tab bar, belongs in a prompt. See [Write better prompts](/docs/writing-prompts).","sectionSlug":"build","sectionTitle":"Build your app","updatedAt":"2026-09-23T22:51:25.250Z","previous":{"slug":"app-structure","title":"App structure"},"next":{"slug":"edit-the-source","title":"Edit the source"}}