Customize to my Brand

Want to make the design system feel like your product? Good news—it’s built to flex. Customizing the system to match your brand is simple, fast, and doesn’t require reworking every component.

🟦 Our Default Color: Primary

Out of the box, all components are styled using a neutral, versatile Primary color. This acts as the base for buttons, links, focus states, and more.

But don’t worry—you’re not stuck with our brand blue.

✏️ How to Customize

To update the system to reflect your brand:

1. Add your scale to the Brand Collection

2. Head to the Alias Collection in the Variables panel

3. Look for the primary tokens

4. Swap those values with your own brand hex codes (e.g. #FF5733 for spicy orange 🔥)

5. Watch the system update across all mapped components—automatically

No need to dig through every button or input. Once your aliases are updated, everything downstream updates too.

🧠 Why Use Aliases?

Aliases keep your brand logic separate from raw values. That means:

• You can theme quickly without breaking consistency

• You can support multiple brands using different alias sets

• Designers and developers stay aligned across changes