Cyberpunk

---
name: cyberpunk-neon
description: Apply the Cyberpunk visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Cyberpunk, mentions cyberpunk neon, neon noir, night city UI, or describes neon cyan + magenta on near-black, 1px glowing borders, glitch and scanline effects — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Cyberpunk Design System

Neon-on-noir dystopian night-city aesthetic: near-black base, one primary neon (cyan) plus one secondary (magenta), 1px glowing borders, chamfered corners, glitch text, scanlines, and hazard-stripe accents. Blade Runner atmosphere with Cyberpunk 2077's graphic bite.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Cyberpunk.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (cyberpunk neon, neon noir, night city UI, dystopian tech, high-tech low-life), or describes its traits: neon cyan + magenta on near-black; 1px glowing borders; glitch and scanline effects; chamfered/zero-radius corners; hazard stripes and warning motifs; techno display type.

## Design tokens

### Color palette

- Night-city base, deep blue-black: `#0b0d17` (--color-bg)
- Deepest layer: page edges, code blocks, footer: `#050505` (--color-bg-deep)
- Panel and card fill: `#111527` (--color-surface)
- Primary text — icy cyan-white; never pure #ffffff: `#e0f7ff` (--color-text)
- Secondary text and inactive labels: `#7a8ba3` (--color-text-muted)
- Primary neon — cyan; borders, links, active states: `#00e5ff` (--color-accent)
- Secondary neon — magenta; glitch ghosts, highlights, rare CTAs: `#ff2daa` (--color-accent-2)
- Tertiary violet for gradients and depth accents: `#7c4dff` (--color-violet)
- Hazard yellow for warning tape, badges, alerts: `#f7c948` (--color-warning)
- Non-glowing structural hairlines: `#1d2740` (--color-border)

### Typography

- Display / headings: Rajdhani (fallback: Saira, sans-serif) (ideal: Blender Pro, premium — use Rajdhani as the free substitute)
- Body: Saira (fallback: Rajdhani, sans-serif)
- Mono / data: JetBrains Mono (fallback: Consolas, monospace)
- Type scale: 1.25 ratio, base 15px — computed steps: 15px / 19px / 23px / 29px / 37px / 46px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.1, letter-spacing 0.06em, uppercase
- Body: line-height 1.4, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Mid-density: content blocks breathe against the dark, but panels themselves are tight and technical, like signage in a crowded street.
- Border radius: none 0px, chamfer 0px — Zero radius everywhere; 'rounding' is done by chamfering one or two corners per panel with clip-path 45° cuts (8–16px).
- Border treatment: 1px solid #00e5ff — Interactive and featured panels get the neon border plus glow; structural dividers use the non-glowing #1d2740 hairline. Never glow everything at once.

### Shadows

- neon-cyan: `0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.25)` — Primary neon glow on cyan-bordered elements and links
- neon-magenta: `0 0 10px rgba(255, 45, 170, 0.5), 0 0 20px rgba(255, 45, 170, 0.25)` — Secondary glow, used sparingly on magenta highlights
- neon-text: `0 0 6px rgba(0, 229, 255, 0.6)` — text-shadow for glowing headline or nav states

### Layout

- Max content width: 1280px
- Strong vertical rhythm broken by full-bleed neon divider strips or hazard tape
- Asymmetric panel compositions — offset columns, overlapping chamfered blocks
- Thin data-trim decorations: barcode strips, kana/katakana microtext, serial numbers in mono
- One glowing focal element per viewport; the rest of the frame stays noir

### Effects

- RGB-split glitch on headlines (cyan/magenta ghost offsets, brief twitch animation)
- CRT scanline overlay at 3–4% opacity on hero media
- Hazard stripes (45° repeating-linear-gradient in warning yellow/black) as section dividers
- Neon flicker-on animation for borders entering the viewport
- Chromatic aberration on image hover

### Motion

