Skip to content

Updated

Copy page

Design tokens

A design token is a named design decision, such as a color, a spacing step or a radius, stored once and read by design files and code alike. Changing the token changes every place that reads it.

Copy page

Updated

On this page
  1. In the kit
  2. Names
  3. In practice
  4. Related

In the kit

Where it appears in Appetite UI: Finance app, Dashboard. The theme switch shows the dark frame.

Dashboard393 x 852 each, Light and Dark
Finance app Dashboard screen: a blue header with a search field, Total balance $28,401.75, a plus $1,240.50 this month badge, Send, Receive, Pay and Top up buttons, and a Recent transactions list with Northwind Media, Halcyon Store, Salary and Reelbox rows above a tab barFinance app Dashboard screen in dark mode: a dark header with a search field, Total balance $28,401.75, a plus $1,240.50 this month badge, Send, Receive, Pay and Top up buttons, and a Recent transactions list with Northwind Media, Halcyon Store, Salary and Reelbox rows above a tab bar
Dashboard

What does each system call it?

The same idea under its Apple, Material 3 and Appetite UI name.

Names, system, name
SystemName
AppleNo token system in the HIG; colors and metrics are named system values
Material 3Design tokens, such as md.sys.color.primary
Appetite UIFigma variables in six collections, exported as DTCG

In practice

In Figma a token is a variable; in code it is a constant or a CSS custom property with the same name. The name carries the meaning, brand/base or dimensions/spacing/4, so a designer and a developer talk about the same thing.

Appetite UI keeps its tokens in one W3C DTCG source that exports to SwiftUI, Jetpack Compose, Flutter and CSS. The public /tokens.json holds the tokens the docs previews draw, with light and dark values and the code name on each platform.