next.js / react / vue
LimePulse Digital Agency
A neutral-surface design system for a modern performance-marketing agency. The white canvas is punctuated exclusively by a vivid acid-lime (#b6fa56) used as filled section-label chips, inline text-highlight spans behind key heading words, and small icon fills. Service cards alternate between near-black (#191923) and white in a 2-column grid, both variants sharing the same lime-green text-highlight motif. Primary CTAs are solid near-black pill buttons in light mode and solid lime-green pills in dark mode. Circular line-art illustrations with floating badge decorations and a four-pointed sparkle recurring mark round out the visual language.
neutral-surface
acid-lime
alternating-cards
pill-buttons
eyebrow-highlight
geometric-sans
bold-accent
checkerboard-grid
line-illustration
limepulsedigitalagency.com
LimePulse
Navigating the digital landscape for success
Our digital marketing agency helps businesses grow through SEO, PPC, social media, and content creation.
Book a consultationTokens
limepulsedigitalagency.com
LimePulse
Navigating the digital landscape for success
Our digital marketing agency helps businesses grow through SEO, PPC, social media, and content creation.
Book a consultationTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#FFFFFF"
foreground: "#191923"
card: "#FFFFFF"
card-foreground: "#191923"
popover: "#FFFFFF"
popover-foreground: "#191923"
primary: "#191923"
primary-foreground: "#FFFFFF"
secondary: "#F3EEF2"
secondary-foreground: "#191923"
muted: "#F3EEF2"
muted-foreground: "#6B6B7B"
accent: "#B6FA56"
accent-foreground: "#191923"
destructive: "#DC2626"
destructive-foreground: "#FFFFFF"
border: "#E2E2E6"
input: "#E2E2E6"
ring: "#B6FA56"
success: "#15803D"
success-foreground: "#FFFFFF"
warning: "#D97706"
warning-foreground: "#191923"
chart-1: "#B6FA56"
chart-2: "#191923"
chart-3: "#6366F1"
chart-4: "#F59E0B"
chart-5: "#EF4444"
palette:
- { name: "white", hex: "#ffffff", role: "background" }
- { name: "off-white", hex: "#fffeff", role: "surface" }
- { name: "soft-blush", hex: "#f8f3f7", role: "surface-variant" }
- { name: "pale-muted", hex: "#f3eef2", role: "muted" }
- { name: "light-gray", hex: "#f8f8f8", role: "surface-variant" }
- { name: "light-border", hex: "#e2e2e6", role: "border" }
- { name: "mid-gray", hex: "#dbdbdb", role: "border" }
- { name: "light-muted", hex: "#c5c9be", role: "surface-muted" }
- { name: "ink-secondary", hex: "#6b6b7b", role: "foreground-secondary" }
- { name: "ui-muted", hex: "#9898a8", role: "foreground-muted" }
- { name: "dark-charcoal", hex: "#3e3f44", role: "foreground-tertiary" }
- { name: "near-black", hex: "#191923", role: "foreground" }
- { name: "dark-card", hex: "#25252f", role: "card-dark" }
- { name: "dark-muted", hex: "#2d2d38", role: "muted-dark" }
- { name: "dark-border", hex: "#35353f", role: "border-dark" }
- { name: "acid-lime", hex: "#b6fa56", role: "brand-accent" }
- { name: "vibrant-green", hex: "#97cb5a", role: "accent-secondary" }
- { name: "light-green", hex: "#add57a", role: "accent-light" }
- { name: "muted-green", hex: "#749e4c", role: "accent-muted" }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: 1rem;
--font-heading: 'Space Grotesk', sans-serif;
--font-sans: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--background: 0 0% 100%;
--foreground: 240 17% 12%;
--card: 0 0% 100%;
--card-foreground: 240 17% 12%;
--popover: 0 0% 100%;
--popover-foreground: 240 17% 12%;
--primary: 240 17% 12%;
--primary-foreground: 0 0% 100%;
--secondary: 312 17% 94%;
--secondary-foreground: 240 17% 12%;
--muted: 312 17% 94%;
--muted-foreground: 240 7% 45%;
--accent: 85 94% 66%;
--accent-foreground: 240 17% 12%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 240 7% 89%;
--input: 240 7% 89%;
--ring: 85 94% 66%;
--success: 142 72% 29%;
--success-foreground: 0 0% 100%;
--warning: 32 95% 44%;
--warning-foreground: 240 17% 12%;
--chart-1: 85 94% 66%;
--chart-2: 240 17% 12%;
--chart-3: 239 84% 67%;
--chart-4: 38 92% 50%;
--chart-5: 0 84% 60%;
--shadow-sm: 0 1px 2px rgba(25,25,35,0.04);
--shadow-md: 0 2px 8px rgba(25,25,35,0.06);
--shadow-lg: 0 4px 16px rgba(25,25,35,0.08);
--shadow-xl: 0 8px 32px rgba(25,25,35,0.10);
--gradient-hero: linear-gradient(135deg,#ffffff 60%,#f3fbdf 100%);
--gradient-brand: linear-gradient(135deg,#b6fa56 0%,#97cb5a 100%);
--gradient-subtle: linear-gradient(180deg,#ffffff 0%,#f3eef2 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: 9999px;
--card-radius: 1rem;
--input-radius: 0.5rem;
--badge-radius: 0.375rem;
--border-width: 1px;
--card-border-width: 1px;
--input-border-width: 1px;
--button-border-width: 0;
--badge-border-width: 0;
--heading-transform: none;Install Targets
Registry
/r/limepulse-digital-agency.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: 0.375rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-button: 9999px;
--radius-card: 1rem;
--radius-input: 0.5rem;
--radius-badge: 0.375rem;
--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(25,25,35,0.04);
--shadow-md: 0 2px 8px rgba(25,25,35,0.06);
--shadow-lg: 0 4px 16px rgba(25,25,35,0.08);
--shadow-xl: 0 8px 32px rgba(25,25,35,0.10);
--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(135deg,#ffffff 60%,#f3fbdf 100%);
--gradient-brand: linear-gradient(135deg,#b6fa56 0%,#97cb5a 100%);
--gradient-subtle: linear-gradient(180deg,#ffffff 0%,#f3eef2 100%);
--font-weight-heading: 600;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "limepulse-digital-agency",
"type": "registry:theme",
"title": "LimePulse Digital Agency",
"description": "Clean digital-marketing agency kit anchored on an acid-lime accent, alternating dark/light card pairs, filled eyebrow-label chips, and pill CTA buttons on a white neutral canvas.",
"categories": [
"neutral-surface",
"acid-lime",
"alternating-cards",
"pill-buttons",
"eyebrow-highlight",
"geometric-sans",
"bold-accent",
"checkerboard-grid",
"line-illustration"