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
Exports
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.jsonTailwind 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"