Midnight Orbit
Dark navy layers and luminous coral and cyan accents deliver technical character without a generic purple-on-black look.
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
Startup launches, AI tools and developer products. A high-contrast tech theme for apps, startup launches, and tooling. A useful design system makes the important actions stand out while supporting long passages, empty states, cards and navigation.
What to customize first
Keep the navy structure while testing coral primary and cyan secondary shifts. Start with brand-facing accents, then recheck action labels against their backgrounds and muted text against the canvas.
When to choose another direction
Soft editorial layouts and brightly lit minimalist consumer products. Changing the color of every role usually creates more work than selecting an initially compatible foundation.
Implementation guide for Midnight Orbit
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: #07111F;
--theme-surface: #10203B;
--theme-text: #EDF4FF;
--theme-muted: #92A7C5;
--theme-primary: #FF8D5C;
--theme-secondary: #68D9E8;
--theme-accent: #FFD166;
--theme-border: #294064;
--theme-on-primary: #111827;
}