version: "1.0.1"

name: cyber-neon description: "Use this skill to create Cyber Neon visual design systems that feel electric, nocturnal, luminous, futuristic, sharp, high-energy. USE FOR: futuristic websites, cyberpunk launches, gaming, AI labs, nightlife brands, luminous dark interfaces, techno editorial pages. DO NOT USE FOR: unrelated backend work, non-visual tasks, or when an existing product design system must be followed exactly."

Cyber Neon Skill

Mandatory <design_plan>

Before substantial UI code, output a compact <design_plan> block. Include:

1. Use case: page/app type, audience, primary action, emotional target.
2. Style direction: one Cyber Neon archetype below.
3. Operating mode: density, motion, decoration, contrast, radius, and asset burden.
4. First viewport: nav type, H1 width/line strategy, luminous terminal, map, shader, or holographic product object, CTA treatment, next-section hint.
5. System contracts: type, color, surface, radius, spacing, depth, state, and motion tokens.
6. Component plan: at least four concrete Cyber Neon components with states.
7. Motion plan: glow, scanline, shader, or pointer signal, timing, performance guardrail, and reduced-motion fallback.
8. Anti-slop sweep: top three failure modes for this style and how you will avoid them.

If the request is tiny, do this mentally and keep the final answer concise.

Core Directive

Build Cyber Neon as a black operating system lit by intentional signal. The canvas is pure black: #000000 for the primary page background. Do not soften it into dark blue, graphite, or near-black substitutes. Panels may step upward into smoke and glass, but the stage remains black. Glow replaces shadow: never use soft gray drop shadows for elevation. If a CSS box-shadow exists, it must read as colored light emission, active state, beam edge, or live energy, not as generic depth.

The style is high-energy but disciplined. It comes from black voids, hard geometry, luminous edges, scanlines, holographic material, mono telemetry, and narrow neon budgets. It is not a purple gradient theme, not a default dark UI, and not a random cyberpunk wallpaper behind ordinary SaaS cards.

Use this skill for futuristic websites, cyberpunk launches, gaming, AI labs, nightlife brands, luminous dark interfaces, techno editorial pages, developer-lab landing pages, event systems, and product surfaces that need to feel alive after midnight.

Style Operating Mode

Signature System

• Neon Role Contract: one accent for CTA/active state, one color for live/success, red/orange only for alerts.
• Button/Card Dichotomy: pill CTAs can glow; panels stay sharp and thin with restrained inner light.
• Environmental Glow: glow should radiate from hero object, cursor trail, horizon line, or active edge, not from all text.
• Terminal Legibility: mono data is small but never faint; use opacity layers only for nonessential telemetry.

Differentiation

Use Cyber Neon when futuristic websites, cyberpunk launches, gaming, AI labs, nightlife brands, luminous dark interfaces, techno editorial pages. If removing the luminous proof object, token rules, or signature components leaves a generic page, this skill is the right lens and the signature object must stay. Use dark-ui for calmer dark products; use technical-ui for dense tools where glow would hurt repeated work.

Non-Negotiable Principles

• Use #000000 as the environmental background. Do not use near-black substitutes as the page substrate.
• Glow replaces shadow. Elevation is made by lit borders, inner rims, contrast steps, and clipped light fields.
• Keep one primary neon accent and one secondary signal color. All other tones are black, graphite, smoke, white, or muted metal.
• Scanlines are atmosphere or system texture, not a readability tax. They must sit behind text or at very low opacity.
• Hologram and shader effects must attach to proof objects, cards, maps, editors, dashboards, or media. Do not decorate empty boxes.
• Cyber Neon is sharper than Dark UI: more black, more light emission, more kinetic signal, more terminal/code/media pressure.
• Every luminous element needs a job: CTA, active nav, live status, error, edge detection, cursor response, or hero energy.

Raw-Derived Archetypes

Pick one primary archetype. Do not average them.

Additional Refero Source Packs

