# Snippet Copy this entire snippet and paste it as context when asking an AI to build or modify UI components for your project: ```text # 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

{/* content here */}

\`\`\` ### Scanline Overlay (hero sections only — very subtle) \`\`\`tsx

\`\`\` ### 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

{/* Title bar */}

filename.tsx

{/* Content */}

Terminal content here

{/* Optional blinking cursor for empty/loading states */}

\`\`\` ### Standard Card \`\`\`tsx

Title

Description

\`\`\` ### Buttons **Primary:** \`\`\`tsx \`\`\` **Secondary:** \`\`\`tsx \`\`\` **Ghost:** \`\`\`tsx \`\`\` ### Badge \`\`\`tsx label \`\`\` ### Input \`\`\`tsx \`\`\` --- ## 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 Link text \`\`\` ### 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 1. **Copy** the snippet above into your AI conversation as system context 2. **Ask** the AI to build a component — e.g., "Build a dashboard card with stats" 3. **Expect** terminal-style cards, cyan accents on dark backgrounds, proper glow effects 4. **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