react / next / tailwind
Sage & Citrus Glass
Inspired by a minimalist smart-home settings screen, this kit blends frosted sage-grey surfaces with a single punchy yellow highlight. The result feels quiet, modern and tactile — ideal for ambient utility apps, dashboards and lifestyle products that want personality without noise. Generous rounding and airy spacing reinforce the soft, editorial mood.
sage
citrus
glassmorphism
minimal
soft-ui
neutral
calm
sagecitrusglass.com
SageCitrus
Set the mood, softly
Calm sage surfaces with a single citrus spark — controls that feel as good as they look.
Adjust settingsTokens
sagecitrusglass.com
SageCitrus
Set the mood, softly
Calm sage surfaces with a single citrus spark — controls that feel as good as they look.
Adjust settingsTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#FBFCF7"
foreground: "#1A1C19"
card: "#EEF0E7"
card-foreground: "#1A1C19"
popover: "#FFFFFF"
popover-foreground: "#1A1C19"
primary: "#FBEC53"
primary-foreground: "#2C2A08"
secondary: "#DBE0D6"
secondary-foreground: "#2F3329"
muted: "#E7EAE0"
muted-foreground: "#5E635A"
accent: "#5B6F4F"
accent-foreground: "#FFFFFF"
destructive: "#BA1A1A"
destructive-foreground: "#FFFFFF"
border: "#D3D8CA"
input: "#D3D8CA"
ring: "#FBEC53"
success: "#3A7D33"
success-foreground: "#FFFFFF"
warning: "#B5860A"
warning-foreground: "#000000"
chart-1: "#FBEC53"
chart-2: "#A9C24A"
chart-3: "#5B6F4F"
chart-4: "#817603"
chart-5: "#C2C9BD"
typography:
heading: { family: "Inter", weights: [400, 500, 600, 700] }
body: { family: "Inter", weights: [400, 500, 600, 700] }
mono: { family: "JetBrains Mono", weights: [400, 500, 700] }
scale: "major-third"
spacing:
density: "relaxed"
base: "4px"
container: "1120px"
radius:
sm: "0.5rem"
md: "0.875rem"
lg: "1.25rem"
xl: "1.75rem"
components:
button: { radius: "0.875rem", shape: "rounded", fill: "solid" }
card: { radius: "1.75rem" }
input: { radius: "0.875rem" }
badge: { radius: "0.875rem" }
borderWidth: "1px"shadcn CSS Variables
/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");
:root {
--radius: 1.25rem;
--font-heading: 'Inter', sans-serif;
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--background: 72 45% 98%;
--foreground: 100 6% 10%;
--card: 73 23% 92%;
--card-foreground: 100 6% 10%;
--popover: 0 0% 100%;
--popover-foreground: 100 6% 10%;
--primary: 55 95% 65%;
--primary-foreground: 57 69% 10%;
--secondary: 90 14% 86%;
--secondary-foreground: 84 11% 18%;
--muted: 78 19% 90%;
--muted-foreground: 93 5% 37%;
--accent: 98 17% 37%;
--accent-foreground: 0 0% 100%;
--destructive: 0 75% 42%;
--destructive-foreground: 0 0% 100%;
--border: 81 15% 82%;
--input: 81 15% 82%;
--ring: 55 95% 65%;
--success: 114 42% 35%;
--success-foreground: 0 0% 100%;
--warning: 44 90% 37%;
--warning-foreground: 0 0% 0%;
--chart-1: 55 95% 65%;
--chart-2: 73 50% 53%;
--chart-3: 98 17% 37%;
--chart-4: 55 95% 26%;
--chart-5: 95 10% 76%;
--shadow-sm: 0 1px 2px rgba(40,45,35,0.05);
--shadow-md: 0 4px 12px rgba(40,45,35,0.08);
--shadow-lg: 0 12px 28px rgba(40,45,35,0.10);
--shadow-xl: 0 24px 48px rgba(40,45,35,0.14);
--gradient-hero: linear-gradient(160deg,#fbfcf7 0%,#e7eae0 60%,#dbe0d6 100%);
--gradient-brand: linear-gradient(135deg,#fbec53 0%,#a9c24a 100%);
--gradient-subtle: linear-gradient(180deg,#fbfcf7 0%,#eef0e7 100%);
--duration: 200ms;
--duration-slow: 400ms;
--ease: cubic-bezier(0.4,0,0.2,1);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--font-weight-heading: 600;
--font-weight-body: 400;
--button-radius: 0.875rem;
--card-radius: 1.75rem;
--input-radius: 0.875rem;
--badge-radius: 0.875rem;
--border-width: 1px;
--card-border-width: 1px;
--input-border-width: 1px;
--button-border-width: 1px;
--badge-border-width: 1px;
--heading-transform: none;Install Targets
Registry
/r/sage-citrus-glass.jsonTailwind v4
@theme inline {
--font-heading: 'Inter', sans-serif;
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-success: hsl(var(--success));
--color-success-foreground: hsl(var(--success-foreground));
--color-warning: hsl(var(--warning));
--color-warning-foreground: hsl(var(--warning-foreground));
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));
--radius-sm: 0.5rem;
--radius-md: 0.875rem;
--radius-lg: 1.25rem;
--radius-xl: 1.75rem;
--radius-button: 0.875rem;
--radius-card: 1.75rem;
--radius-input: 0.875rem;
--radius-badge: 0.875rem;
--border-width: 1px;
--card-border-width: 1px;
--input-border-width: 1px;
--button-border-width: 1px;
--badge-border-width: 1px;
--shadow-sm: 0 1px 2px rgba(40,45,35,0.05);
--shadow-md: 0 4px 12px rgba(40,45,35,0.08);
--shadow-lg: 0 12px 28px rgba(40,45,35,0.10);
--shadow-xl: 0 24px 48px rgba(40,45,35,0.14);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--ease-kit: cubic-bezier(0.4,0,0.2,1);
--duration-kit: 200ms;
--duration-kit-slow: 400ms;
--gradient-hero: linear-gradient(160deg,#fbfcf7 0%,#e7eae0 60%,#dbe0d6 100%);
--gradient-brand: linear-gradient(135deg,#fbec53 0%,#a9c24a 100%);
--gradient-subtle: linear-gradient(180deg,#fbfcf7 0%,#eef0e7 100%);
--font-weight-heading: 600;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "sage-citrus-glass",
"type": "registry:theme",
"title": "Sage & Citrus Glass",
"description": "A soft, glassmorphic design system pairing muted sage neutrals with a vibrant citrus-yellow accent for calm, focused product UIs.",
"categories": [
"sage",
"citrus",
"glassmorphism",
"minimal",
"soft-ui",
"neutral",
"calm"
],
"cssVars": {