Tokens

Semantic tokens

Semantic tokens are intent-driven tokens that reference primitives. System.exe uses semantic tokens for color and typography.

Colors

Color semantic tokens have a base and dark value, enabling dark mode without touching any component.

Figure 2.3.0 Semantic color tokens

System.exe has three typography variable collections.

Typography

Font families, weights, line heights, and sizes (sm to 6xl).

Figure 2.3.0 Primitive typography tokens.
text-size (semantic)

Each size step is paired with the appropriate line height and letter spacing. Larger sizes get tighter line heights; smaller sizes get more breathing room.

Figure 2.3.0 Text sizes collection.
text-style (semantic)

Controls font family, weight, and style per size. Switch between primary and secondary mode via the variable mode dropdown in Webflow.

Figure 2.3.0 Text-style collection.

This makes it easier to maintain consistency when the same heading size needs two different styles across sections. For example, an h2 in one section uses normal style, while an h2 in another uses italic. Instead of overriding manually each time, just switch the mode.
Defaults

Headings and body text come pre-mapped out of the box:

Element Default size

h1 5xl
h2 4xl
h3 3xl
h4 2xl
h5 xl
h6 lg
p base