[Documentation](https://fluxnative.app/docs) / Build your app

# Design tokens

Change brand colour, corners, spacing, type, typefaces or a whole direction in the Design tab, without spending a turn.

![The Design tab: brand colours, radius, density, type and typefaces, and the Light and Dark switch, beside the app's screens](https://fluxnative.app/guide-media/design-tokens.31adb5c1.webp)

Design changes brand, radius, density and type without a prompt; every change is a version.

## Steps

1. Open **Design** in the project panel (on a phone, **App** at the bottom, then **Design**).
2. Change a control. The preview updates and the change is saved as a version.
3. Use the Light/Dark switch to edit each scheme; it switches the preview too.
4. Take a change back from **Version history**, or with **Undo** after a direction.

## Controls

| Control | Changes |
| --- | --- |
| **Brand** | The palette's seed colour, plus the launch screen and Android adaptive icon background. |
| **Radius** | How rounded cards, buttons and fields are. |
| **Density** | Compact, Full or Spacious spacing. |
| **Type**, **Typeface** | The type scale, and the display and text fonts. |
| **Direction** | Brand, geometry and type together. Hand-picked colours reset unless you keep them. |
| **Colors** | Each colour role, for light and dark. |

## Good to know

- Text stays readable: a brand colour too light to read is used darker for buttons and links. A colour role you pick below WCAG AA (4.5:1 text, 3:1 buttons and icons) is flagged with its ratio.
- Controls are disabled while the assistant works.
- **No editable design tokens found in this project** means the theme was restructured: ask the assistant to restore the standard theme values.
- Anything else about the look belongs in a prompt.

## Related

[Write better prompts](https://fluxnative.app/docs/writing-prompts) · [App name and icon](https://fluxnative.app/docs/app-icon)

Previous: [App structure](https://fluxnative.app/docs/app-structure) · Next: [Edit the source](https://fluxnative.app/docs/edit-the-source)

---

Change brand colour, corners, spacing, type, typefaces or a whole direction in the Design tab, without spending a turn.

Page: https://fluxnative.app/docs/design-tokens