Next.js / React / shadcn/ui

Acid Lime Digital

Built from a digital marketing strategy presentation that treats acid-lime green (#b9f001) as a full-page brand surface alternated with a neutral off-white. Text sits directly on the lime. Black pill buttons appear on both surfaces. Decorative 4-pointed star (✦) and starburst (✳) ornaments punctuate headings. Photo thumbnails float with 16px rounded corners. Stats appear as oversized numerals with pipe separators inside lime callout blocks.

acid-lime
color-surface
alternating
editorial
geometric-sans
pill-buttons
ornamental
digital-marketing
bold

acidlimedigital.com

AcidLime

Digital Marketing Strategy

Where You Stand Today

Learn MoreTokens

acidlimedigital.com

AcidLime

Digital Marketing Strategy

Where You Stand Today

Learn MoreTokens

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#B9F001"
    foreground: "#111111"
    card: "#C4F218"
    card-foreground: "#111111"
    popover: "#CCF530"
    popover-foreground: "#111111"
    primary: "#111111"
    primary-foreground: "#F0F0EF"
    secondary: "#89B501"
    secondary-foreground: "#111111"
    muted: "#A8D100"
    muted-foreground: "#2C3700"
    accent: "#111111"
    accent-foreground: "#B9F001"
    destructive: "#DC2626"
    destructive-foreground: "#FFFFFF"
    border: "#2D3A00"
    input: "#B0DE01"
    ring: "#111111"
    success: "#16A34A"
    success-foreground: "#000000"
    warning: "#D97706"
    warning-foreground: "#111111"
    chart-1: "#111111"
    chart-2: "#89B501"
    chart-3: "#E4F500"
    chart-4: "#3D4A00"
    chart-5: "#DC2626"
  palette:
    - { name: "brand-lime", hex: "#b9f001", role: "primary-surface" }
    - { name: "brand-forest", hex: "#89b501", role: "secondary-surface" }
    - { name: "lime-bright", hex: "#c4f218", role: "card-surface" }
    - { name: "lime-deep", hex: "#a8d100", role: "muted-surface" }
    - { name: "lime-electric", hex: "#e4f500", role: "accent-light" }
    - { name: "ink", hex: "#111111", role: "foreground" }
    - { name: "ink-soft", hex: "#333333", role: "secondary-foreground" }
    - { name: "forest-dark", hex: "#2c3700", role: "border" }
    - { name: "surface-neutral", hex: "#f0f0ef", role: "neutral-surface" }
    - { name: "surface-muted", hex: "#e4e4e4", role: "muted-surface" }
    - { name: "surface-dark", hex: "#111207", role: "dark-background" }
    - { name: "lime-ghost", hex: "#e0f0b0", role: "dark-foreground" }
    - { name: "night-card", hex: "#1a1f06", role: "dark-card" }
    - { name: "destructive-red", hex: "#dc2626", role: "destructive" }
    - { name: "success-green", hex: "#16a34a", role: "success" }
    - { name: "warning-amber", hex: "#d97706", role: "warning" }
    - { name: "data-1", hex: "#111111", role: "data-viz" }
    - { name: "data-2", hex: "#89b501", role: "data-viz" }
    - { name: "data-3", hex: "#e4f500", role: "data-viz" }

shadcn CSS Variables

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

:root {
  --radius: 16px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 74 99% 47%;
  --foreground: 0 0% 7%;
  --card: 73 89% 52%;
  --card-foreground: 0 0% 7%;
  --popover: 72 91% 57%;
  --popover-foreground: 0 0% 7%;
  --primary: 0 0% 7%;
  --primary-foreground: 60 3% 94%;
  --secondary: 75 99% 36%;
  --secondary-foreground: 0 0% 7%;
  --muted: 72 100% 41%;
  --muted-foreground: 72 100% 11%;
  --accent: 0 0% 7%;
  --accent-foreground: 74 99% 47%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 73 100% 11%;
  --input: 72 99% 44%;
  --ring: 0 0% 7%;
  --success: 142 76% 36%;
  --success-foreground: 0 0% 0%;
  --warning: 32 95% 44%;
  --warning-foreground: 0 0% 7%;
  --chart-1: 0 0% 7%;
  --chart-2: 75 99% 36%;
  --chart-3: 64 100% 48%;
  --chart-4: 71 100% 15%;
  --chart-5: 0 72% 51%;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 4px 24px 0 rgba(0,0,0,0.08);
  --shadow-xl: 0 8px 40px 0 rgba(0,0,0,0.12);
  --gradient-hero: linear-gradient(135deg, #c5f724 0%, #b9f001 100%);
  --gradient-brand: linear-gradient(180deg, #b9f001 0%, #89b501 100%);
  --gradient-subtle: linear-gradient(135deg, #f0f0ef 0%, #e4e4e4 100%);
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 16px;
  --input-radius: 8px;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 0;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 0;
  --heading-transform: none;

Install Targets

Registry

/r/acid-lime-digital.json

Tailwind v4

@theme inline {
  --font-heading: 'Space Grotesk', sans-serif;
  --font-sans: 'DM Sans', 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: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-button: 9999px;
  --radius-card: 16px;
  --radius-input: 8px;
  --radius-badge: 9999px;
  --border-width: 1px;
  --card-border-width: 0;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 0;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 4px 24px 0 rgba(0,0,0,0.08);
  --shadow-xl: 0 8px 40px 0 rgba(0,0,0,0.12);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-kit: 200ms;
  --duration-kit-slow: 400ms;
  --gradient-hero: linear-gradient(135deg, #c5f724 0%, #b9f001 100%);
  --gradient-brand: linear-gradient(180deg, #b9f001 0%, #89b501 100%);
  --gradient-subtle: linear-gradient(135deg, #f0f0ef 0%, #e4e4e4 100%);
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "acid-lime-digital",
  "type": "registry:theme",
  "title": "Acid Lime Digital",
  "description": "A bold, vivid acid-lime brand kit for digital marketing agencies and strategy presentations — alternating full-lime and neutral off-white surfaces with black pill CTAs and star ornaments.",
  "categories": [
    "acid-lime",
    "color-surface",
    "alternating",
    "editorial",
    "geometric-sans",
    "pill-buttons",
    "ornamental",
    "digital-marketing",
    "bold"