FE-101TKNGate 02
Design Tokens
Boarding
Colors, spacing, typography, and layout expressed as tokens. Audit, constrain, align with design.
UI Foundations — Key Takeaways
Four areas, one principle: replace the continuum with a finite, named system.
- 01Colors
- A named palette — semantic over hex
- Less duplication, more intent
- Renames safe via tooling, not grep
- 02Spacing
- A finite ladder, not arbitrary numbers
- The parent owns the gap
- Components stay portable
- 03Typographystill exploring
- 40 sizes today — needs a real ladder
- Tokens bundle size + weight + line-height
- Designer-led, the next conversation
- 04Layouts
- Three patterns: fluid, capped fluid, fixed
- Shared container — no bespoke wrappers
- Pick a type and move on
A shared vocabulary between design and code — finite tokens, named primitives, predictable containers. The goal isn't fewer choices, it's fewer decisions per change.