Identity Forge
next / vite / remix

Sage Ledger

Sage Ledger distills a minimalist budgeting app aesthetic into a production-ready token system. It anchors on a deep olive-sage primary with a warm mustard accent, set against soft warm-neutral surfaces. The mood is calm, confident and editorial — ideal for personal finance, wealth and lifestyle products that want to feel organic rather than corporate.

Use this kitCustomize in StudioDownload DESIGN.md
sage
olive
mustard
finance
earthy
minimal
editorial

sageledger.com

SageLedger

Add your Budget Category

Track every transaction with a calm, earthy interface built for clarity and confidence.

Show MoreTokens

sageledger.com

SageLedger

Add your Budget Category

Track every transaction with a calm, earthy interface built for clarity and confidence.

Show MoreTokens

Exports

DESIGN.mdDTCG tokens JSONCSS variablesTailwind v3 configTailwind v4 themeshadcn registry JSONRegistry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F7F7EF"
    foreground: "#1F2118"
    card: "#FDFDF5"
    card-foreground: "#1F2118"
    popover: "#FDFDF5"
    popover-foreground: "#1F2118"
    primary: "#566248"
    primary-foreground: "#F7F7EF"
    secondary: "#E2E3D6"
    secondary-foreground: "#3A4030"
    muted: "#E8E8DC"
    muted-foreground: "#5C6152"
    accent: "#D4C14A"
    accent-foreground: "#2A2706"
    destructive: "#BA1A1A"
    destructive-foreground: "#FFFFFF"
    border: "#D3D4C4"
    input: "#D3D4C4"
    ring: "#566248"
    success: "#3A6A1D"
    success-foreground: "#FFFFFF"
    warning: "#B07D12"
    warning-foreground: "#000000"
    chart-1: "#566248"
    chart-2: "#D4C14A"
    chart-3: "#3A6A1D"
    chart-4: "#86907C"
    chart-5: "#6D6317"
typography:
  heading: { family: "Space Grotesk", weights: [400, 500, 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.375rem"
  md: "0.625rem"
  lg: "1rem"
  xl: "1.5rem"
components:
  button: { radius: "0.625rem", shape: "rounded", fill: "solid" }
  card: { radius: "1.5rem" }
  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=Space%20Grotesk:wght@400;500;700&family=Inter:wght@400;500;600;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");

:root {
  --radius: 1rem;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 60 33% 95%;
  --foreground: 73 16% 11%;
  --card: 60 67% 98%;
  --card-foreground: 73 16% 11%;
  --popover: 60 67% 98%;
  --popover-foreground: 73 16% 11%;
  --primary: 88 15% 33%;
  --primary-foreground: 60 33% 95%;
  --secondary: 65 19% 86%;
  --secondary-foreground: 83 14% 22%;
  --muted: 60 21% 89%;
  --muted-foreground: 80 8% 35%;
  --accent: 52 62% 56%;
  --accent-foreground: 55 75% 9%;
  --destructive: 0 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 64 16% 80%;
  --input: 64 16% 80%;
  --ring: 88 15% 33%;
  --success: 97 57% 26%;
  --success-foreground: 0 0% 100%;
  --warning: 41 81% 38%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 88 15% 33%;
  --chart-2: 52 62% 56%;
  --chart-3: 97 57% 26%;
  --chart-4: 90 8% 53%;
  --chart-5: 53 65% 26%;
  --shadow-sm: 0 1px 2px rgba(34,38,24,0.06);
  --shadow-md: 0 4px 12px rgba(34,38,24,0.08);
  --shadow-lg: 0 10px 28px rgba(34,38,24,0.10);
  --shadow-xl: 0 24px 56px rgba(34,38,24,0.14);
  --gradient-hero: linear-gradient(160deg, #e2e3d6 0%, #d4c14a 100%);
  --gradient-brand: linear-gradient(135deg, #566248 0%, #86907c 100%);
  --gradient-subtle: linear-gradient(180deg, #f7f7ef 0%, #e8e8dc 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.5rem;
  --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/sage-ledger.json

Tailwind v4

@theme inline {
  --font-heading: 'Space Grotesk', 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: 1rem;
  --radius-xl: 1.5rem;
  --radius-button: 0.625rem;
  --radius-card: 1.5rem;
  --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(34,38,24,0.06);
  --shadow-md: 0 4px 12px rgba(34,38,24,0.08);
  --shadow-lg: 0 10px 28px rgba(34,38,24,0.10);
  --shadow-xl: 0 24px 56px rgba(34,38,24,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, #e2e3d6 0%, #d4c14a 100%);
  --gradient-brand: linear-gradient(135deg, #566248 0%, #86907c 100%);
  --gradient-subtle: linear-gradient(180deg, #f7f7ef 0%, #e8e8dc 100%);
  --font-weight-heading: 600;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sage-ledger",
  "type": "registry:theme",
  "title": "Sage Ledger",
  "description": "An earthy, editorial finance kit pairing muted sage green with mustard gold for calm, premium budgeting interfaces.",
  "categories": [
    "sage",
    "olive",
    "mustard",
    "finance",
    "earthy",
    "minimal",
    "editorial"
  ],
  "cssVars": {