Using Color Tokens in Your Project
This guide shows you how to update colors in your project (from the design tab section), making it easy to change colors in real-time while keeping your design consistent.
1. Open the Design Tab
Click the Design tab on the right panel of your canvas to access all styling options.
2. Select a Component or Element
Click the element whose color you want to update — this will activate the customization panel.
3. Search for an Existing Color
In the color section, you can browse or search for an existing color from your Design System. This helps maintain consistency with your established brand palette.
4. Switch Between Color Views
Use the toggle to view and select color variations (such as primary, secondary, hover, etc.).
5. Access the Custom Color Tab
If the existing palette doesn't match your needs, click on the Custom tab to define a new color.
6. Pick or Adjust the Color
Use the color picker or enter a HEX/RGB code to select your desired shade. Fine-tune hue, saturation, and brightness to achieve the perfect tone.
7. Enter Color Details
Click Add to save your custom color. Select the color palette from the dropdown or add a new palette by typing in the new name for the palette from the color palette dropdown field. Then give it a clear, descriptive name so it can be reused easily.
8. Add the Color to Your Design System
After naming, confirm that you want to add the new color to your Design System so it’s accessible across all projects.
9. Detach or Remove a Color
You can choose to detach a color if you don’t want it linked to the Design System or remove it entirely if it’s no longer needed.
✅ Benefits of Updating Colors in your Project
- Real-time Visual Updates: See color changes instantly on your canvas for better visual feedback.
- Design System Integration: New or modified colors can be pushed directly to your Design System for consistent reuse.
- Efficiency: No need to navigate away from the canvas — customize on the spot.
- Scalability: As your application grows, your Design System stays organized and aligned.
Updated 7 days ago