Editing Your Design System

Adjust the colours

Each colour has a role — what it is for, rather than what it is. Edit them with the pickers or by typing a value.

Saving runs a contrast check and reports any combination that will be hard to read. Pay attention to it: a palette that looks striking in the picker can fail badly as small text on a tinted background.

Adjust spacing, borders and buttons

Spacing and border settings govern the rhythm of your pages — how much room sections have, how rounded things are, how heavy the lines.

Button styling has a live sample so you can see the result as you change it. Buttons are the most-clicked thing on your site and worth more attention than their share of the screen suggests.

Or describe the change you want

AI Design Edit takes an instruction in plain language — warmer palette, more contrast, rounder buttons — and adjusts the design system for you.

This is a charged action with its cost shown on the tab. Use it when you know the feeling you want but not the specific values.

Apply the change to pages you already built

This is the part worth knowing about.

When a page is built, its own styling is written at that moment from the design system as it then stood. Some of those values are copied into the page rather than referenced, so a later design system change can leave an older page partly on the old palette — which looks like the change half-worked.

Apply to existing pages fixes that. Review changes shows you exactly what would change, page by page, and what it would leave alone. Apply to pages then makes the change and republishes the live pages for you. Nothing is regenerated and there is no charge.

Check a page afterwards

Open a page that was built a while ago and compare it with a recent one. They should now agree.

Anything the review listed as left alone is a value with no equivalent in your design system — usually a tint or shade derived by hand when the page was built. Those stay as they are, and the review names them so you know where they are.