Design Guidelines & Mathematics

Core geometric invariants, concentric mathematics, and typography rules that define Xenon.

1. Concentric Radius Geometry

Nested rounded surfaces must never use the same corner radius as their container. Doing so makes inner elements look optically alien and bloated. Xenon strictly enforces the concentric formula:

R_child = Math.max(0, R_parent - padding)

2. Discrete 7-Stop Radius Scale

Radii are not arbitrary numbers. They are bound to a strict 7-stop scale where controls and surfaces scale synchronously:

3. Typography & Weight Invariant

Xenon strictly bans font weights of 500 or higher. Hierarchy is conveyed through size scale, tracking, and optical tone, creating a refined, calm visual atmosphere.