• Twingate, "Security Neon Console": dark #0e0f11/#141617/#1d2023, text #fff/#a1a1aa/#cfcfd3, luminous accents #b6abff/#eef35f/#00cbaa/#6350dd; TT Hoves/Basis; display 68px, headings 48/54px, body 16px with tight negative tracking; tags 20px, cards 12px, buttons 50px, default 8px.
• Index, "Data Neon Terminal": deep stack #02030b/#04061c/#0c0a2b/#11132b/#292a4d, text #fbf1ff/#9b9ba4, CTA #ff3a63, spectrum linear-gradient(135deg,#02e5ef,#4859eb,#8a38f4), status #22a06b/#ffff00/#ffe684; Inter plus Index; display 56px with positive tracking .19-.25px; data cards 6-12px, pill 30px, round 50px.
• N8n, "Workflow Current": violet dark #0e0918/#1a1624/#1b1728/#2c2834, border #3e3a46, text #d1cece/#9d9797/#fff, ember CTA gradient and electric-current gradient; geomanist/geomanist-book; display 54px/.88/-1.08px, heading-lg 48px/.94; cards 16px, large 24px, nodes 12px, inputs/buttons 8px, pills 9999px.
• Doppler, "Secret Nebula": #1c1624/#2d2734, text #f1f0ec/#d0c9c4/#e5e7eb, secret green #00f575, violet #b997ff, violet/orange gradient plus pink radial nebula; Doppler font; display 64px, heading-lg 48px/-0.48px; tags/menu 20px, cards 20px, buttons 12px, 8px spacing.
• Hyperstudio, "Chromatic Black Studio": use black canvas, hard luminous color, oversized type, and reactive media edges; keep components sharp and attach glow only to active media/product proof.

Chainzoku Acid Chrome

Use when the page needs fashion-tech aggression, pale acid greens, massive display type, and capsule accents. The raw signal is black/white/acid with hard editorial scale. Type can be condensed and heavy, body copy stays calm, and panels use compact dark cards with pale neon accents. Best for culture, collectibles, racing, music, cyber-fashion, and launches with attitude.

Carry forward:

• Heavy display type with narrow line-height and wide black margins.
• Acid yellow-green or mint as the main CTA signal.
• Pill CTAs paired with sharp rectangular content panels.
• Large image blocks or rendered objects that look intentionally lit, not stock.

Avoid:

• Filling every component with acid color.
• Letting huge typography create six-line mobile wraps.
• Turning acid accents into a generic success green.

SBS Town Map UI

Use when the interface is itself a place: event map, world, data city, gaming lobby, location layer, or interactive directory. Typography is minimal and the experience carries identity through map overlays, tag buttons, neon markers, rounded controls, and movement.

Carry forward:

• Floating capsule controls over a spatial canvas.
• Neon marker language for location, availability, and live activity.
• Minimal type, high reliance on labels, symbols, and motion.
• Full-viewport interaction with the next section as a visible dock or rail.

Avoid:

• Large blocky card grids that kill the spatial illusion.
• Decorative pins that do not represent data.
• Map motion that continues when the user is reading.

Neon Developer Terminal

Use for developer products, cloud databases, AI infra, coding tools, and technical docs where the brand wants black, mono labels, green/cyan live signal, and high credibility. This is the most restrained Cyber Neon archetype.

Carry forward:

• Pure black or black-on-smoke substrate, thin luminous green edges.
• Terminal panels, query previews, deploy logs, and performance proof.
• Inter or similar sans with mono labels.
• Small badges that mean status, runtime, version, or environment.

Avoid:

• Cyberpunk excess that weakens trust.
• Neon body text.
• Glow around long code blocks.

JetBrains Deep-Space Control Room

Use for complex product ecosystems, developer platforms, IDE-like systems, AI labs, and multi-product launches. The raw signal is deep black plus controlled violet/magenta/blue gradients, product icons, tabs, carousels, and feature cards. It can be colorful, but the color is organized by product role.

Carry forward:

• Gradient fields as environmental light, not card backgrounds everywhere.
• Product badges with chromatic identity.
• Tab rows, carousels, audience selectors, and dense feature cards.
• Large hero object surrounded by UI proof.

Avoid:

• Gradient mush behind text.
• Too many equal neon colors.
• Treating every product color as a CTA.

OFF WHITE Hard Glitch Arcade

Use for campaign pages, gaming culture, limited drops, event pages, and editorial systems that need shock, type collision, and aggressive interaction. It combines black/white tension, vivid neon hits, serif or brand display contrast, 0px/30px geometry, and collage.

