NodlumeOcean Depths — a shadcn/ui theme for Tailwind v4
Deep navy and teal over cool neutrals — the SaaS default done properly.
Ocean Depths is the theme most product teams are reaching for when they type "professional" into a generator: a deep navy primary, a teal secondary that reads as interactive without shouting, and neutrals tinted toward the same blue so the grays belong to the palette instead of coming off a shelf.
The typography is Inter across heading and body, with hierarchy carried by weight and size alone — the invisible UI pairing, chosen because a finance or admin product wants the type to disappear behind the data. A quiet soft shadow and a 0.5rem radius keep cards and dialogs feeling like the shadcn/ui defaults, just recolored.
The eight color roles
Every shadcn/ui variable in the export derives from these eight. The dark values are not a second theme: they are the light roles with lightness moved, hue and saturation held, and each pair repaired until it meets its WCAG threshold.
| Role | Light | Dark |
|---|---|---|
| primary | #1a8bff | #2992ff |
| secondary | #1ab2ff | #1ab2ff |
| accent | #1aecff | #29edff |
| background | #011126 | #011228 |
| surface | #021a3a | #021d40 |
| text | #f3f5f6 | #f3f5f6 |
| muted | #94a3b8 | #272f3a |
| border | #273548 | #4a6387 |
Typography
Inter for headings, Inter for body copy and JetBrains Mono for code, on a 16px base with a 1.25 modular ratio.
Shape and elevation
A 0.5rem base radius derives the --radius-sm/md/lg/xl steps; the base shadow derives the four-step elevation scale.
Extended tokens
Foregrounds, destructive, a five-step chart ramp and the sidebar set are derived from the roles — exactly the variables a Tailwind v4 shadcn/ui project reads.
The exported globals.css
This is the stylesheet the generator downloads for this preset — a Tailwind v4 @theme block that any shadcn/ui project can replace its own app/globals.css with. Open the preset in the generator to change anything, preview it on a full landing page, and add the derived .dark block or the W3C design-tokens export.
/* Ocean Depths — Tailwind v4 theme (generated from the styling step) */
@import "tailwindcss";
@theme {
--color-primary: #1a8bff;
--color-secondary: #1ab2ff;
--color-accent: #1aecff;
--color-background: #011126;
--color-surface: #021a3a;
--color-text: #f3f5f6;
--color-muted: #94a3b8;
--color-border: #273548;
--color-primary-foreground: #011126;
--color-secondary-foreground: #f3f5f6;
--color-accent-foreground: #f3f5f6;
--color-destructive: oklch(0.577 0.245 27.325);
--color-chart-1: #1a8bff;
--color-chart-2: #1ab2ff;
--color-chart-3: #1aecff;
--color-chart-4: #94a3b8;
--color-chart-5: #273548;
--color-sidebar: #021a3a;
--color-sidebar-foreground: #f3f5f6;
--color-sidebar-primary: #1a8bff;
--color-sidebar-primary-foreground: #011126;
--color-sidebar-accent: #1aecff;
--color-sidebar-accent-foreground: #f3f5f6;
--color-sidebar-border: #273548;
--color-sidebar-ring: #1a8bff;
--font-heading: Inter, 'Segoe UI', sans-serif;
--font-body: Inter, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', Consolas, monospace;
--radius-sm: calc(0.5rem * 0.5);
--radius-md: 0.5rem;
--radius-lg: calc(0.5rem * 1.5);
--radius-xl: calc(0.5rem * 2);
--text-xs: 0.625rem;
--text-sm: 0.8125rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.5625rem;
--text-2xl: 1.96875rem;
--text-3xl: 2.4375rem;
--text-4xl: 3.0625rem;
--shadow-sm: 0 2.667px 4px -0.667px rgba(0, 0, 0, 0.1), 0 1.333px 2.667px -0.667px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 6px 9px -1.5px rgba(0, 0, 0, 0.1), 0 3px 6px -1.5px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 9px 13.5px -2.25px rgba(0, 0, 0, 0.1), 0 4.5px 9px -2.25px rgba(0, 0, 0, 0.06);
--scrollbar-size: 10px;
--scrollbar-radius: 999px;
--scrollbar-track: transparent;
--scrollbar-thumb: #273548;
--scrollbar-thumb-hover: #1a8bff;
--scrollbar-thumb-border: #011126;
--animate-marquee: marquee 25s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@layer base {
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dark { color-scheme: dark; }
html {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: var(--scrollbar-radius);
border: 2px solid var(--scrollbar-thumb-border);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
}
/* Generated with Nodlume — https://nodlume.dev/theme-generator/ocean-depths */
Make it yours
A preset is a starting point, not a decision. The shadcn/ui theme generator opens this one with every control live — swap the palette, try another of the 67 font pairings, tune the radius — and exports the result. For the thinking behind the roles, read how to build a semantic UI color palette; for how the whole system is generated, read generating custom themes.
Open in the theme generator