Brand feel
Maintains contrast on dark surfaces without feeling harsh.
Theme Guide
Aurora Lagoon
A cool SaaS palette with bright action colors and calm surfaces.
Aurora Lagoon balances deep teal structure with mint highlights, making it a dependable starting point for product dashboards, B2B landing pages, and account areas.
- Best for product dashboards, analytics tools, and client portals.
- 17.29:1 text on background
- 10.17:1 primary button contrast
- Calm
- Precise
- Assured
Suggested application
Best for product dashboards, analytics tools, and client portals.
AAA AAA
background #07161f
surface #112633
text #eefbf7
muted #97b9bb
primary #5de2b1
secondary #39c0df
accent #ffd166
border #295065
Primary interface
Use the surface and border pair for cards, forms, and content blocks. The primary color should carry calls to action, while accent stays reserved for highlighted insight.
Interface benefit
Pairs action-oriented buttons with reassuring brand color.
Implementation note
Works well for graphs, badges, and dense interface layouts.
Where Aurora Lagoon works best
- Side navigation, sticky headers, and product chrome.
- Data cards, charts, and compact dashboard widgets.
- Status badges, filters, and table-heavy workspaces.
What to customize first
If you need a stronger brand signature, start by tuning the mint primary or cyan secondary while leaving the deep background and high-contrast text pairing stable.
When to pick another direction
Skip this direction if your project depends on a warm editorial tone or you want the interface to feel airy, lifestyle-focused, or intentionally soft.
Usage Notes
How to use Aurora Lagoon without losing clarity
Aurora Lagoon is designed as a practical starting point, not just a visual exercise. Best for product dashboards, analytics tools, and client portals. Aurora Lagoon balances deep teal structure with mint highlights, making it a dependable starting point for product dashboards, B2B landing pages, and account areas.
What the contrast scores tell you
The current text and background pairing lands at 17.29:1, which scores as AAA in this preview. The primary action color reaches 10.17:1 with its readable button text, which gives you a quick check on whether the main CTA is likely to stay clear when the palette moves into production.
Where to focus your first customizations
If you adapt this preset to match a brand, start with the primary, secondary, and accent roles first. Keep the background, surface, and text relationship stable until the base readability still feels solid, then test muted text, borders, hover states, and empty states before launch.
Quick implementation checklist
- Use background and surface colors to create clear separation between the canvas and cards.
- Reserve the accent color for emphasis so the interface still has hierarchy.
- Retest body text, buttons, and form controls after any brand-driven color changes.
- Check the theme in your real typography and spacing system before shipping it.
Export Tokens
CSS variables for Aurora Lagoon
Use this as a starting point in Astro, Tailwind, or any other frontend stack that accepts CSS custom properties.
:root {
--theme-bg: #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: #102033;
} Related Guides
Learn when this palette style makes sense
These pages explain the broader decisions behind palettes like Aurora Lagoon, so visitors can compare this theme against a real project need instead of only reacting to the swatches.
Product UI Guide
App Color Schemes for SaaS Products, Utilities, and Product-Led Teams
How to choose an app palette that keeps interfaces readable, makes actions obvious, and scales from onboarding to settings screens.
- Protect the neutral structure first so cards, forms, and layout regions stay easy to scan.
- Limit bright accents to actions, status signals, or selective highlights instead of spreading them everywhere.
Dashboard Color Palettes for Analytics, Admin Panels, and Operations Teams
How to build a dashboard palette that keeps dense information legible while still feeling intentional and professional.
- Use background, surface, and border layers to organize the layout before adding stronger colors.
- Save color intensity for actions, critical states, or chart highlights instead of decoration.
Accessible Color Combinations for Interfaces, Buttons, and Long-Form Pages
Simple guidance for choosing color combinations that stay readable in real layouts rather than only looking good in a swatch row.
- Check body text, button text, form labels, and table values separately because they often fail in different places.
- Use muted colors deliberately; a polished palette can still be highly readable.
More Themes
Explore other directions
If this palette is close but not exact, the broader theme library gives you more routes to compare without leaving the same design vocabulary.