Nocturne
Calm, dark-first SaaS theme with a single indigo accent.
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
- •Let one indigo carry every primary action.
- •Keep long-session surfaces low-glare and high-contrast.
- •Use muted-foreground for secondary text.
Don't
- •Don't add a second accent color.
- •Don't use heavy shadows — keep depth subtle.
- •Don't drop contrast below AA on dark surfaces.
- •Keep transitions calm and quick — this is a focus tool.
- •Fade and slide a few pixels; avoid bounce.
Hover to feel this theme's base transition.
Lucide · 2px stroke · 1rem. Outline icons, 2px stroke, muted by default and primary when active.
- Pair every status color with a label or icon.
- Keep focus visible on the dark theme.
- Honor prefers-reduced-motion.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.625rem |
| Padding | 0.5rem 1rem |
| Height | 2.5rem |
| Weight | 600 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 0.469rem |
| Padding | 0.15rem 0.55rem |
| Font size | 0.75rem |
| Weight | 700 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0.938rem |
| 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.625rem |
| 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.9rem |
| Padding | 1.25rem |
| Shadow | 0 6px 20px -4px rgba(2,6,23,0.12) |
The design brief
Nocturne is a calm, dark-first theme for SaaS dashboards and tools people live in for hours.
Principles
- One accent, lots of calm. A single indigo carries every action; everything else stays quiet neutral.
- Readable in the dark. Foreground and muted steps hold AA contrast on the deep navy surfaces.
- Soft depth. Low-spread shadows and a medium radius keep it modern without noise.
When to use
Dashboards, admin panels, developer tools, and any product where focus and long sessions matter.
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.625rem;
--background: #ffffff;
--foreground: #0b1220;
--card: #ffffff;
--card-foreground: #0b1220;
--popover: #ffffff;
--popover-foreground: #0b1220;
--primary: #4f46e5;
--primary-foreground: #ffffff;
--secondary: #f1f5f9;
--secondary-foreground: #0b1220;
--muted: #f1f5f9;
--muted-foreground: #64748b;
--accent: #eef2ff;
--accent-foreground: #3730a3;
--destructive: #ef4444;
--border: #e2e8f0;
--input: #e2e8f0;
--ring: #6366f1;
--shadow-sm: 0 1px 2px rgba(2,6,23,0.06);
--shadow-md: 0 6px 20px -4px rgba(2,6,23,0.12);
--shadow-lg: 0 18px 40px -8px rgba(2,6,23,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: 220ms;
}
.dark {
--background: #0a0e1a;
--foreground: #e6e9f0;
--card: #111726;
--card-foreground: #e6e9f0;
--popover: #111726;
--popover-foreground: #e6e9f0;
--primary: #818cf8;
--primary-foreground: #0a0e1a;
--secondary: #1b2435;
--secondary-foreground: #cbd5e1;
--muted: #1b2435;
--muted-foreground: #94a3b8;
--accent: #1e293b;
--accent-foreground: #c7d2fe;
--destructive: #f87171;
--border: #22304a;
--input: #2a3650;
--ring: #6366f1;
}More designs
Brutalist
Loud neo-brutalist theme — hard edges, offset shadows.
Monolith
Pure-monochrome, dark-first UI for frontier products — black, white, and a precise gray ramp.
Aurora
Soft glassmorphic theme with violet glow.