Tokens

Overview

System.exe uses a two-tier token system for color, primitive and semantic. Spacing and typography primitives are applied directly to elements.

The two tiers

Primitive (Raw value)

No context, no meaning, just the source of truth. You define these once when you set up your project.

Figure 2.1.0 System.exe primitive tokens.
Semantic

Intent-driven tokens that reference primitives. These are what you apply to components.

Figure 2.1.0 System.exe semantic tokens.

The rule

Semantic tokens are what gets applied to components. Primitives are reserved for cases where a value has no semantic meaning, such as decorative elements, illustrations, or one-off graphic design decisions that don't belong in the system.

Dark mode

Semantic tokens have a base and dark value. You change the mode, the semantic tokens remap, your components don't change.

Token	Base	Dark
background	neutral/50	neutral/950
text	neutral/950	neutral/50
primary	blue/800	orange/400