Worked palette example
Rose Studio: brand personality supported by calm functional roles.
Colors here are examples, not an automatic accessibility certificate. Test every foreground/background pair before using these values for text.
Open this example in the eight-role Theme Studio →Distinguish brand swatches from interface roles
A logo may contain two vivid colors, but everyday UI still needs text, surface, background and border colors. Define semantic roles rather than assigning every possible component a separate palette. A practical minimum has eight: background, surface, text, muted, primary, secondary, accent and border.
Document how the primary color should be used
Say explicitly whether primary means the CTA fill, primary text link, or an icon accent; teams otherwise make inconsistent choices. Also specify the foreground color that belongs on a primary fill. Bright fills may require dark text. Do not assume that reversing white and black is enough to make a useful accessible mode.
Write down usage restrictions
Define what accent colors should not communicate. For example, if orange serves as a warning state, avoid using the same orange for ordinary decorative statistics unless there is a clear visual distinction. Specify allowed combinations and test them; an inventory of color codes alone is not a working design system.
Include development-ready outputs
Share CSS custom properties or Tailwind tokens that name roles consistently. Keeping the source values centralized reduces drift between marketing site, customer dashboard and mobile app. Include a reference preview and a short explanation of the key decisions so a future developer understands which values may be adjusted safely.
Validate with real content before shipping
Run color checks for body paragraphs, links, inputs, modals, banners and mobile navigation. Look at long headings and truncated labels, not only short demo cards. The Theme Studio gives you an initial eight-role model; the application team must still add and test hover, focus, disabled and feedback states.
Before you ship
Compare the colors against the actual design, verify small text and form states with the Contrast Checker, and export named tokens so future edits remain consistent. There is no palette that automatically makes every interface accessible.
Try it with real colors.
Explore a harmonious palette and see what your choices do in an interface.
Open color studio