Carry forward:

• Binary geometry: square blocks plus pill links.
• Text blocks that feel like labels, warnings, or drop mechanics.
• Image collage with hard crops and neon overlays.
• Glitch cuts and attention-demanding hover states.

Avoid:

• Using the archetype for a calm SaaS dashboard.
• Constant glitch animation.
• Decorative quote marks or vague manifesto copy.

Semantic Token Packs

Start with one of these packs and tune to the brand. Keep role names semantic in code.

Acid Terminal

:root {
  --cn-bg: #000000;
  --cn-surface-1: #080908;
  --cn-surface-2: #101310;
  --cn-surface-3: #191d1a;
  --cn-text: #f6fff7;
  --cn-muted: #8f9b93;
  --cn-line: rgba(205, 251, 82, .18);
  --cn-accent: #cdfb52;
  --cn-signal: #34d59a;
  --cn-danger: #ff315f;
  --cn-glow-accent: 0 0 18px rgba(205, 251, 82, .42);
  --cn-glow-signal: 0 0 18px rgba(52, 213, 154, .35);
  --cn-radius-panel: 4px;
  --cn-radius-pill: 999px;
  --cn-grid-gap: clamp(12px, 1.8vw, 24px);
}

Violet Control Room

:root {
  --cn-bg: #000000;
  --cn-surface-1: #090911;
  --cn-surface-2: #121225;
  --cn-surface-3: #1c1b35;
  --cn-text: #f8f7ff;
  --cn-muted: #a9a3c7;
  --cn-line: rgba(174, 133, 255, .2);
  --cn-accent: #9b5cff;
  --cn-signal: #00e5ff;
  --cn-danger: #ff4f81;
  --cn-glow-accent: 0 0 24px rgba(155, 92, 255, .45);
  --cn-glow-signal: 0 0 22px rgba(0, 229, 255, .36);
  --cn-radius-panel: 6px;
  --cn-radius-pill: 999px;
}

Arcade Magenta

:root {
  --cn-bg: #000000;
  --cn-surface-1: #0c050b;
  --cn-surface-2: #170d16;
  --cn-surface-3: #261323;
  --cn-text: #fff7fc;
  --cn-muted: #c3a8bb;
  --cn-line: rgba(255, 94, 196, .22);
  --cn-accent: #ff5ec4;
  --cn-signal: #00fb34;
  --cn-warning: #ffb000;
  --cn-danger: #ff315f;
  --cn-glow-accent: 0 0 24px rgba(255, 94, 196, .44);
  --cn-radius-panel: 2px;
  --cn-radius-pill: 30px;
}

Execution Token Contract

Every Cyber Neon build must declare these tokens before component styling. Source packs can tune values, but components must use this vocabulary.

:root {
  --canvas: #000000;
  --surface: #090911;
  --surface-muted: #121225;
  --text: #f8f7ff;
  --text-muted: #a9a3c7;
  --line: rgba(174,133,255,.22);
  --action: #9b5cff;
  --action-strong: #00e5ff;
  --radius-control: 999px;
  --radius-card: 6px;
  --radius-panel: 8px;
  --font-sans: Geist, Inter, system-ui, sans-serif;
  --font-display: "Space Grotesk", "Rajdhani", var(--font-sans);
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --type-mono-xs: 500 10px/1.4 var(--font-mono);
  --type-mono-sm: 500 11px/1.4 var(--font-mono);
  --type-meta: 500 12px/1.45 var(--font-sans);
  --type-body-sm: 400 13px/1.55 var(--font-sans);
  --type-body: 400 15px/1.62 var(--font-sans);
  --type-ui: 600 14px/1.4 var(--font-sans);
  --type-card: 600 20px/1.18 var(--font-sans);
  --type-section-sm: 600 28px/1.08 var(--font-display);
  --type-section: 600 42px/1.02 var(--font-display);
  --type-display: 600 clamp(46px, 8vw, 82px)/.92 var(--font-display);
  --track-mono-xs: .16em;
  --track-mono-sm: .10em;
  --track-section: -.025em;
  --track-display: -.04em;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 80px;
  --s-11: 96px;
  --shadow-flat: none;
  --shadow-card: 0 0 18px rgba(155,92,255,.28);
  --shadow-panel: 0 0 32px rgba(0,229,255,.18);
  --shadow-hero: 0 0 96px rgba(155,92,255,.38);
  --shadow-modal: 0 0 80px rgba(0,0,0,.85), 0 0 32px rgba(155,92,255,.25);
  --shadow-action: 0 6px 18px color-mix(in srgb, var(--action), transparent 72%);
  --status-success-bg: rgba(52,211,153,.14);
  --status-success-fg: #34d399;
  --status-info-bg: rgba(96,165,250,.14);
  --status-info-fg: #60a5fa;
  --status-warning-bg: rgba(251,191,36,.16);
  --status-warning-fg: #fbbf24;
  --status-danger-bg: rgba(248,113,113,.16);
  --status-danger-fg: #f87171;
  --status-neutral-bg: rgba(255,255,255,.08);
  --status-neutral-fg: #a9a3c7;
  --state-hover-bg: color-mix(in srgb, var(--action), var(--surface) 90%);
  --state-selected-bg: color-mix(in srgb, var(--action), var(--surface) 84%);
  --state-focus-ring: 0 0 0 3px color-mix(in srgb, var(--action), transparent 72%);
  --ease-product: cubic-bezier(.2,.8,.2,1);
}

