Style · 12
Cyberpunk Cyberpunk = a near-black base with teal data highlights and one warning accent on hard glowing edges.
Night city: teal data, hard black, one warning color.
Preview North Ops Logs Fleet grep fleet Deploy Night city. Teal on black. Teal telemetry on hard black. Games are the weather, not a storefront.
Uptime 00:41 Edge
Error 0.4% Burn
Fleet 128 Nodes
Patch OK GAME-SRV
Node State Clock
EDGE-7 SYS.OK 00:41:12
GAME-SRV PATCH night
LOG-12 WARN 0.4%
Page Overall Page Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
BUILD
- Build a complete Cyberpunk night-ops / data-product homepage. Not a card, not an isolated navbar, not a game storefront, not tabs.
- Domain: Devtools as the product. Games is atmosphere (night city, a PATCH feed), not Steam.
STYLE
- Cyberpunk: night black, teal data, one warning accent
- Ground #0A0A0A full-bleed. Panels #111111. Type #E8FFFB. Data and edges #00C2B3. Deploy #FF5A36 (coral, never magenta)
- Radius 2–4px max. IBM Plex Mono for links, figures, status. Plus Jakarta Sans for the title. No Inter
LAYOUT
- Full-bleed night shell. Left rail NORTH / Ops / Logs / Fleet. Top chrome: separate Ops / Logs / Fleet, grep search, Deploy
- Main well: four telemetry KPIs, chart, three-row fleet table, status bar — a finished ops home, not two empty cells
SECTIONS
1. Status hero: "Night city. Teal on black." plus a mono readout. CTA Deploy
2. Four KPI tiles: Uptime 00:41, Error 0.4%, Fleet 128, Patch OK
3. Chart well + three-row fleet table (EDGE-7 / GAME-SRV / LOG-12)
4. Status bar: SYS.OK · 00:41:12 · EDGE-7 — not a marketing footer
INTERACTION
- Hover: teal edge plus glow. Do not lift. Do not add purple neon
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia, navy haze. No Inter. No emoji icons
- Blacks are #0A0A0A / #111111. Warning is #FF5A36, never magenta
- Do not output a landing hero plus two empty cells. Do not build a game marketplace home
MOTION
- Scanline: 3s linear loop. Keep it to one element.
- Glitch: steps() flickers under 200ms, used sparingly and never on text a user must read.
- Hover: 120ms colour jump, no tween.
- prefers-reduced-motion: disable scanline and glitch entirely.
Preview Specimen
Cyberpunk Night city: teal data, hard black, one warning color.
Continue Card Card Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a single Cyberpunk card. Not a page, not a dashboard.
STYLE
- Night black ground #0A0A0A. Card fill #111111, 1px teal edge #00C2B3, radius 4px
- Kicker in IBM Plex Mono #00C2B3. Title #E8FFFB. Body #9AA8A6
- Continue button coral #FF5A36, radius 2px, white type
LAYOUT
- One card: kicker SPECIMEN, title, summary, one primary button
- No navbar, no extra tiles
INTERACTION
- Hover: teal edge plus glow 0 0 16px rgba(0,194,179,0.35). Do not lift 2px. No purple neon
CONSTRAINTS
- No purple, indigo, navy, or violet neon. Dark is #0A0A0A / #111111, not blue-black
- Accent is #FF5A36, not a warmer #FF6B4A. No Inter
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to night teal — not default shadcn
Buttons Buttons Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Cyberpunk button row only: Continue (solid), Save (outline), Skip (ghost). Not a card, not a page.
STYLE
- Stage #0A0A0A. Radius 2px on every control
- Continue: fill #FF5A36, white type
- Save: transparent, type and 1px inset edge #00C2B3
- Skip: ghost type #9AA8A6
LAYOUT
- One horizontal row. No card, no page chrome
INTERACTION
- Hover: teal edge + glow. No lift. No purple neon
CONSTRAINTS
- Coral is #FF5A36. No purple / indigo / navy. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Button — do not keep default shadcn look
Preview North Overview Billing Open
Navbar Navbar Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Cyberpunk site navbar only. Not tabs, not a page.
STYLE
- Charcoal-black bar on #0A0A0A. Wordmark North in #E8FFFB
- Links Overview and Billing in IBM Plex Mono #00C2B3
- Open: coral #FF5A36, radius 2px
LAYOUT
- Single horizontal chrome: wordmark, two links, Open. No panel
INTERACTION
- Open hover: teal glow on the coral. Links may brighten teal. No lift, no purple
CONSTRAINTS
- No purple neon. Dark is #0A0A0A, not navy. Accent #FF5A36. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation — not default shadcn
Preview Overview Billing Activity
SECTION
Two lines of English dummy for Overview. Plan usage and upcoming invoices stay in this panel.
Tabs Tabs Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Cyberpunk Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.
STYLE
- Tab labels in IBM Plex Mono. Selected: type #00C2B3 plus teal underline or glow
- Unselected: #9AA8A6. Panel: #111111, 1px teal edge #00C2B3, radius 4px, type #E8FFFB / mute #9AA8A6
- Ground #0A0A0A
LAYOUT
- Horizontal tablist + one panel. No wordmark, no Open
INTERACTION
- Hover on unselected: teal stroke lights and glows. No lift. Selected keeps teal underline/glow
CONSTRAINTS
- No purple / indigo neon. Not a site navbar. Accent if used is #FF5A36, not #FF6B4A
- No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs — do not keep default shadcn look
What is Cyberpunk? Cyberpunk is night lighting plus signal color. Avoid purple haze; use teal and warning coral on black.
Elements Night black Teal data Warning accent Put this word in the prompt.
Copy Prompt BUILD
- Build a complete Cyberpunk night-ops / data-product homepage. Not a card, not an isolated navbar, not a game storefront, not tabs.
- Domain: Devtools as the product. Games is atmosphere (night city, a PATCH feed), not Steam.
STYLE
- Cyberpunk: night black, teal data, one warning accent
- Ground #0A0A0A full-bleed. Panels #111111. Type #E8FFFB. Data and edges #00C2B3. Deploy #FF5A36 (coral, never magenta)
- Radius 2–4px max. IBM Plex Mono for links, figures, status. Plus Jakarta Sans for the title. No Inter
LAYOUT
- Full-bleed night shell. Left rail NORTH / Ops / Logs / Fleet. Top chrome: separate Ops / Logs / Fleet, grep search, Deploy
- Main well: four telemetry KPIs, chart, three-row fleet table, status bar — a finished ops home, not two empty cells
SECTIONS
1. Status hero: "Night city. Teal on black." plus a mono readout. CTA Deploy
2. Four KPI tiles: Uptime 00:41, Error 0.4%, Fleet 128, Patch OK
3. Chart well + three-row fleet table (EDGE-7 / GAME-SRV / LOG-12)
4. Status bar: SYS.OK · 00:41:12 · EDGE-7 — not a marketing footer
INTERACTION
- Hover: teal edge plus glow. Do not lift. Do not add purple neon
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia, navy haze. No Inter. No emoji icons
- Blacks are #0A0A0A / #111111. Warning is #FF5A36, never magenta
- Do not output a landing hero plus two empty cells. Do not build a game marketplace home
MOTION
- Scanline: 3s linear loop. Keep it to one element.
- Glitch: steps() flickers under 200ms, used sparingly and never on text a user must read.
- Hover: 120ms colour jump, no tween.
- prefers-reduced-motion: disable scanline and glitch entirely.