Getting started

Core philosophy

System.exe is built on three ideas. Understanding them makes the rest of the framework obvious.

1. Tokens should have a strict hierarchy

A token is only useful if it means something in context. System.exe enforces two tiers:

Primitive (raw values).

neutral-500, space-4. No semantic meaning, just the source of truth.
Semantic (intent).

background, text, faded, faded-text. These reference color primitives and describe what something is for, applied directly to components.

Semantic color tokens are what gets applied to components. Color primitives are reserved for decorative elements, illustrations, or one-off graphic design decisions that don't belong in the system. Spacing and typography primitives are applied directly to elements.

2. Typography should be derived, not decided

System.exe uses a fluid type scale built on musical intervals, with values rounded to clean integers. Each size step is clamped between a mobile minimum and a desktop maximum:

step	mobile	desktop
xs	12px / 0.75rem	12px / 0.75rem
sm	14px / 0.875rem	14px / 0.875rem
base	16px / 1rem	16px / 1rem
md	18px / 1.125rem	22px / 1.375rem
lg	20px / 1.25rem	28px / 1.75rem
xl	24px / 1.4375rem	38px / 2.375rem
2xl	26px / 1.625rem	50px / 3.125rem
3xl	30px / 1.8125rem	66px / 4.125rem
4xl	32px / 2rem	88px / 5.5rem
5xl	36px / 2.25rem	116px / 7.25rem
6xl	42px / 2.625rem	160px / 10rem

Each step in the scale is a multiple of the ratio. The result is a type system that feels intentional at every size, because it is. Heading roles (h1 - h6) and visual sizes (xs - 6xl) are separate. A heading's role defines document structure. Its size class defines how it looks. An h2 in a hero can be 6xl. The same h2 in a card can be 3xl. Both are semantically correct.