Pairing rules:

• hero-block: font: var(--type-display), letter-spacing: var(--track-display), text-wrap: balance, max-width: 22ch.
• section-head: font: var(--type-section), letter-spacing: var(--track-section), max-width: 18ch.
• card-block: title uses --type-card, body uses --type-body, metadata uses --type-meta.
• data-label: use --type-mono-sm, uppercase only for tags, code, coordinates, IDs, or status.
• status-pill: always uses one --status-{role}-bg/fg pair plus text, never color alone.

Tailwind to token mapping:

Status words:

Token rule: if a value can be expressed by cn/style tokens, do not invent raw Tailwind scale, arbitrary rgba shadows, or new status hex.

Accent Budget

Surface And Glow Ladder

Do not stack blur, glow, shadow, gradient, and noise on the same element. Pick one material behavior and make it readable.

First Viewport Protocol

The first viewport must declare Cyber Neon instantly:

• Nav: docked, floating, terminal, or capsule-based. Include active state.
• H1: concrete product/category noun, 2-3 desktop lines, balanced mobile wraps.
• Proof object: UI shell, map, terminal, rendered device, waveform, product grid, or gameplay frame.
• CTA: one lit primary action and one quiet secondary action.
• Next-section hint: a visible strip of cards, metrics, map tiles, pricing, or editorial continuation at the fold.

H1 implementation rules:

.cn-h1 {
  max-width: min(1120px, 100%);
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  line-height: .88;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .cn-h1 { font-size: clamp(2.4rem, 16vw, 4.6rem); line-height: .92; }
}

Signature Components

Use at least four for full-page work. Each must include real content, state, and mobile behavior.

Refero Expansion Component Deltas

• Neon CTAs must be tied to role: Twingate uses lavender/lime/security accents, Index uses hot pink CTA plus spectrum data gradient, N8n uses ember CTA for workflow execution, Doppler uses green for secret/success state, Hyperstudio uses chromatic media edges.
• Workflow nodes and data cards should be readable before they glow: N8n nodes 12px, inputs/buttons 8px; Index data cards 6-12px; Twingate cards 12px; Doppler cards 20px. Use border and fill first, light emission second.
• Status states need fixed colors and labels: success #22a06b or #00f575, warning #ffff00/#ffe684, active violet/lavender #b6abff/#b997ff, destructive/hot CTA #ff3a63.

Core Component Kit

Use these components before inventing new surfaces. Rename in implementation if needed, but preserve the props, states, and token usage.

