Worked palette example
Eight roles are built from relationships, not from eight random favorite shades.
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 →Background and surface organize space
The background fills the largest portion of the page. The surface belongs to cards, dialogs, panels and forms. These values may be close in brightness, but they should separate enough that information remains grouped. In a dark theme, a navy background and a slightly lighter blue surface usually look more composed than mixing unrelated dark hues.
Text and muted create reading order
Primary text needs strong contrast against the actual surface behind it. Muted text supports metadata and secondary descriptions without becoming invisible. Treat both as functional tokens and test them on all common background layers. A color that passes on the page background might fail when placed on a differently colored card.
Primary, secondary and accent carry different weight
Primary indicates the most important available action. Secondary supports additional interactions or illustrations. Accent adds selective emphasis to highlights, charts or promotional surfaces. When all three are equally bright in one small interface, none communicates priority. Keep accent restrained and choose each foreground color explicitly.
Border supports structure without visual noise
Borders, dividers and input outlines help separate groups and indicate affordances, but they need not dominate the design. In very light themes, a slightly cooler gray may create better organization than a harsh black rule. In dark themes, add just enough difference that fields and panels remain distinguishable.
Export roles, then extend the system deliberately
The eight roles are a base, not a full component library. A production app may additionally require hover, focus, selected, success, warning, destructive and disabled tokens. Start with the semantic generator, test the text/foreground pairs and add new roles only when they solve a distinct usage problem.
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