NodlumeForest Walk — a shadcn/ui theme for Tailwind v4
Mossy greens and bark for health, outdoors, and sustainability brands.
Forest Walk is the outdoors palette — a deep moss primary, a lighter fern secondary, and a bark-brown accent — with neutrals tinted green so even the page background feels like it has been outside. It suits wellness apps, conservation nonprofits, and outdoor retailers.
The Humanist Clean pairing puts calligraphic Gill Sans headings over Nunito's soft body: warm, approachable, never techy. A medium radius and soft shadow keep the interface friendly without going cartoonish.
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 | #68b178 | #72b681 |
| secondary | #64b476 | #64b476 |
| accent | #70a970 | #79af79 |
| background | #142117 | #0f1912 |
| surface | #1c2e20 | #19291d |
| text | #f4f6f4 | #f4f6f4 |
| muted | #9faca2 | #2d342f |
| border | #37463a | #536958 |
Typography
Gill Sans for headings, Nunito for body copy and ui-monospace 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.
/* Forest Walk — Tailwind v4 theme (generated from the styling step) */
@import "tailwindcss";
@theme {
--color-primary: #68b178;
--color-secondary: #64b476;
--color-accent: #70a970;
--color-background: #142117;
--color-surface: #1c2e20;
--color-text: #f4f6f4;
--color-muted: #9faca2;
--color-border: #37463a;
--color-primary-foreground: #142117;
--color-secondary-foreground: #f4f6f4;
--color-accent-foreground: #f4f6f4;
--color-destructive: oklch(0.577 0.245 27.325);
--color-chart-1: #68b178;
--color-chart-2: #64b476;
--color-chart-3: #70a970;
--color-chart-4: #9faca2;
--color-chart-5: #37463a;
--color-sidebar: #1c2e20;
--color-sidebar-foreground: #f4f6f4;
--color-sidebar-primary: #68b178;
--color-sidebar-primary-foreground: #142117;
--color-sidebar-accent: #70a970;
--color-sidebar-accent-foreground: #f4f6f4;
--color-sidebar-border: #37463a;
--color-sidebar-ring: #68b178;
--font-heading: 'Gill Sans', 'Trebuchet MS', sans-serif;
--font-body: Nunito, 'Trebuchet MS', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 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: #37463a;
--scrollbar-thumb-hover: #68b178;
--scrollbar-thumb-border: #142117;
--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/forest-walk */
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