type CyberNeonState = "default" | "hover" | "selected" | "loading" | "empty" | "error" | "success";
type CyberNeonStatus = "success" | "info" | "warning" | "danger" | "neutral";
export function CyberNeonStatusPill({ role, children }: { role: CyberNeonStatus; children: React.ReactNode }) {
  return <span className="cyber-neon-status-pill" data-role={role}>{children}</span>;
}
export function NeonCommandBarContract({ state = "default" }: { state?: CyberNeonState }) {
  return <section className="cyber-neon-hero-object" data-state={state} aria-label="Cyber Neon proof object" />;
}
export function HologramProductCardContract({ title, meta, state = "default" }: { title: string; meta: string; state?: CyberNeonState }) {
  return <article className="cyber-neon-card" data-state={state}><span>{meta}</span><strong>{title}</strong></article>;
}
export function ScanlineHeroCoreContract({ items }: { items: string[] }) {
  return <nav className="cyber-neon-rail">{items.map((item, index) => <button data-active={index === 0} key={item}>{item}</button>)}</nav>;
}
export function CyberNeonSectionHeader({ eyebrow, title, children }: { eyebrow: string; title: string; children: React.ReactNode }) {
  return <header className="cyber-neon-section-head"><span>{eyebrow}</span><h2>{title}</h2><p>{children}</p></header>;
}

.cyber-neon-status-pill {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: var(--s-1) 10px;
  border-radius: 999px;
  font: var(--type-mono-sm);
  letter-spacing: var(--track-mono-sm);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}
.cyber-neon-status-pill[data-role="success"] { background: var(--status-success-bg); color: var(--status-success-fg); }
.cyber-neon-status-pill[data-role="info"] { background: var(--status-info-bg); color: var(--status-info-fg); }
.cyber-neon-status-pill[data-role="warning"] { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.cyber-neon-status-pill[data-role="danger"] { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.cyber-neon-hero-object {
  min-height: clamp(320px, 48vw, 620px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-hero);
  overflow: hidden;
}
.cyber-neon-card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: background 180ms var(--ease-product), box-shadow 180ms var(--ease-product), transform 180ms var(--ease-product);
}
.cyber-neon-card[data-state="selected"] { background: var(--state-selected-bg); box-shadow: var(--shadow-panel); }
.cyber-neon-card[data-state="loading"] { opacity: .62; pointer-events: none; }
.cyber-neon-card[data-state="error"] { border-color: var(--status-danger-fg); }
.cyber-neon-card > span { font: var(--type-meta); color: var(--text-muted); }
.cyber-neon-card > strong { font: var(--type-card); color: var(--text); }
.cyber-neon-rail { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cyber-neon-rail button { padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); font: var(--type-ui); color: var(--text-muted); }
.cyber-neon-rail button[data-active="true"] { background: var(--state-selected-bg); color: var(--text); box-shadow: var(--state-focus-ring); }
.cyber-neon-section-head { display: grid; gap: var(--s-3); max-width: 760px; }
.cyber-neon-section-head > span { font: var(--type-mono-xs); letter-spacing: var(--track-mono-xs); text-transform: uppercase; color: var(--text-muted); }
.cyber-neon-section-head h2 { margin: 0; font: var(--type-section); letter-spacing: var(--track-section); text-wrap: balance; color: var(--text); }
.cyber-neon-section-head p { margin: 0; font: var(--type-body); color: var(--text-muted); }
@media (max-width: 760px) {
  .cyber-neon-hero-object { min-height: 280px; }
  .cyber-neon-rail { overflow-x: auto; flex-wrap: nowrap; }
}

NeonCommandBar

Use for command input, route search, prompt launch, or key app action. It should look like an instrument, not a generic search field.

Structure:

• Left status light or command glyph.
• Input or selected command text.
• Shortcut or mode pill on the right.
• Inline validation under the shell, not inside the input height.

TSX:

type CommandState = "idle" | "loading" | "error" | "submitted" | "disabled";
export function NeonCommandBar({ state = "idle" }: { state?: CommandState }) {
  return (
    <form className="cn-command" data-state={state}>
      <span className="cn-command__pulse" aria-hidden="true" />
      <label className="sr-only" htmlFor="launch-command">Launch command</label>
      <input id="launch-command" placeholder="Deploy night build..." disabled={state === "disabled"} />
      <button type="submit" disabled={state === "loading" || state === "disabled"}>
        {state === "loading" ? "Syncing" : "Execute"}
      </button>
      {state === "error" && <p className="cn-command__message">Command failed. Check token and retry.</p>}
    </form>
  );
}

CSS:

.cn-command {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 8px 8px 16px;
  color: var(--cn-text);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-pill);
}
.cn-command:focus-within {
  border-color: color-mix(in srgb, var(--cn-accent), white 14%);
  box-shadow: var(--cn-glow-accent);
}
.cn-command input {
  min-width: 0;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}
