Cobalt Spectrum
The cobalt spectrum is a functional monochromatic system palette built for serious digital products. Rather than curating hue variety, it commits fully to cobalt blue across five perceptually spaced lightness levels: a near-white pale for backgrounds, a soft mid for surfaces and containers, the saturated core for interactive elements and brand moments, a deep velvet for text and secondary actions, and ink for maximum contrast. This palette architecture reflects how professional design systems actually work — most colors in a UI are the same hue at different intensities, with rare accent interventions from the broader palette. Cobalt-whisper-muted functions as the warm white substitute for surfaces and backgrounds, light enough to feel clean without reading as stark; cobalt-silk-soft provides the medium-light card and container surface, visually anchored in the hue family without competing with the interactive tier; cobalt-core-clear is the system's action color — saturated enough to attract attention, light enough to carry white text at AA compliance; cobalt-dusk-soft enters the darker register for secondary UI elements, navigation items, and supporting text; cobalt-ink-muted provides maximum contrast for primary typographic elements and the darkest surface in a dark-mode configuration.
Cobalt spectrum is a design system architect's palette, not an editorial or brand palette. It assumes that most layout decisions — color management, hierarchy, attention direction — will be made within the cobalt hue family, with external colors (error red, success green, warning amber) appearing as exception states only. Before implementing this as a full system, audit your product for color use: if your UI needs more than 4-5 distinct hue families to function, a monochromatic system will feel constraining. But for products that currently use 15+ ad-hoc colors, reducing to a disciplined cobalt spectrum often dramatically improves visual coherence. Photography and illustration direction should lean toward complementary warmth (amber, terracotta, cream tones) as the cobalt system's natural environmental contrast partner.
A five-step monochromatic cobalt scale — from whisper pale through deep ink — the complete system blue for professional digital products.
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 Spectrum
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. |