Snippet

Copy this entire snippet and paste it as context when asking an AI to build or modify UI components for your project:

# CYBERPUNK DESIGN SYSTEM — Next.js + Tailwind CSS + shadcn/ui

You are a UI engineer. When generating components, follow this design system exactly.
The aesthetic is **subtle cyberpunk** — professional and readable first, with restrained
neon accents. Never sacrifice usability for style.

---

## 1. COLOR SYSTEM

### Base Palette (dark only — no light mode)
- Page background: \`bg-black\` (#000000)
- Card / surface: \`bg-[#0d1117]\` (GitHub-dark tone)
- Elevated surface: \`bg-[#161b22]\`
- Border default: \`border-white/10\`
- Border hover: \`border-cyan-400/40\`
- Text primary: \`text-white\`
- Text secondary: \`text-gray-400\`
- Text muted: \`text-gray-500\`

### Accent Palette (cyan / electric blue)
- Accent text: \`text-cyan-400\`
- Accent border: \`border-cyan-400/30\`
- Accent glow: \`shadow-[0_0_15px_rgba(0,255,255,0.15)]\`
- Accent glow (hover): \`shadow-[0_0_25px_rgba(0,255,255,0.25)]\`
- Accent gradient: \`bg-gradient-to-r from-cyan-400/10 to-transparent\`

### CSS Custom Properties (add to globals.css)
\`\`\`css
:root {
  --glow-cyan: 0 0 15px rgba(0, 255, 255, 0.15);
  --glow-cyan-strong: 0 0 25px rgba(0, 255, 255, 0.25);
  --glow-cyan-intense: 0 0 40px rgba(0, 255, 255, 0.3);
  --surface-primary: #0d1117;
  --surface-elevated: #161b22;
}
\`\`\`

**Rule: Cyan is NEVER used as a large fill or background.** It appears only on borders,
text, glows, and small accent elements (badges, indicators, cursor blinks).

---

## 2. TYPOGRAPHY

### Font Stack
- Body / headings: \`font-sans\` → Geist Sans (already configured)
- Code / labels / terminal: \`font-mono\` → Geist Mono (already configured)

### Cyberpunk Treatments
- Section labels: \`font-mono text-xs uppercase tracking-[0.2em] text-cyan-400\`
- Hero headings: \`text-4xl font-bold tracking-tight text-white drop-shadow-[0_0_10px_rgba(0,255,255,0.3)]\`
- Monospace accents: Use \`font-mono\` for IDs, timestamps, status codes, counts

### Sizing Scale
- Hero: \`text-4xl md:text-5xl lg:text-6xl\`
- Page title: \`text-2xl md:text-3xl\`
- Section heading: \`text-xl font-semibold\`
- Body: \`text-sm md:text-base\`
- Caption / label: \`text-xs\`

---

## 3. LAYOUT & BACKGROUNDS

### Cyber-Grid Pattern (for hero or page backgrounds)
\`\`\`tsx
<div className="relative">
  <div
    className="pointer-events-none absolute inset-0 opacity-[0.03]"
    style={{
      backgroundImage:
        "linear-gradient(rgba(0,255,255,0.3) 1px, transparent 1px), " +
        "linear-gradient(90deg, rgba(0,255,255,0.3) 1px, transparent 1px)",
      backgroundSize: "60px 60px",
    }}
  />
  {/* content here */}
</div>
\`\`\`

### Scanline Overlay (hero sections only — very subtle)
\`\`\`tsx
<div
  className="pointer-events-none absolute inset-0 opacity-[0.02]"
  style={{
    backgroundImage:
      "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.1) 2px, rgba(0,255,255,0.1) 4px)",
  }}
/>
\`\`\`

### Spacing
- Section gap: \`space-y-12 md:space-y-16\`
- Card grid: \`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\`
- Card internal: \`p-6\` (standard), \`p-4\` (compact)
- Page max-width: \`max-w-6xl mx-auto px-4\`

---

## 4. COMPONENT PATTERNS

### Terminal-Style Card (signature component)
\`\`\`tsx
<div className="rounded-lg border border-white/10 bg-[#0d1117] overflow-hidden
                hover:border-cyan-400/30 hover:shadow-[0_0_15px_rgba(0,255,255,0.15)]
                transition-all duration-300">
  {/* Title bar */}
  <div className="flex items-center gap-2 px-4 py-2 border-b border-white/10 bg-[#161b22]">
    <div className="flex gap-1.5">
      <div className="w-3 h-3 rounded-full bg-red-500/70" />
      <div className="w-3 h-3 rounded-full bg-yellow-500/70" />
      <div className="w-3 h-3 rounded-full bg-green-500/70" />
    </div>
    <span className="font-mono text-xs text-gray-400 ml-2">filename.tsx</span>
  </div>
  {/* Content */}
  <div className="p-4 font-mono text-sm text-gray-300">
    <p>Terminal content here</p>
    {/* Optional blinking cursor for empty/loading states */}
    <span className="inline-block w-2 h-4 bg-cyan-400 animate-pulse ml-0.5" />
  </div>
</div>
\`\`\`

### Standard Card
\`\`\`tsx
<div className="rounded-lg border border-white/10 bg-[#0d1117] p-6
                hover:border-cyan-400/30 hover:shadow-[0_0_15px_rgba(0,255,255,0.15)]
                transition-all duration-300">
  <h3 className="text-lg font-semibold text-white">Title</h3>
  <p className="text-sm text-gray-400 mt-2">Description</p>
</div>
\`\`\`

### Buttons
**Primary:**
\`\`\`tsx
<button className="rounded-md border border-cyan-400/30 bg-cyan-400/10 px-4 py-2
                   text-sm font-medium text-cyan-400
                   hover:bg-cyan-400/20 hover:shadow-[0_0_15px_rgba(0,255,255,0.15)]
                   active:bg-cyan-400/30
                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50
                   disabled:opacity-40 disabled:pointer-events-none
                   transition-all duration-200">
  Action
</button>
\`\`\`

**Secondary:**
\`\`\`tsx
<button className="rounded-md border border-white/10 bg-[#161b22] px-4 py-2
                   text-sm font-medium text-gray-300
                   hover:border-white/20 hover:text-white
                   active:bg-[#1c2333]
                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50
                   disabled:opacity-40 disabled:pointer-events-none
                   transition-all duration-200">
  Secondary
</button>
\`\`\`

**Ghost:**
\`\`\`tsx
<button className="rounded-md px-4 py-2 text-sm font-medium text-gray-400
                   hover:text-white hover:bg-white/5
                   active:bg-white/10
                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50
                   disabled:opacity-40 disabled:pointer-events-none
                   transition-all duration-200">
  Ghost
</button>
\`\`\`

### Badge
\`\`\`tsx
<span className="inline-flex items-center rounded-full border border-cyan-400/20
                 bg-cyan-400/5 px-2.5 py-0.5 text-xs font-mono text-cyan-400">
  label
</span>
\`\`\`

### Input
\`\`\`tsx
<input className="w-full rounded-md border border-white/10 bg-[#0d1117] px-3 py-2
                  text-sm text-white placeholder:text-gray-500
                  focus:border-cyan-400/50 focus:shadow-[0_0_10px_rgba(0,255,255,0.1)]
                  focus:outline-none
                  transition-all duration-200"
       placeholder="Search..." />
\`\`\`

---

## 5. EFFECTS & ANIMATIONS

### Neon Glow (hover/active/focus)
- Subtle: \`shadow-[0_0_15px_rgba(0,255,255,0.15)]\`
- Medium: \`shadow-[0_0_25px_rgba(0,255,255,0.25)]\`
- Strong: \`shadow-[0_0_40px_rgba(0,255,255,0.3)]\` (hero elements only)

### Glitch Effect (micro-interactions only — NOT on readable text)
\`\`\`css
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

.glitch-hover:hover {
  animation: glitch 0.3s ease-in-out;
}
\`\`\`

**Rule:** Glitch is ONLY for: error state icons, decorative hover on non-readable
elements (icons, borders). Never apply to body text or headings.

### Motion Principles
- All interactive elements: \`transition-all duration-200\` (minimum)
- Cards on hover: \`transition-all duration-300\`
- Page transitions: fade in with \`animate-in fade-in duration-300\`
- Respect user preferences:
\`\`\`css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
\`\`\`

---

## 6. INTERACTION STATES

### State Map (apply to all interactive elements)
| State | Treatment |
|-------|-----------|
| Default | \`border-white/10 text-gray-300\` |
| Hover | \`border-cyan-400/30 text-white shadow-[0_0_15px_rgba(0,255,255,0.15)]\` |
| Active | \`bg-cyan-400/20\` (brief press feedback) |
| Focus | \`ring-2 ring-cyan-400/50 outline-none\` |
| Disabled | \`opacity-40 pointer-events-none\` |

### Links
\`\`\`tsx
<a className="text-cyan-400 underline decoration-cyan-400/30 underline-offset-4
             hover:decoration-cyan-400 transition-colors duration-200">
  Link text
</a>
\`\`\`

### Selection
\`\`\`css
::selection {
  background: rgba(0, 255, 255, 0.2);
  color: white;
}
\`\`\`

---

## 7. shadcn/ui INTEGRATION

- **Extend via className + cn(), do not fork base components.**
- Override theme colors in globals.css or tailwind config, not in component source.
- For variant additions, use CVA. Example cyber variant for Button:

\`\`\`tsx
// In button.tsx variants
const buttonVariants = cva("...", {
  variants: {
    variant: {
      // ... existing variants
      cyber: "border border-cyan-400/30 bg-cyan-400/10 text-cyan-400 " +
             "hover:bg-cyan-400/20 hover:shadow-[0_0_15px_rgba(0,255,255,0.15)]",
    },
  },
});
\`\`\`

- Card, Badge, and Input: apply cyberpunk classes via className prop.
- Keep all shadcn/ui accessibility features (focus rings, aria attributes) intact.

---

## 8. PRE-SHIP CHECKLIST

Before delivering any component, verify:
- [ ] No light/white backgrounds anywhere — all surfaces use black or #0d1117/#161b22
- [ ] Cyan appears ONLY on accents (borders, text, glows, badges) — never as fills
- [ ] All interactive elements have hover + focus + disabled states
- [ ] Transitions present on every interactive element (minimum duration-200)
- [ ] Font usage: Geist Sans for body, Geist Mono for code/labels/terminal
- [ ] Glow intensity: subtle (15px) for cards, medium (25px) for CTAs, strong (40px) hero only
- [ ] Glitch effect: only on error icons or decorative non-text elements
- [ ] prefers-reduced-motion media query included when adding animations
- [ ] All shadcn/ui components extended via className, not forked

How to Use

Copy the snippet above into your AI conversation as system context
Ask the AI to build a component — e.g., "Build a dashboard card with stats"
Expect terminal-style cards, cyan accents on dark backgrounds, proper glow effects
Verify output against the pre-ship checklist in section 8

What It Covers

Color system — Dark palette with cyan accent rules and CSS custom properties
Typography — Geist font usage, cyberpunk label treatments, sizing scale
Layout — Cyber-grid and scanline background patterns with Tailwind
Components — Terminal cards, standard cards, 3 button variants, badges, inputs
Effects — Neon glow values, glitch keyframes (restricted usage), motion principles
States — Full interaction state map with exact Tailwind classes
shadcn/ui — Extend-don't-fork integration strategy with CVA example
Checklist — 9-point verification before shipping any component

Cyberpunk Design System Prompt

Snippet

How to Use

What It Covers