.cn-command button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--cn-radius-pill);
  color: #000000;
  background: var(--cn-accent);
}
.cn-command[data-state="error"] {
  border-color: var(--cn-danger);
}
@media (max-width: 560px) {
  .cn-command { grid-template-columns: auto minmax(0, 1fr); border-radius: 18px; }
  .cn-command button { grid-column: 1 / -1; width: 100%; }
}

HologramProductCard

Use for cards that need depth and identity: products, skins, plans, tools, worlds, models, marketplaces. The hologram is a material layer, not a background image substitute.

Rules:

• Stable aspect-ratio for media.
• 1px lit rim and optional conic highlight.
• Content on a protected smoke slab.
• Selected state uses edge glow plus a clear label.
• Loading state uses a static scan skeleton, not shimmer spam.

export function HologramProductCard({ selected = false, unavailable = false }) {
  return (
    <article className="cn-holo-card" data-selected={selected} data-unavailable={unavailable}>
      <div className="cn-holo-card__media">
        <span className="cn-holo-card__shader" aria-hidden="true" />
      </div>
      <div className="cn-holo-card__body">
        <p className="cn-kicker">Quantum asset</p>
        <h3>Neon relay skin</h3>
        <p>Low-latency visual package with reactive edge lighting.</p>
        <button>{selected ? "Selected" : "Inspect"}</button>
      </div>
    </article>
  );
}

.cn-holo-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  color: var(--cn-text);
  background: var(--cn-surface-1);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cn-radius-panel);
}
.cn-holo-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: conic-gradient(from 160deg, transparent, rgba(255,255,255,.24), var(--cn-accent), transparent 38%);
  opacity: .22;
  mix-blend-mode: screen;
}
.cn-holo-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.18), transparent 36%), #000000;
}
.cn-holo-card__shader {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.18) 45%, transparent 54%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 6px);
  opacity: .46;
}
.cn-holo-card__body {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px;
  background: rgba(0,0,0,.72);
}
.cn-holo-card[data-selected="true"] {
  border-color: var(--cn-accent);
  box-shadow: var(--cn-glow-accent);
}
.cn-holo-card[data-unavailable="true"] {
  filter: grayscale(.8);
}

SystemStatusMap

Use for maps, networks, game worlds, location grids, observability, and venue/event systems.

State contract:

• Online: secondary signal and steady dot.
• Degraded: warning color and slow pulse.
• Offline: danger edge plus clear recovery copy.
• Selected: label, outline, and detail panel.
• Mobile: convert spatial map into an ordered status list if labels overlap.

Implementation notes:

• Use CSS grid or SVG/canvas for positions. Do not absolutely place dozens of labels without collision rules.
• Give pins accessible names and keyboard focus.
• Stop pings under reduced motion.

ShaderPanel

Use for hero media, product proof, AI visualization, game cards, and holographic objects. It needs a fallback image or static gradient because shaders can fail, especially in SSR or low-power devices.

Rules:

• Render content first, shader second, scanlines last.
• Clip pointer glow inside the panel.
• Avoid blur over large scrolling areas.
• Make reduced-motion freeze the shader at a pleasing frame.

Scanlines, Glitch, And Hologram Recipes

.cn-stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  color: var(--cn-text);
  background: #000000;
  overflow: hidden;
}
.cn-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 72% 16%, color-mix(in srgb, var(--cn-accent), transparent 78%), transparent 30rem),
    radial-gradient(circle at 18% 80%, color-mix(in srgb, var(--cn-signal), transparent 86%), transparent 24rem);
}
.cn-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px);
  opacity: .22;
  mix-blend-mode: screen;
}
.cn-lit-edge {
  position: relative;
}
.cn-lit-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--cn-accent), white 12%);
  border-radius: inherit;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--cn-accent), transparent 72%);
}

