Cobalt
A confident cobalt-blue SaaS theme: crisp slate neutrals, electric primary, and a dashboard-ready scale for data apps.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Inter carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Use the single blue primary for every action and focus state.
- •Keep data surfaces white/slate so charts carry the color.
Don't
- •Don't add a second brand hue.
- •Don't use pure black text on white.
- •Animate transform and opacity only; keep UI feedback under 250ms.
Hover to feel this theme's base transition.
Lucide · 1.75px stroke · 1rem. Outline icons with a consistent stroke width; size icons to match adjacent text and align them optically.
- Never use color as the only signal — pair it with text, an icon, or a shape.
- Every interactive element must be keyboard reachable and show a visible focus ring.
- Honor prefers-reduced-motion: reduce by disabling non-essential animation.
- Keep a logical heading order and give every form control a label.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.5rem |
| Padding | 0 1rem |
| Height | 2.5rem |
| Weight | 600 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 9999px |
| Padding | 0.15rem 0.55rem |
| Font size | 0.75rem |
| Weight | 600 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0.75rem |
| Padding | 1rem 1.25rem |
| Border | 1px solid var(--border) |
Always pair the color with an icon and a text label — never rely on color alone.
Form field
| Background | var(--background) |
| Border | 1px solid var(--input) |
| Radius | 0.5rem |
| Height | 2.5rem |
| Padding | 0.5rem 0.75rem |
Label sits above the field; helper or error text sits below.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 0.75rem |
| Padding | 1.25rem |
| Shadow | 0 8px 24px -6px rgba(15,23,42,0.12) |
The design brief
Cobalt is a cobalt-blue SaaS design system built for dashboards, admin panels, and B2B web apps. Slate neutrals keep dense data calm; a single electric-blue primary carries every action.
Principles
- One blue does all the work — actions, links, focus rings, active states.
- Slate greys, never pure black, so long sessions stay easy on the eyes.
- Generous borders and quiet surfaces let tables and charts lead.
When to use
Reach for Cobalt on analytics dashboards, SaaS settings screens, and B2B tools where trust and clarity matter. Skip it for playful consumer brands that want warmth.
Signature details
- Cobalt
#1d4ed8primary with a soft#dbeafeaccent wash. - Inter for UI, JetBrains Mono for metrics and code.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0.5rem;
--background: #ffffff;
--foreground: #0f172a;
--card: #ffffff;
--card-foreground: #0f172a;
--popover: #ffffff;
--popover-foreground: #0f172a;
--primary: #1d4ed8;
--primary-foreground: #ffffff;
--secondary: #f1f5f9;
--secondary-foreground: #0f172a;
--muted: #f1f5f9;
--muted-foreground: #475569;
--accent: #dbeafe;
--accent-foreground: #1e3a8a;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--border: #e2e8f0;
--input: #e2e8f0;
--ring: #1d4ed8;
--shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
--shadow-md: 0 8px 24px -6px rgba(15,23,42,0.12);
--shadow-lg: 0 24px 56px -12px rgba(15,23,42,0.18);
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: cubic-bezier(0.4,0,0.2,1);
--ease-emphasized: cubic-bezier(0.16,1,0.3,1);
--duration-base: 240ms;
}
.dark {
--background: #0a0f1e;
--foreground: #f1f5f9;
--card: #111827;
--card-foreground: #f1f5f9;
--popover: #111827;
--popover-foreground: #f1f5f9;
--primary: #60a5fa;
--primary-foreground: #0a0f1e;
--secondary: #1e293b;
--secondary-foreground: #f1f5f9;
--muted: #1e293b;
--muted-foreground: #94a3b8;
--accent: #1e3a8a;
--accent-foreground: #dbeafe;
--destructive: #f87171;
--destructive-foreground: #450a0a;
--border: #1e293b;
--input: #1e293b;
--ring: #60a5fa;
}More designs
Nocturne
Calm, dark-first SaaS theme with a single indigo accent.
Slate Pro
A neutral slate workhorse theme: balanced greys, restrained accent, built for dense SaaS interfaces that should disappear.
Mint Console
A fresh emerald analytics theme: clean whites, a green primary, and crisp type for metrics, monitoring, and growth dashboards.