react / next / vite
Olive & Gold Goals
A restrained, premium design system built around a deep olive-green canvas and a warm vibrant gold accent. The mood is quiet and confident — flat surfaces, generous spacing, and minimal shadows that feel like a modern money or goal-tracking product. Light mode is a soft sage-tinted paper; dark mode is a near-black olive with sage and gold highlights.
olive
gold
fintech
editorial
calm
earthy
olivegoldgoals.com
OliveGold
Create and Track Your Goals
Set targets, watch your savings grow, and reach every milestone with calm clarity.
Start savingTokens
olivegoldgoals.com
OliveGold
Create and Track Your Goals
Set targets, watch your savings grow, and reach every milestone with calm clarity.
Start savingTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#F4F4EC"
foreground: "#1F231E"
card: "#FFFFFF"
card-foreground: "#1F231E"
popover: "#FFFFFF"
popover-foreground: "#1F231E"
primary: "#3A453E"
primary-foreground: "#F4F4EC"
secondary: "#DDE0D2"
secondary-foreground: "#2E3329"
muted: "#E8E9DF"
muted-foreground: "#585D52"
accent: "#DCBC56"
accent-foreground: "#2E2810"
destructive: "#BA1A1A"
destructive-foreground: "#FFFFFF"
border: "#D4D6C8"
input: "#D4D6C8"
ring: "#3A453E"
success: "#3C7A4E"
success-foreground: "#FFFFFF"
warning: "#CF971C"
warning-foreground: "#2E2810"
chart-1: "#3A453E"
chart-2: "#DCBC56"
chart-3: "#A49451"
chart-4: "#939985"
chart-5: "#4D6356"
typography:
heading: { family: "Sora", 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: "1rem"
container: "72rem"
radius:
sm: "0.375rem"
md: "0.625rem"
lg: "0.875rem"
xl: "1.25rem"
components:
button: { radius: "0.625rem", shape: "rounded", fill: "solid" }
card: { radius: "1.25rem" }
input: { radius: "0.625rem" }
badge: { radius: "0.625rem" }
borderWidth: "1px"shadcn CSS Variables
/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");
:root {
--radius: 0.875rem;
--font-heading: 'Sora', sans-serif;
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--background: 60 27% 94%;
--foreground: 108 8% 13%;
--card: 0 0% 100%;
--card-foreground: 108 8% 13%;
--popover: 0 0% 100%;
--popover-foreground: 108 8% 13%;
--primary: 142 9% 25%;
--primary-foreground: 60 27% 94%;
--secondary: 73 18% 85%;
--secondary-foreground: 90 11% 18%;
--muted: 66 19% 89%;
--muted-foreground: 87 6% 34%;
--accent: 46 66% 60%;
--accent-foreground: 48 48% 12%;
--destructive: 0 75% 42%;
--destructive-foreground: 0 0% 100%;
--border: 69 15% 81%;
--input: 69 15% 81%;
--ring: 142 9% 25%;
--success: 137 34% 36%;
--success-foreground: 0 0% 100%;
--warning: 41 76% 46%;
--warning-foreground: 48 48% 12%;
--chart-1: 142 9% 25%;
--chart-2: 46 66% 60%;
--chart-3: 48 34% 48%;
--chart-4: 78 9% 56%;
--chart-5: 145 13% 35%;
--shadow-sm: 0 1px 2px rgba(20,23,15,0.06);
--shadow-md: 0 2px 8px rgba(20,23,15,0.08);
--shadow-lg: 0 8px 24px rgba(20,23,15,0.10);
--shadow-xl: 0 16px 48px rgba(20,23,15,0.14);
--gradient-hero: linear-gradient(160deg,#3a453e 0%,#2c3128 60%,#14170f 100%);
--gradient-brand: linear-gradient(135deg,#dcbc56 0%,#a49451 100%);
--gradient-subtle: linear-gradient(180deg,#f4f4ec 0%,#e8e9df 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.625rem;
--card-radius: 1.25rem;
--input-radius: 0.625rem;
--badge-radius: 0.625rem;
--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/olive-gold-goals.jsonTailwind v4
@theme inline {
--font-heading: 'Sora', 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.375rem;
--radius-md: 0.625rem;
--radius-lg: 0.875rem;
--radius-xl: 1.25rem;
--radius-button: 0.625rem;
--radius-card: 1.25rem;
--radius-input: 0.625rem;
--radius-badge: 0.625rem;
--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(20,23,15,0.06);
--shadow-md: 0 2px 8px rgba(20,23,15,0.08);
--shadow-lg: 0 8px 24px rgba(20,23,15,0.10);
--shadow-xl: 0 16px 48px rgba(20,23,15,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,#3a453e 0%,#2c3128 60%,#14170f 100%);
--gradient-brand: linear-gradient(135deg,#dcbc56 0%,#a49451 100%);
--gradient-subtle: linear-gradient(180deg,#f4f4ec 0%,#e8e9df 100%);
--font-weight-heading: 600;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "olive-gold-goals",
"type": "registry:theme",
"title": "Olive & Gold Goals",
"description": "A calm, editorial fintech kit pairing deep olive green with warm gold, inspired by a savings-goals app.",
"categories": [
"olive",
"gold",
"fintech",
"editorial",
"calm",
"earthy"
],
"cssVars": {
"theme": {