@keyframes cn-scanline-roll {
  from { transform: translateY(-12px); }
  to { transform: translateY(12px); }
}
@keyframes cn-glow-breathe {
  0%, 100% { opacity: .58; filter: saturate(1); }
  50% { opacity: .92; filter: saturate(1.25); }
}
@keyframes cn-glitch-cut {
  0%, 92%, 100% { clip-path: inset(0); transform: translate(0); }
  94% { clip-path: inset(18% 0 55% 0); transform: translateX(-2px); }
  96% { clip-path: inset(62% 0 18% 0); transform: translateX(2px); }
}
.cn-scan-motion { animation: cn-scanline-roll 10s linear infinite; }
.cn-live-core { animation: cn-glow-breathe 5s ease-in-out infinite; }
.cn-glitch:hover .cn-glitch__layer { animation: cn-glitch-cut 520ms steps(2, end) 1; }
@media (prefers-reduced-motion: reduce) {
  .cn-scan-motion, .cn-live-core, .cn-glitch:hover .cn-glitch__layer {
    animation: none !important;
  }
}

Motion Rules

• Cyber motion can be kinetic but must remain purposeful: 120-180ms flicker/scan feedback, 180-260ms node activation, 300-700ms current/gradient sweep on workflow paths. Disable scanlines, current sweeps, and glow pulses under prefers-reduced-motion; keep static active borders and status chips.

Complete Page Protocols

// Night Lab Launch
<main data-skill="cyber-neon" data-archetype="night-lab-launch">
  <CyberNeonNav mode="black-stage" primaryAction="Enter system" />
  <ScanlineHeroCoreContract state="selected" />
  <TelemetryChipRailContract items={["LIVE NODE", "GPU 91%", "SYNC 04"]} />
  <SystemStatusMapContract zones={["core", "edge", "offline"]} />
  <LuminousPricingDeckContract plans={["Solo", "Crew", "Lab"]} />
</main>
// Spatial Map Overlay
<main data-skill="cyber-neon" data-archetype="spatial-map-overlay">
  <HologramProductCardContract title="Sector 7" meta="18 active signals" state="selected" />
  <NeonCommandBarContract command="scan --district=west" />
  <CursorReactivePanelContract state="loading" />
  <CyberNeonStatusPill role="warning">Signal drift</CyberNeonStatusPill>
</main>

// Night Lab Launch
<main data-skill="cyber-neon" data-archetype="night-lab-launch">
  <CyberNeonNav mode="black-stage" primaryAction="Enter system" />
  <ScanlineHeroCoreContract state="selected" />
  <TelemetryChipRailContract items={["LIVE NODE", "GPU 91%", "SYNC 04"]} />
  <SystemStatusMapContract zones={["core", "edge", "offline"]} />
  <LuminousPricingDeckContract plans={["Solo", "Crew", "Lab"]} />
</main>
// Spatial Map Overlay
<main data-skill="cyber-neon" data-archetype="spatial-map-overlay">
  <HologramProductCardContract title="Sector 7" meta="18 active signals" state="selected" />
  <NeonCommandBarContract command="scan --district=west" />
  <CursorReactivePanelContract state="loading" />
  <CyberNeonStatusPill role="warning">Signal drift</CyberNeonStatusPill>
</main>

Use motion to prove the interface is alive:

• Glow pulse: only active CTA, live status, selected map node, or hero core.
• Scanline drift: very low opacity, behind content, no more than one overlay per viewport.
• Pointer glow: clipped inside cards or panels; it must not move layout or cover text.
• Glitch: event-like and short. Use on hover, route change, reveal, or alert, not constantly.
• Shader drift: slow material movement on media/proof containers; pause on interaction-heavy views.
• Parallax: small depth difference between hero proof and background light, never between text lines.

Reduced motion:

• Disable continuous animation.
• Replace shimmer with static skeletons.
• Preserve active/selected/error states through color, label, and border changes.
• Leave scanline texture static or remove it if it hurts contrast.

Absolute Bans

• No neon glow on every border, word, icon, and card.
• No saturated text on saturated backgrounds.
• No fake cyber clutter unless it supports product state, navigation, or interaction.
• No raw Tailwind typography, spacing, radius, color, or shadow defaults when a style token exists.
• No generic centered hero without the style's required proof/media/type object.
• No status colors without semantic role mapping and visible text.
• No component states left implicit: include hover, focus-visible, selected, loading, empty, error, success where relevant.

Reference Use

