Skip to content

Updated

Copy page

Semantic tokens

A semantic token names a role, such as bg/weak-50 or text/strong-950, and points at a primitive token that holds the raw value. Components bind to the role, never to the primitive.

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, History. The theme switch shows the dark frame.

History393 x 852 each, Light and Dark
Finance app History screen: Day, Week, Month and Year tabs with Month selected, All, Income, Expense, Bills and Trading chips, and transactions grouped under Today, Yesterday and Earlier with the amount on the right of each rowFinance app History screen in dark mode: Day, Week, Month and Year tabs with Month selected, All, Income, Expense, Bills and Trading chips, and transactions grouped under Today, Yesterday and Earlier with the amount on the right of each row
History

What does each system call it?

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

Names, system, name
SystemName
AppleSemantic colors, such as label and systemBackground
Material 3Color roles, such as primary and surface-container
Appetite UIColor Tokens collection, roles such as brand/base and bg/weak-50

In practice

Primitives are the palette, colors/blue/500 and the rest, and they never change meaning. Semantic tokens are the decisions made with them, and a rebrand or a dark mode swaps which primitive each role points at.

In Appetite UI every component and screen binds to semantic tokens. The finance screens, for example, bind every solid fill and stroke to a semantic variable and leave none unbound, so the dark row of screens is the light layout with one mode changed.