--- 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 `` Before substantial UI code, output a compact `` 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 | Control | Setting | | --- | --- | | density | Medium. Use concentrated telemetry clusters and large negative voids. | | motion | High but controlled. Flicker, scan, parallax, pointer glow, and data pulse are allowed. | | decoration | Medium-high, but every decoration must be part of a signal system. | | contrast | Deep dark substrate with luminous edges and high-contrast text. | | radius | 999px for capsule CTAs, 2-6px for panels, 0px for terminal blocks. | | type | Sharp grotesk plus mono labels. Avoid cute rounded fonts. | | assets | Shader fields, holographic product frames, scanline overlays, rendered devices, nightlife/game imagery. | ## 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 - dope.security violet cyber shell: `#090909/#f7f9fa/#f0f0f0/#6b6b6b/#475467/#af50ff` with cosmic radial/linear gradients; Whyte Inktrap 300-700, GrandSlang display, Whyte Inktrap Mono labels; display `88px/.8/-0.07em`; 4px base, 64px sections, 16px cards, buttons 8px, cards 19.2px, tags 99px. - Navigate saturated cyber playground: `#141414/#fdf9f0/#c7ff69/#7a78ff/#ff6d38/#00a652/#478bff/#ffc412`; use lime for the primary CTA, violet/orange/green/blue/yellow as role-coded cards or illustrations; keep dark ink panels at `#141414` and make each neon block a named state, not decoration. - Auros spectrum trading terminal: `#012624/#011d1c/#003734/#bbc7c6/#edfffe/#fde9ff` plus spectrum gradients; Matter 400/500 from 10-295px, display tracking to `-0.046em`; 1440px max, 4px base, 68px sections, 40px cards, 20px gaps; forms/buttons/images 6px, cards 16px. - 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 ```css :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 ```css :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 ```css :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 Refero ready-to-use deltas from dope.security/Navigate/Auros: - Token roles: dope.security violet `#af50ff` on `#090909`; Navigate dark/play accents `#141414/#fdf9f0/#c7ff69/#7a78ff/#ff6d38/#00a652/#478bff/#ffc412`; Auros teal spectrum `#012624/#011d1c/#003734/#bbc7c6/#edfffe/#fde9ff`. - Type roles: Whyte Inktrap 300-700 display `88px/.8/-0.07em`; Navigate uses bold display with dark/off-white panels; Auros Matter 10-295px with display tracking to `-0.046em`. Every Cyber Neon build must declare these tokens before component styling. Source packs can tune values, but components must use this vocabulary. ```css :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: | Tailwind default | Cyber Neon token | | --- | --- | | `text-xs`, `text-sm` | `--type-body-sm` or `--type-meta` | | `text-base`, `text-lg` | `--type-body` or `--type-card` | | `text-2xl`, `text-3xl` | `--type-card` or `--type-section-sm` | | `text-4xl`, `text-5xl` | `--type-section` | | `text-6xl`, `text-7xl` | `--type-display` | | `p-3`, `p-4`, `p-5` | `var(--s-3)`, `var(--s-4)`, `var(--s-5)` | | `gap-3`, `gap-4`, `gap-6` | `var(--s-3)`, `var(--s-4)`, `var(--s-6)` | | `rounded-md`, `rounded-xl`, `rounded-2xl` | `--radius-control`, `--radius-card`, `--radius-panel` | | `shadow-sm`, `shadow-md` | `var(--shadow-card)` | | `shadow-lg`, `shadow-xl` | `var(--shadow-panel)` or `var(--shadow-hero)` | | `shadow-2xl` | `var(--shadow-modal)` | | `shadow-*` | glow tokens `--shadow-card/panel/hero`, never gray depth | | `bg-slate-*`, `bg-gray-*` | `--canvas`, `--surface`, `--surface-muted`; page stage stays `#000000` | Status words: | Role | Words | | --- | --- | | `success` | Approved, Synced, Live, Paid, Complete, Stable | | `info` | Active, In review, Processing, Current, Draft | | `warning` | Pending, Stale, Slow, Watch, Needs review | | `danger` | Failed, Blocked, Critical, Error, Escalate | | `neutral` | Empty, Disabled, Skipped, Archived, Ready passive | 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 | Role | Budget | Notes | | --- | --- | --- | | Primary CTA | 1 accent | Fill or lit border. Do not make all buttons neon. | | Live/success | 1 secondary signal | Use for pings, active data, success, and online state. | | Danger | Reserved | Red/pink/orange only for destructive, alert, or failure states. | | Typography | Tiny | Neon text is limited to labels under 18px or display masks, never paragraphs. | | Background glow | 1-2 fields | Attach to hero object or active region. Keep content on protected surfaces. | | Scanlines | 1 overlay | Must be subtle and disabled/reduced when needed. | ## Surface And Glow Ladder | Layer | Role | Treatment | | --- | --- | --- | | Stage | Environmental black | `#000000`, isolated, no texture required. | | Atmosphere | Far glow | Radial/conic gradients at low opacity, behind proof only. | | Grid/noise | Sensor layer | Repeating scanlines, dot grid, or shader grain at 3-12 percent opacity. | | Panel | Readable work | Smoke fill, 1px luminous line, minimal or no blur. | | Active edge | Selection/action | Colored glow clipped to edge or pseudo-element. | | Text layer | Meaning | White/off-white, no glow needed for legibility. | | Overlay | Modal/tooltips | Darker than panel, clearer border, no mushy glass. | Do not stack blur, glow, shadow, gradient, and noise on the same element. Pick one material behavior and make it readable. ## First Viewport Protocol Refero layout deltas: - dope.security: 4px base, 64px sections, 16px cards, 8px buttons, 19.2px cards, 99px tags; frosted violet command center. - Navigate: black/off-white stage with one lime CTA `#c7ff69`; other hues are role-coded cards/illustration. - Auros: 1440px max, 4px base, 68px sections, 40px cards, 20px gaps, 6px forms/buttons/images, 16px cards. 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: ```css .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 Refero component deltas: - dope.security: violet filled CTA, mono label blocks, pill filters, frosted cards. - Navigate: lime CTA, vivid role cards, dark nav, off-white content panels. - Auros: teal data panels, 6px gradient buttons/forms, 16px cards, spectrum hero field. - State transfer: dope.security action/focus uses `#af50ff`; Navigate selected/primary uses `#c7ff69`; Auros action gradients stay on buttons or data streams, not text. 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`. | Component | Use | Required states | | --- | --- | --- | | `NeonCommandBar` | Search, command, launch, route switching, prompt entry. | idle, focus-visible, loading, submitted, error, disabled. | | `HologramProductCard` | Product, skin, model, asset, feature, or plan card. | idle, hover, selected, loading, unavailable, success. | | `ScanlineHeroCore` | First-viewport proof object with live light texture. | compact, expanded, reduced-motion, data-empty. | | `TelemetryChipRail` | Status chips, filters, tags, runtime indicators. | idle, selected, alert, keyboard focus, overflow. | | `GlitchTitleMask` | Editorial title, event title, drop title, campaign header. | idle, hover, active, reduced-motion. | | `LuminousPricingDeck` | Conversion and plan selection with neon only on chosen path. | default, selected, loading, error, success. | | `SystemStatusMap` | Spatial status, network, venue, fleet, or region map. | online, degraded, offline, selected, mobile list. | | `ShaderPanel` | Holographic media/proof container. | idle, hover, paused, reduced-motion, fallback image. | ### Core Component Kit Use these components before inventing new surfaces. Rename in implementation if needed, but preserve the props, states, and token usage. ```tsx 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 {children}; } export function NeonCommandBarContract({ state = "default" }: { state?: CyberNeonState }) { return

