Design System

Build scalable, maintainable design systems with tokens, components, and theming architecture.

Prerequisites

Before building a design system, check for existing design context:

• Read any design-context files for existing tokens, component conventions, or tech stack constraints.
• Identify the framework (React, Vue, Svelte, vanilla) to determine component patterns.

Step 1: Design Token Hierarchy

Tokens are the atomic values of a design system. Structure them in three layers:

Layer 1: Primitive Tokens (Raw Values)

Named by what they ARE. Never used directly in components.