Cobalt Morning
A blue-dominant palette spanning from near-white cool blues to a deep cobalt velvet, with enough tonal variation to build a complete interface hierarchy from a single hue family. The cobalt-mist-muted is the palette entry point: an airy, barely-blue surface color that reads as a refreshed white alternative for application backgrounds. The azure-pearl-soft provides the next step down — visible but still light, appropriate for card surfaces, sidebar fills, or secondary containers. The cerulean-tone-soft is the palette's mid-value workhorse: saturated enough to read as deliberate blue without being heavy, suited to navigation elements, selected states, and section headings. The cobalt-velvet-clear is the concentrated payload of the palette — a rich, mid-dark blue with enough chroma to function as a primary action color or brand identifier without requiring the full saturation of a vivid. The sapphire-shadow-soft anchors the dark end: deep, slightly desaturated, useful for text, dark headers, or near-neutral dark fills. This palette avoids the cold, corporate feeling of a generic blue system by ranging from warm-white entry tones to blue-dominant but not harsh midpoints. Use it for productivity software, professional service dashboards, or technology products where calm focus and quiet authority are the primary emotional goals.
This palette works because it builds a complete tonal range from a single blue-cobalt region of the spectrum rather than mixing multiple hue families. The result is cohesive without being monotonous — each entry is distinguishable by lightness while the family relationship is always evident. Assign roles clearly: cobalt-mist-muted for backgrounds, azure-pearl-soft for cards, cerulean-tone-soft for interactive elements, cobalt-velvet-clear for primary CTAs, sapphire-shadow-soft for body text and deep fills. In dark mode, reverse the weight: sapphire-shadow-soft becomes the background, cobalt-velvet-clear the elevated surface, and cerulean-tone-soft the interactive accent.
Cool cobalt and sapphire blues in a range from pale mist to deep velvet — for productivity tools, SaaS dashboards, and focus-oriented product UI.
Palette
Each swatch links back to its individual archive detail page.
Collections should do more than group swatches. Each one should read like a usable design direction with a clear emotional lane and a real application surface.
This detail route is the missing layer between a generic palette gallery and a convincing design reference. It gives the set a specific point of view.
Ready-made tokens for Cobalt Morning
Palette packs extend these colors into Figma tokens, CSS variables, Tailwind config, and Procreate swatches — structured to drop directly into your project.
From one collection to a full pack
This collection proves the taste and color direction. The related packs add more collections, token exports, and usage guidance so the palette can move from reference to implementation.
| Layer | What you have here | What the related packs add |
|---|---|---|
| Scope | One curated five-color editorial direction. | More collections, broader token coverage, and a fuller working set. |
| Output | Visual palette, copyable CSS preview, and per-color archive pages. | Downloadable CSS, JSON, Tailwind, and pack-specific asset bundles. |
| Use case | Direction finding, inspiration, and public proof. | Real project handoff, implementation, and reusable product assets. |
