Token Layering

Primitive tokens hold raw values; semantic tokens map them to roles. Themes swap semantics.

How to apply it

Components reference --color-primary, never #3B82F6. Brand theme swaps the mapping.

Practise it on a real challenge

Design Tokens — one app, three brands

Your product ships under 3 brands. Each has its own color, type, radius.

More UX laws

• 60-30-10 Rule
• 8-pt Spacing Scale
• Accessible contrast
• Aesthetic-Usability Effect
• Alignment Principle
• Calibrated Trust