Identity Forge
Next.js / React / Astro

Genome Emerald

Inspired by a screen-printed club and festival event calendar, Genome Emerald is a strictly duotone design system: near-white paper ground with vivid emerald green as the sole ink for all text, borders, grid lines, and graphic marks. The calendar-grid structure with oversized index numerals, condensed uppercase headings, flat hairline dividers, and flat solid silhouette illustrations define its identity. No shadows, no non-green structural color, no rounded corners anywhere.

Use this kitCustomize in StudioDownload DESIGN.md
editorial
festival
duotone
flat
grid
monochromatic
club
poster
sharp-corners
emerald
condensed
screen-print

genomeemerald.com

genome

WEEKENDS ALIGNED

Monthly program — events, nights, and residencies

VIEW CALENDARTokens

genomeemerald.com

genome

WEEKENDS ALIGNED

Monthly program — events, nights, and residencies

VIEW CALENDARTokens

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: "#F3F5F3"
    foreground: "#0A3328"
    card: "#F8FAF8"
    card-foreground: "#0A3328"
    popover: "#FFFFFF"
    popover-foreground: "#0A3328"
    primary: "#09BB8B"
    primary-foreground: "#001A12"
    secondary: "#E2EDE8"
    secondary-foreground: "#0A3328"
    muted: "#E8F0EC"
    muted-foreground: "#4A6B5C"
    accent: "#1CC49C"
    accent-foreground: "#001A12"
    destructive: "#C62828"
    destructive-foreground: "#FFFFFF"
    border: "#09BB8B"
    input: "#09BB8B"
    ring: "#09BB8B"
    success: "#2E7D52"
    success-foreground: "#FFFFFF"
    warning: "#A05200"
    warning-foreground: "#FFFFFF"
    chart-1: "#09BB8B"
    chart-2: "#1CC49C"
    chart-3: "#006B5C"
    chart-4: "#5CAC94"
    chart-5: "#ACF4DC"
  palette:
    - { name: "emerald-vivid", hex: "#09bb8b", role: "primary" }
    - { name: "emerald-bright", hex: "#1cc49c", role: "secondary" }
    - { name: "mint-light", hex: "#acf4dc", role: "accent" }
    - { name: "emerald-muted", hex: "#5cac94", role: "muted" }
    - { name: "emerald-dark-muted", hex: "#13856a", role: "dark-accent" }
    - { name: "scored-mint", hex: "#aee6d8", role: "data-viz" }
    - { name: "scored-green", hex: "#00bb85", role: "data-viz" }
    - { name: "derived-dark-primary", hex: "#006b5c", role: "data-viz" }
    - { name: "derived-inverse", hex: "#58dbc3", role: "data-viz" }
    - { name: "paper-white", hex: "#f3f5f3", role: "background" }
    - { name: "paper-warm", hex: "#f5f8f5", role: "surface" }
    - { name: "paper-cool", hex: "#f6f8f7", role: "surface" }
    - { name: "paper-tinted", hex: "#eff5f2", role: "surface" }
    - { name: "paper-blush", hex: "#f8f6f5", role: "surface" }
    - { name: "border-neutral", hex: "#dcdedc", role: "border" }
    - { name: "ink-deep", hex: "#0a3328", role: "foreground" }
    - { name: "ink-void", hex: "#0d1f18", role: "dark-background" }
    - { name: "light-warm-gray", hex: "#bcb4b7", role: "neutral" }
typography:

shadcn CSS Variables

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

:root {
  --radius: 0rem;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;
  --background: 120 9% 96%;
  --foreground: 164 67% 12%;
  --card: 120 17% 98%;
  --card-foreground: 164 67% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 164 67% 12%;
  --primary: 164 91% 38%;
  --primary-foreground: 162 100% 5%;
  --secondary: 153 23% 91%;
  --secondary-foreground: 164 67% 12%;
  --muted: 150 21% 93%;
  --muted-foreground: 153 18% 35%;
  --accent: 166 75% 44%;
  --accent-foreground: 162 100% 5%;
  --destructive: 0 66% 47%;
  --destructive-foreground: 0 0% 100%;
  --border: 164 91% 38%;
  --input: 164 91% 38%;
  --ring: 164 91% 38%;
  --success: 147 46% 34%;
  --success-foreground: 0 0% 100%;
  --warning: 31 100% 31%;
  --warning-foreground: 0 0% 100%;
  --chart-1: 164 91% 38%;
  --chart-2: 166 75% 44%;
  --chart-3: 172 100% 21%;
  --chart-4: 162 33% 52%;
  --chart-5: 160 77% 82%;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --gradient-hero: linear-gradient(180deg, #f3f5f3 0%, #e8f5ef 100%);
  --gradient-brand: linear-gradient(135deg, #09bb8b 0%, #1cc49c 100%);
  --gradient-subtle: linear-gradient(180deg, #f8faf8 0%, #edf5f0 100%);
  --duration: 150ms;
  --duration-slow: 300ms;
  --ease: linear;
  --tracking-tight: 0em;
  --tracking-normal: 0.02em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0rem;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 1px;
  --heading-transform: uppercase;

Install Targets

Registry

/r/genome-emerald.json

Tailwind v4

@theme inline {
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'Space Mono', monospace;
  --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: 0rem;
  --radius-md: 0rem;
  --radius-lg: 0rem;
  --radius-xl: 0rem;
  --radius-button: 0rem;
  --radius-card: 0rem;
  --radius-input: 0rem;
  --radius-badge: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 1px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --tracking-tight: 0em;
  --tracking-normal: 0.02em;
  --ease-kit: linear;
  --duration-kit: 150ms;
  --duration-kit-slow: 300ms;
  --gradient-hero: linear-gradient(180deg, #f3f5f3 0%, #e8f5ef 100%);
  --gradient-brand: linear-gradient(135deg, #09bb8b 0%, #1cc49c 100%);
  --gradient-subtle: linear-gradient(180deg, #f8faf8 0%, #edf5f0 100%);
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "genome-emerald",
  "type": "registry:theme",
  "title": "Genome Emerald",
  "description": "Editorial duotone festival calendar kit — vivid emerald ink on near-white paper, zero radius, hairline grid",
  "categories": [
    "editorial",
    "festival",
    "duotone",
    "flat",
    "grid",
    "monochromatic",
    "club",
    "poster",
    "sharp-corners",