The Colors tab holds global solid and gradient swatches for your project. Add or remove swatches and quick-apply them to the selected element.
Where: Left sidebar → Design System → Colors — Open the Design System panel
Key ideas
- Global swatches: Solid and gradient colors shared across the project.
- Quick-apply: Click a swatch to apply it to the current selection.
Steps
- Open Design System → Colors.
- Add a solid or gradient swatch.
- Select an element and click a swatch to apply.
Swatches versus variables
The Colors tab provides reusable solid/gradient swatches and quick application. Use named design-system variables when a color must remain semantically linked and update everywhere through a token.
Applying color
- Create a solid or gradient swatch.
- Select the intended element.
- Choose the exact property/layer when more than one fill, stroke, or text color exists.
- Apply the swatch and check states plus breakpoints.
Tips
- Name colors by role—surface, text, accent, danger—rather than by hue when they are part of a system.
- Check contrast for normal, hover, active, focus, disabled, and over-image states.
Troubleshooting
Changing a swatch does not update existing elements
A quick-applied swatch may have written a value rather than a durable semantic binding. Use a design-system variable for global propagation.