NodlumeMatcha Latte — a shadcn/ui theme for Tailwind v4
Soft greens and cream for organic, food, and wellness products.
Matcha Latte is the coffee-shop palette: a muted matcha primary, a creamy secondary, and warm neutrals that make white space feel like linen rather than a blank screen. It suits menus, booking flows, and any consumer product that wants to feel handmade.
Nunito's rounded terminals in the headings match the palette's softness, while Work Sans keeps body copy plainspoken and legible. A larger radius rounds every card and button, and the soft shadow adds a little lift without breaking the calm.
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 | #3b2f2f | #a08888 |
| secondary | #6b8e23 | #a4d247 |
| accent | #a9c25d | #acc463 |
| background | #f3efe0 | #1d1a0b |
| surface | #ede7d1 | #302913 |
| text | #201d13 | #f7f6f2 |
| muted | #877e5e | #393528 |
| border | #d8d5c8 | #6f684e |
Typography
Nunito for headings, Work Sans for body copy and ui-monospace for code, on a 16px base with a 1.25 modular ratio.
Shape and elevation
A 0.75rem 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.
/* Matcha Latte — Tailwind v4 theme (generated from the styling step) */
@import "tailwindcss";
@theme {
--color-primary: #3b2f2f;
--color-secondary: #6b8e23;
--color-accent: #a9c25d;
--color-background: #f3efe0;
--color-surface: #ede7d1;
--color-text: #201d13;
--color-muted: #877e5e;
--color-border: #d8d5c8;
--color-primary-foreground: #f3efe0;
--color-secondary-foreground: #201d13;
--color-accent-foreground: #201d13;
--color-destructive: oklch(0.577 0.245 27.325);
--color-chart-1: #3b2f2f;
--color-chart-2: #6b8e23;
--color-chart-3: #a9c25d;
--color-chart-4: #877e5e;
--color-chart-5: #d8d5c8;
--color-sidebar: #ede7d1;
--color-sidebar-foreground: #201d13;
--color-sidebar-primary: #3b2f2f;
--color-sidebar-primary-foreground: #f3efe0;
--color-sidebar-accent: #a9c25d;
--color-sidebar-accent-foreground: #201d13;
--color-sidebar-border: #d8d5c8;
--color-sidebar-ring: #3b2f2f;
--font-heading: Nunito, 'Trebuchet MS', sans-serif;
--font-body: 'Work Sans', 'Segoe UI', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, monospace;
--radius-sm: calc(0.75rem * 0.5);
--radius-md: 0.75rem;
--radius-lg: calc(0.75rem * 1.5);
--radius-xl: calc(0.75rem * 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: #d8d5c8;
--scrollbar-thumb-hover: #3b2f2f;
--scrollbar-thumb-border: #f3efe0;
--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/matcha-latte */
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