; } export function HologramProductCardContract({ title, meta, state = "default" }: { title: string; meta: string; state?: CyberNeonState }) { return

{meta}{title}

; } export function ScanlineHeroCoreContract({ items }: { items: string[] }) { return ; } export function CyberNeonSectionHeader({ eyebrow, title, children }: { eyebrow: string; title: string; children: React.ReactNode }) { return

{eyebrow}

{title}

{children}

; } ``` ```css .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: ```tsx type CommandState = "idle" | "loading" | "error" | "submitted" | "disabled"; export function NeonCommandBar({ state = "idle" }: { state?: CommandState }) { return (

Launch command {state === "error" &&

Command failed. Check token and retry.

} ); } ``` CSS: ```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. ```tsx export function HologramProductCard({ selected = false, unavailable = false }) { return (

Quantum asset

Neon relay skin

Low-latency visual package with reactive edge lighting.

); } ``` ```css .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 ```css .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%); } ``` ```css @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 Refero motion delta: - dope.security and Auros allow atmospheric gradient movement only behind protected readable panels; Navigate can use playful hover color shifts. Use existing cyber-neon timing and honor `prefers-reduced-motion`. - 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 ```tsx // Night Lab Launch

// Spatial Map Overlay

Signal drift

``` ```tsx // Night Lab Launch

// Spatial Map Overlay

Signal drift

``` 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 - Refero anti-dilution: do not use every Navigate color as a CTA; lime `#c7ff69` is primary, other colors are roles. - Do not place Auros spectrum gradients behind body text without a dark panel. - 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. ```tsx 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.

cyber-neon

Install this skill

Comments