For deeper source extraction, load references/refero-style-database.md. For source-specific inspiration, load only the selected file under references/sources/.

State Pattern

Do not rely on opacity alone. Every state needs a role-specific visual change.

const cyberState = {
  idle: "border-[color:var(--cn-line)] bg-[color:var(--cn-surface-1)]",
  hover: "hover:-translate-y-0.5 hover:border-[color:var(--cn-accent)]",
  focus: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--cn-accent)]",
  selected: "data-[selected=true]:border-[color:var(--cn-accent)] data-[selected=true]:text-[color:var(--cn-text)]",
  loading: "aria-busy:pointer-events-none aria-busy:cursor-wait",
  disabled: "disabled:pointer-events-none disabled:saturate-0 disabled:text-[color:var(--cn-muted)]",
  error: "data-[state=error]:border-[color:var(--cn-danger)] data-[state=error]:text-[color:var(--cn-danger)]",
  success: "data-[state=success]:border-[color:var(--cn-signal)] data-[state=success]:text-[color:var(--cn-signal)]"
};

Layout Patterns

Black Void Plus Instrument Cluster

Use a large black stage with one dense UI cluster. Good for AI labs and launch pages.

• 12-column desktop grid.
• H1 spans 7-10 columns.
• Proof object spans 5-7 columns, often offset.
• Metadata and chips form a rail, not random badges.
• Fold reveals secondary proof rather than blank bottom padding.

Spatial Map Overlay

Use a full-bleed canvas or image with floating controls. Good for events, worlds, maps, and networks.

• Controls live in top/side docks.
• Bottom sheet carries selected detail.
• Pins use semantic status colors.
• Mobile converts to map plus sheet or list-only if needed.

Terminal Proof Stack

Use layered code, logs, metrics, and command bars. Good for developer products.

• Code blocks are crisp, not glowing.
• Glow attaches to active cursor, run button, status dot, or selected environment.
• Use mono for code and labels, not long marketing copy.

Cyber Editorial Split

Use giant type, hard crops, and sharp section cuts. Good for campaigns and cultural pages.

• Type and imagery should overlap only when readability is proven.
• Use scanlines as chapter texture.
• CTA remains conventional enough to click.

Accessibility And Readability

• Text contrast must pass without glow. Glow is decorative emission, not the source of legibility.
• Avoid neon on neon. Put neon text on black/smoke only, or use black text on filled neon buttons.
• Give scanline overlays pointer-events: none.
• Provide focus rings that are visible on black and on lit surfaces.
• Do not use flicker above safe, subtle levels. Avoid rapid flashing.
• Keep touch targets at least 44px high.
• Use semantic labels for icon-only controls and map pins.
• Do not hide error recovery behind color alone.

Mobile Rules

• Reduce density by collapsing telemetry rails into horizontal scroll or segmented tabs.
• Limit hero proof to one primary object plus one secondary stat.
• Keep neon accents bigger but fewer; tiny glowing details become noise on mobile.
• Use shorter scanline texture or remove if it aliases.
• Convert hover-only effects into tap/selected states.
• Ensure pill CTAs wrap or stack before labels clip.

Anti-Patterns

• Near-black page backgrounds in place of the #000000 mandate.
• Gray shadow elevation instead of colored light, edges, and surface contrast.
• Neon gradients on every card.
• Glowing paragraphs.
• Constant glitch on readable text.
• Purple-blue one-note pages that could be any AI landing page.
• Scanlines over form fields or small body copy.
• Empty hologram panels with no product proof.
• Random badges that do not encode status, category, trust, or action.
• Marketplace cards that change size on hover.

Pre-Output Checklist

• First viewport contains a real luminous proof object.
• One Cyber Neon archetype is clearly dominant.
• Execution tokens are declared and component CSS uses them.
• Typography uses named pairings, not raw Tailwind defaults.
• Spacing uses --s-* or style tokens, not mixed arbitrary padding.
• Radius, depth, and state colors use the token contract.
• Status labels use role mapping plus --status-{role}-bg/fg.
• Components include hover, focus-visible, selected, loading, empty, error, and success where relevant.
• Motion maps to glow/scanline signal and has a reduced-motion fallback.
• Mobile layout preserves the style without overflow, unreadable text, or hidden controls.