The Intent Layer

Foundations (raw constraints)

These are values that are available. They define the physics of the system.

• Spacing scale

• Sizing scale

• Type scale

• Color primitives

• Radii

Semantic tokens (purpose)

This is where systems gain language and stabilizes intent. This layer defines priority, hierarchy, contrast, state, and more.

• Assigns a role to to primitive values

• Defines affordances like action, surface, status, etc.

• Introduces naming structure tied to intent (standard, destructive, subtle, etc.)

• Enables theming without rework (hi dark mode)

Components (configuration)

This is where intent becomes structured and enforced. Most design systems start to fray at this layer because if it's not defined clearly, it will define itself later.

• Valid states

• Allowed values

• Variants to Typescript prop mapping

• Combination boundaries (what is allowed vs. not allowed)

Patterns (flow)

Most design systems stop at components. This layer defines how components behave together and where product logic meets system architecture.

• State aware behavior

• Validation flows

• Data dependancies

• Async handling

• Conditional rendering logic

• Interaction sequencing

These layers aren't just aesthetic, they're structural—structure is what determines if a product scales cleanly…or unravels slowly.