Aurora Lagoon
Deep teal structure and mint highlights make this useful for product dashboards, B2B landing pages, and account areas.
Eight semantic colors
Click any swatch to copy its exact HEX value.
Measured text contrast
Scores use WCAG 2.x relative luminance. Check all interactive states and surrounding content in your final product.
Preview it in context
Try this full theme on four realistic sample products. Switch between previews and desktop or mobile widths.
Make room
for better
ideas.
We shape distinctive brands and digital experiences with thoughtful design and a human point of view.
Creative by design — Est. 2026
01 03attention ↗
More meaning.
A visual language built for the things people actually use.
Where it works best
Product dashboards, analytics tools and client portals. A cool SaaS palette with bright action colors and calm surfaces. A useful design system makes the important actions stand out while supporting long passages, empty states, cards and navigation.
What to customize first
Adjust mint or cyan accents before changing the dark background and readable text. Start with brand-facing accents, then recheck action labels against their backgrounds and muted text against the canvas.
When to choose another direction
Warm editorial publishing or intentionally airy lifestyle sites. Changing the color of every role usually creates more work than selecting an initially compatible foundation.
Implementation guide for Aurora Lagoon
Map these values to the eight semantic roles rather than copying colors onto random elements. Use background for the page, surface for cards, text for primary copy, muted for secondary labels, border for dividers, primary for calls to action, secondary for supporting elements and accent only when attention is deserved. Test focus, hover, error and success states separately because this starter palette does not dictate those states.
:root {
--theme-background: #07161F;
--theme-surface: #112633;
--theme-text: #EEFBF7;
--theme-muted: #97B9BB;
--theme-primary: #5DE2B1;
--theme-secondary: #39C0DF;
--theme-accent: #FFD166;
--theme-border: #295065;
--theme-on-primary: #111827;
}