NodlumeArctic Ice — a shadcn/ui theme for Tailwind v4
Clinical blues and white for medical, enterprise, and compliance UIs.
Arctic Ice is the palette of trust: a clear medical blue, an icy secondary, and neutrals so cool they are almost white. It is the right register for patient portals, enterprise admin tools, and any interface that needs to look audited.
IBM Plex Sans and Plex Mono are the type — a family designed for exactly this kind of institutional software, with a mono that makes identifiers and codes unambiguous. Radii and shadows are conservative on purpose; this theme should never read as playful.
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 | #1e3148 | #6890c0 |
| secondary | #446a8e | #648db5 |
| accent | #87b0c5 | #87b0c5 |
| background | #e8f6fa | #071c22 |
| surface | #d7eff6 | #0c2d36 |
| text | #111e22 | #f1f7f8 |
| muted | #56838f | #24373d |
| border | #cedde1 | #476c75 |
Typography
IBM Plex Sans for headings, IBM Plex Serif for body copy and IBM Plex Mono for code, on a 16px base with a 1.2 modular ratio.
Shape and elevation
A 0.375rem 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.
/* Arctic Ice — Tailwind v4 theme (generated from the styling step) */
@import "tailwindcss";
@theme {
--color-primary: #1e3148;
--color-secondary: #446a8e;
--color-accent: #87b0c5;
--color-background: #e8f6fa;
--color-surface: #d7eff6;
--color-text: #111e22;
--color-muted: #56838f;
--color-border: #cedde1;
--color-primary-foreground: #e8f6fa;
--color-secondary-foreground: #111e22;
--color-accent-foreground: #111e22;
--color-destructive: oklch(0.577 0.245 27.325);
--color-chart-1: #1e3148;
--color-chart-2: #446a8e;
--color-chart-3: #87b0c5;
--color-chart-4: #56838f;
--color-chart-5: #cedde1;
--color-sidebar: #d7eff6;
--color-sidebar-foreground: #111e22;
--color-sidebar-primary: #1e3148;
--color-sidebar-primary-foreground: #e8f6fa;
--color-sidebar-accent: #87b0c5;
--color-sidebar-accent-foreground: #111e22;
--color-sidebar-border: #cedde1;
--color-sidebar-ring: #1e3148;
--font-heading: 'IBM Plex Sans', 'Segoe UI', sans-serif;
--font-body: 'IBM Plex Serif', Georgia, serif;
--font-mono: 'IBM Plex Mono', Consolas, monospace;
--radius-sm: calc(0.375rem * 0.5);
--radius-md: 0.375rem;
--radius-lg: calc(0.375rem * 1.5);
--radius-xl: calc(0.375rem * 2);
--text-xs: 0.6875rem;
--text-sm: 0.84375rem;
--text-base: 1rem;
--text-lg: 1.1875rem;
--text-xl: 1.4375rem;
--text-2xl: 1.71875rem;
--text-3xl: 2.0625rem;
--text-4xl: 2.5rem;
--shadow-sm: 0 0.667px 1.333px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-lg: 0 1.5px 3px 0 rgba(0, 0, 0, 0.05);
--shadow-xl: 0 2.25px 4.5px 0 rgba(0, 0, 0, 0.05);
--scrollbar-size: 10px;
--scrollbar-radius: 999px;
--scrollbar-track: transparent;
--scrollbar-thumb: #cedde1;
--scrollbar-thumb-hover: #1e3148;
--scrollbar-thumb-border: #e8f6fa;
--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/arctic-ice */
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