Cyberpunk Neon

STYLEKIT_STYLE_REFERENCE
style_name: Cyberpunk Neon
style_slug: cyberpunk-neon
style_source: /styles/cyberpunk-neon

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

STYLE: Cyberpunk Neon
TYPE: Futuristic sci-fi interface

MUST USE:
- Dark background: bg-[#0a0a0f] or bg-gray-950
- Neon glow shadows: shadow-[0_0_20px_rgba(0,255,255,0.5)]
- Text glow: style={{textShadow: '0 0 10px currentColor'}}
- Glowing borders: border border-cyan-400 shadow-[0_0_10px...]
- High saturation colors: cyan-400, fuchsia-500, yellow-400
- font-mono for tech text
- uppercase tracking-wider for labels

MUST AVOID:
- Light/white backgrounds
- Low saturation colors
- Regular shadows (shadow-md)
- Warm color schemes
- Large rounded corners (rounded-2xl+)
- Soft/friendly design language

COLOR RULES:
- Primary: Cyan (#00ffff)
- Accent: Magenta (#ff00ff)
- Background: Near-black (#0a0a0f)
- Text: White with glow
- Borders: Primary color with glow

SPECIAL EFFECTS:
- Scan line overlay for tech feel
- Pulsing elements with animate-pulse
- Glow intensifies on hover

---

## Animation Rules

### Interaction Physics
- **Unstable Neon**: Glow effects may pulse subtly. Use `animate-pulse` sparingly. NO high-frequency flickering that hurts readability.
- **Glitch Press**: Active state uses OFFSET translation + color inversion, NOT scale. Example: `active:translate-x-[2px] active:-translate-y-[1px] active:text-fuchsia-400`
- **CRT Scanline**: Cards increase scanline density/visibility on hover, simulating terminal scanning.
- **Fast & Raw**: Standard interactions use `duration-100` to `duration-150`. Only scan sweeps may use up to `duration-300`.

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Button hover | 100-150ms | ease-out |
| Glow pulse | 2-3s | ease-in-out (loop) |
| Scan sweep | 150-300ms | ease-out |
| Glitch press | instant | — |

---

## Typography

| Element | Classes |
|---------|---------|
| Headers | font-mono font-bold uppercase tracking-[0.2em] |
| Labels | text-xs font-mono uppercase tracking-wider |
| Body | font-mono text-sm |
| Code/Data | font-mono tabular-nums |

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| Light/white backgrounds | Destroys neon visibility |
| Low saturation colors | Loses cyberpunk intensity |
| shadow-md, shadow-lg | No blur shadows — only glow |
| Warm color schemes | Contradicts cold tech aesthetic |
| rounded-2xl, rounded-3xl | Too soft, not technical enough |
| Soft/friendly language | Breaks immersion |
| scale transforms on active | Use glitch offset instead |

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is near-black (#0a0a0f or bg-gray-950)
- [ ] Neon glows use shadow-[0_0_Xpx_rgba(...)] format
- [ ] Text has textShadow glow effect where appropriate
- [ ] High saturation colors only (cyan, magenta, yellow, green)
- [ ] font-mono for all text elements
- [ ] Active states use glitch offset, NOT scale
- [ ] Rounded corners are rounded-sm or rounded-none
- [ ] Transitions are fast: duration-100 to duration-150

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use light/white backgrounds
- use low-saturation colors
- use regular shadows like shadow-md (must use glow shadows)
- use warm color schemes (unless for warning/error colors)
- use overly large border radius rounded-2xl, rounded-3xl
- use soft/warm design language

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use light/white backgrounds
- [ ] do not use low-saturation colors
- [ ] do not use regular shadows like shadow-md (must use glow shadows)
- [ ] do not use warm color schemes (unless for warning/error colors)
- [ ] do not use overly large border radius rounded-2xl, rounded-3xl