Vandoko Campaign Tokens

Use lime for completion state, "money found" moments, hero CTAs, and key conversion accents. Maximum one lime accent per screen. Never use for body text, large backgrounds, or passive UI.

Installation

1. Add the @vandoko registry to your project's components.json (if not already present):

{
  "registries": {
    "@vandoko": "https://registry.vandoko.com/r/{name}.json"
  }
}

2. Install the campaign tokens:

npx shadcn@latest add @vandoko/vandoko-campaign-tokens

3. Import in your globals.css AFTER the base theme:

@import "tailwindcss";
@import "./vandoko-theme.css";
@import "./vandoko-campaign-tokens.css";

4. (Optional) Expose Tailwind utilities by adding to your @theme inline block:

@theme inline {
  --color-brand-lime: var(--brand-lime);
  --color-brand-lime-foreground: var(--brand-lime-foreground);
}

This unlocks bg-brand-lime, text-brand-lime, border-brand-lime, etc.

Tokens

Usage Patterns

✅ Good:

• <Button className="bg-brand-lime text-brand-lime-foreground"> for a single high-impact CTA
• Trend indicators on positive-direction data (paired with --chart-2 which is brand-cyan)
• "Mission accomplished" success states
• Key milestone confetti / celebration moments

🚫 Anti-patterns:

• Body text, paragraph copy
• Large background fills (>20% of viewport)
• Multiple lime accents on the same screen
• Passive UI elements (nav links, footer text, sidebar items)
• Decorative borders or hairlines

Why is lime quarantined?

Vandoko v2 brand lock (2026-05-06) treats lime as a celebration accent rather than a baseline secondary. Shipping --brand-lime as part of the base theme led to consumers using it for passive UI — diluting its punch in moments where it should land. Quarantining the token forces an explicit opt-in, which is also a brand reminder of when it's appropriate to use.

For non-celebratory secondary accents, use the sand family (--sand, --sand-light, --sand-whisper) shipped in vandoko-theme.

Lineage

Modifications

• Extracted from vandoko-theme.css per v2 brand lock 2026-05-06
• Mirror of vandoko-ai's tokens/campaign.css quarantine pattern
• Foreground color (--brand-lime-foreground) added for explicit dark-text-on-lime pairing