Design system and components

The design system workspace

Open the design system workspace by clicking the Design System icon in the canvas toolbar. A panel opens with a sidebar listing every token category. Click a category to view and edit its values.

Token categories

• Colors — primary, secondary, neutral, accent, and semantic colors (success, warning, error). Each swatch shows a color picker and a hex input field for precise values.
• Typography — font families, sizes, weights, and line heights organized as named text styles.
• Spacing — consistent scale (4px, 8px, 12px, 16px, and so on) with visual previews.
• Border radius — corner rounding values with shape previews.
• Elevation — shadow levels from subtle to prominent.
• Motion — animation durations, easing curves, and transition presets.
• Layouts — grid and container definitions for consistent page structure.

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

Drift detection

If your screens use values that do not match the defined tokens, the workspace shows a drift warning banner. Click View drift to see which elements diverge, then choose to update the token or fix the element.

Component library

The Library view shows reusable components organized as visual cards. Browse available components, preview them, and drag them onto the canvas.

Creating 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

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.