Worked palette example
Aurora Lagoon: a dark foundation with focused mint and cyan actions.
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 →Start with the screens people use most
Do not begin by perfecting a splash screen. A settings page, list of records and empty state often expose more real color problems. Choose a page background and surface pair that organizes content. In a dark product, #07161F and #112633 are different enough to separate panels while avoiding a harsh pure-black canvas.
Treat hierarchy as a system
Primary text should remain reliably readable, muted labels should be quieter without disappearing, and primary actions should be unmistakable. Decide which action is primary before choosing a bright color. If “Save”, “Delete”, “Upgrade” and “Cancel” all receive the same emphasis, colors are no longer helping the user choose.
Use status colors as signals, not decoration
Success, error, warning and informational states need distinct meaning and a label or symbol in addition to color. Do not use red simply because it makes a card feel exciting if red also means an error elsewhere. The same principle applies to charts: distinguish adjacent series using line styles, labels or icons, not only hue.
Compare dark and light modes separately
Simply reversing foreground and background is rarely sufficient. Shadows behave differently against dark surfaces and bright accent saturation can feel overpowering. Build a separate semantic token map for each mode, test at realistic brightness and account for disabled controls, overlays and nested surfaces.
Export role-based tokens
Naming values --theme-text and --theme-surface produces a more maintainable application than scattering unrelated color literals across components. Review the contrast of text on background, text on cards, primary button labels and muted descriptions. Use the eight-role Theme Studio to generate the starting tokens and adjust them per screen.
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