next.js / react / svelte

Emerald Schedule

Emerald Schedule makes the entire UI surface a signature vivid emerald green, with every element — text, borders, icons, dividers — rendered in soft blush pink directly on that surface. Drawn from a bold schedule/event-poster aesthetic, it uses oversized vertical rotated type as structural framing, hairline pink rules punctuated by 4-pointed sparkle stars, and an all-uppercase rounded grotesque to create a warm yet bold brand identity. No white cards, no neutral panels — the green IS the product canvas.

Use this kit Customize in Studio Download DESIGN.md

color-surface

editorial

bold

rounded

emerald

blush-pink

poster

schedule

event

retail

flat

two-color

emeraldschedule.com

EmeraldSched

THIS WEEK

Open Mon–Sat · 11AM – 6PM · Special Events Below

VIEW FULL SCHEDULETokens

emeraldschedule.com

EmeraldSched

THIS WEEK

Open Mon–Sat · 11AM – 6PM · Special Events Below

VIEW FULL SCHEDULETokens

Exports

DESIGN.md DTCG tokens JSON CSS variables Tailwind v3 config Tailwind v4 theme shadcn registry JSON Registry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#258963"
    foreground: "#000000"
    card: "#208760"
    card-foreground: "#000000"
    popover: "#1B7E5A"
    popover-foreground: "#FFFFFF"
    primary: "#FECEDB"
    primary-foreground: "#0F3D28"
    secondary: "#1D7D5C"
    secondary-foreground: "#FFFFFF"
    muted: "#1F8160"
    muted-foreground: "#FFFFFF"
    accent: "#FFE0EC"
    accent-foreground: "#0F3D28"
    destructive: "#E04444"
    destructive-foreground: "#000000"
    border: "#3D9E78"
    input: "#1E7E5C"
    ring: "#FECEDB"
    success: "#A8F0C6"
    success-foreground: "#0A3D22"
    warning: "#F5C842"
    warning-foreground: "#2A1800"
    chart-1: "#FECEDB"
    chart-2: "#A8F0C6"
    chart-3: "#F5C842"
    chart-4: "#A8D4F5"
    chart-5: "#F5A8C0"
  palette:
    - { name: "emerald-green", hex: "#258963", role: "surface-primary" }
    - { name: "blush-pink", hex: "#fecedb", role: "foreground-primary" }
    - { name: "deep-emerald", hex: "#208760", role: "surface-variant" }
    - { name: "forest-emerald", hex: "#1c855d", role: "surface-dark" }
    - { name: "mid-emerald", hex: "#298a65", role: "surface-variant" }
    - { name: "shadow-forest", hex: "#17835a", role: "surface-dark" }
    - { name: "light-blush", hex: "#ffd2e0", role: "accent-light" }
    - { name: "soft-blush", hex: "#ffe0ec", role: "accent" }
    - { name: "scored-green", hex: "#007745", role: "brand-scored" }
    - { name: "night-forest", hex: "#0d2a1c", role: "background-dark" }
    - { name: "deep-pine", hex: "#122518", role: "card-dark" }
    - { name: "success-mint", hex: "#a8f0c6", role: "success" }
    - { name: "vivid-mint", hex: "#4caf7a", role: "success-dark" }
    - { name: "warning-amber", hex: "#f5c842", role: "warning" }
    - { name: "error-red", hex: "#e04444", role: "destructive" }
    - { name: "error-red-dark", hex: "#c03030", role: "destructive-dark" }
    - { name: "chart-blush", hex: "#fecedb", role: "data-viz" }
    - { name: "chart-mint", hex: "#a8f0c6", role: "data-viz" }
    - { name: "chart-amber", hex: "#f5c842", role: "data-viz" }

shadcn CSS Variables

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Space%20Mono:wght@400;700&display=swap");

:root {
  --radius: 1.5rem;
  --font-heading: 'Nunito', sans-serif;
  --font-sans: 'Nunito', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 157 57% 34%;
  --foreground: 0 0% 0%;
  --card: 157 62% 33%;
  --card-foreground: 0 0% 0%;
  --popover: 158 65% 30%;
  --popover-foreground: 0 0% 100%;
  --primary: 344 96% 90%;
  --primary-foreground: 153 61% 15%;
  --secondary: 159 62% 30%;
  --secondary-foreground: 0 0% 100%;
  --muted: 160 61% 31%;
  --muted-foreground: 0 0% 100%;
  --accent: 337 100% 94%;
  --accent-foreground: 153 61% 15%;
  --destructive: 0 72% 57%;
  --destructive-foreground: 0 0% 0%;
  --border: 156 44% 43%;
  --input: 159 62% 31%;
  --ring: 344 96% 90%;
  --success: 145 71% 80%;
  --success-foreground: 148 72% 14%;
  --warning: 45 90% 61%;
  --warning-foreground: 34 100% 8%;
  --chart-1: 344 96% 90%;
  --chart-2: 145 71% 80%;
  --chart-3: 45 90% 61%;
  --chart-4: 206 79% 81%;
  --chart-5: 341 79% 81%;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-xl: 0 8px 24px rgba(0,0,0,0.12);
  --gradient-hero: linear-gradient(160deg, #258963 0%, #1c7a55 100%);
  --gradient-brand: linear-gradient(180deg, #258963 0%, #186644 100%);
  --gradient-subtle: linear-gradient(135deg, #2a9068 0%, #208760 100%);
  --duration: 150ms;
  --duration-slow: 320ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0.01em;
  --font-weight-heading: 900;
  --font-weight-body: 600;
  --button-radius: 9999px;
  --card-radius: 1rem;
  --input-radius: 0.75rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 0;
  --heading-transform: uppercase;

Install Targets

Registry

/r/emerald-schedule.json

Tailwind v4

@theme inline {
  --font-heading: 'Nunito', sans-serif;
  --font-sans: 'Nunito', sans-serif;
  --font-mono: 'Space 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: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.5rem;
  --radius-button: 9999px;
  --radius-card: 1rem;
  --radius-input: 0.75rem;
  --radius-badge: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-xl: 0 8px 24px rgba(0,0,0,0.12);
  --tracking-tight: -0.02em;
  --tracking-normal: 0.01em;
  --ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-kit: 150ms;
  --duration-kit-slow: 320ms;
  --gradient-hero: linear-gradient(160deg, #258963 0%, #1c7a55 100%);
  --gradient-brand: linear-gradient(180deg, #258963 0%, #186644 100%);
  --gradient-subtle: linear-gradient(135deg, #2a9068 0%, #208760 100%);
  --font-weight-heading: 900;
  --font-weight-body: 600;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "emerald-schedule",
  "type": "registry:theme",
  "title": "Emerald Schedule",
  "description": "A vivid emerald-green color-surface design system with blush-pink typography, oversized rotated display words, sparkle-star row dividers, and an all-uppercase rounded grotesque typeface.",
  "categories": [
    "color-surface",
    "editorial",
    "bold",
    "rounded",
    "emerald",
    "blush-pink",
    "poster",
    "schedule",
    "event",