- Easing: cubic-bezier(0.7, 0, 0.3, 1); durations 120ms / 250ms / 500ms
- Neon elements 'strike' on — two quick flickers then steady, like a tube warming up
- Glitch twitches are brief (≤200ms) and triggered by hover or entry, never looping constantly
- Panel entries slide in with a 1-frame RGB-split ghost
- All glitch/flicker effects fully disabled under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0b0d17;
  --color-bg-deep: #050505;
  --color-surface: #111527;
  --color-text: #e0f7ff;
  --color-text-muted: #7a8ba3;
  --color-accent: #00e5ff;
  --color-accent-2: #ff2daa;
  --color-violet: #7c4dff;
  --color-warning: #f7c948;
  --color-border: #1d2740;
  --radius-none: 0px;
  --radius-chamfer: 0px;
  --shadow-neon-cyan: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.25);
  --shadow-neon-magenta: 0 0 10px rgba(255, 45, 170, 0.5), 0 0 20px rgba(255, 45, 170, 0.25);
  --shadow-neon-text: 0 0 6px rgba(0, 229, 255, 0.6);
  --border-default: 1px solid #00e5ff;
  --font-display: Rajdhani, Saira, sans-serif;
  --font-body: Saira, Rajdhani, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --text-base: 15px;
  --leading-heading: 1.1;
  --leading-body: 1.4;
  --tracking-heading: 0.06em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.7, 0, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Saira:wght@400;500&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Bar on bg-deep with 1px cyan bottom border and subtle glow; uppercase Rajdhani links with letter-spacing; active link gets neon-text shadow; a mono status tag (e.g. NET//ONLINE) sits far right
- **Hero:** Full-bleed noir backdrop (city image or gradient to violet), giant uppercase glitch headline, magenta-highlighted keyword, cyan-bordered chamfered CTA, scanline overlay
- **Card:** Surface fill, 1px cyan border with neon-cyan glow at 60% intensity, one chamfered corner, uppercase mono tag in the top-left, body text in Saira
- **Button (primary):** Chamfered rectangle, transparent fill, 1px cyan border + neon-cyan glow, uppercase label; on hover fill snaps to cyan at 15% and glow doubles
- **Button (secondary):** Same geometry with magenta border/glow — reserved for the single most important CTA per page, inverting the hierarchy on purpose
- **Form fields:** bg-deep inset, 1px #1d2740 border, mono text; focus flickers the border to glowing cyan; error state uses hazard yellow with a striped left edge

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Glitch treatment on key headlines — RGB-split ghost copies in cyan and magenta that twitch on hover — over a panel edged in 1px glowing cyan with one chamfered corner. Spend boldness here; keep everything else quiet.

## Do

- Follow the one-primary-one-secondary neon rule: cyan leads, magenta punctuates
- Keep most of every viewport dark — neon only reads against generous noir
- Use hazard yellow strictly for warning motifs, not general decoration
- Ground the theatrics with mono microtext, serial numbers, and technical trim

## Don't

- Never use pure white text — icy #e0f7ff is the ceiling
- Don't glow every border; ambient glow everywhere flattens into mush
- No soft rounded corners or pastel colors — they break the dystopia
- Don't run glitch loops continuously; constant twitching is unusable and unsafe

## Accessibility notes

- Neon-on-dark contrast: cyan #00e5ff and text #e0f7ff pass easily on #0b0d17, but magenta #ff2daa is ~4.6:1 and violet #7c4dff ~4.0:1 — keep violet out of text roles and use magenta for large text and graphics only
- Photosensitivity risk is real here: glitch twitches, neon flicker-on, and scanlines must stay under 3 flashes per second, and every flicker/glitch effect must be removed under prefers-reduced-motion
- Glowing text-shadow blurs letterforms; apply neon-text only to short display strings, never body copy

## Reference sites

- Cyberpunk 2077: https://www.cyberpunk.net
- Territory Studio — Blade Runner 2049: https://territorystudio.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip cyberpunk-neon.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/cyberpunk-neon.json

Settings → Capabilities → Skills → Upload skill → cyberpunk-neon.zip