Design system and components

Design tokens

Tokens are foundational values used across your design:

• Colors — primary, secondary, neutral, accent, and semantic colors (success, warning, error)
• Typography — font families, sizes, weights, and line heights
• Spacing — consistent scale (4px, 8px, 12px, 16px, and so on)
• Border radius — corner rounding values
• Shadows — elevation levels

Tokens are defined once and referenced everywhere. When you update a token, every component using it updates automatically.

Reusable components

Select a group of elements on the canvas and convert them to a component. The component editor lets you define:

• Variants — different states or styles (default, hover, active, disabled)
• Default properties — starting values for each instance
• Editable fields — which properties can be changed per instance

Drag components from the left panel onto the canvas. Each instance inherits the component definition but can override specific properties.

How the design system connects

The design system draws from Creative direction for foundational values and feeds into the Design canvas where components are used. When creative direction changes, the design system can be updated to cascade changes across every screen.

• For the canvas, read Design canvas.
• For brand values, read Creative direction.