Cyberpunk UI

Also called: Neon noir, Cyberpunk 2077 UI

Acid-yellow and hot-magenta neon on near-black, chamfered corners, glitch-split headlines and terminal labels — high-tech, low-life.

“Night City”Futuristic & TechEra: 1980s fiction → 2020s gamesEdgyBoldTechy

Open full screen ↗

cyberpunk-ui / landingEN

cyberpunk-ui / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×0.95Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

neon yellow on blackhot magenta accentchamfered cut cornersglitch RGB splitterminal mono labelsscanlineshazard stripesuppercase wide headlines

Cyberpunk UI borrows from neon-soaked sci-fi cities and their games: a near-black base, one screaming acid-yellow, a hot-magenta and an electric-cyan accent. Every panel and button has a 45° chamfered (cut) corner instead of a radius, headlines are wide, uppercase and RGB-split like a glitching screen, and small mono labels read like terminal output (// SYS.ONLINE, [01]). Scanlines and hazard stripes add grit; the result is loud, aggressive and unmistakably in-world.

Best for

Game launchers, store pages and esports
Hacker events, CTFs and game jams
Music/club nights and streetwear drops
Crypto and web3 communities

Avoid for

Healthcare, banking and anything that must feel calm and safe
Long-form reading
Older or low-vision audiences (glitch and neon fatigue)

✓ Do

Cut corners with clip-path at 12–18px on one or two diagonal corners
Reserve #FCEE0A yellow for the main action and key numbers
Prefix labels with mono “//”, “>” or [01] codes
Keep glitch to headlines and hover states, max 2–3px offset

✕ Don't

No rounded corners or pill buttons
No soft pastel gradients, frosted blur or grey drop shadows (neon glows are fine)
Don’t glitch body text or animate it constantly
Don’t let magenta and yellow fight on the same element

Not to be confused with

HUD / Sci-Fi FUI →HUD/FUI is thin, cyan, calm and wireframe-like; Cyberpunk is loud, solid yellow/magenta blocks with cut corners and glitch.Retro-Futurism →Retro-futurism is chrome, sunsets and 80s optimism with grids to the horizon; Cyberpunk is dystopian, dark, gritty and terminal-labelled.Vaporwave →Vaporwave is pastel pink/teal nostalgia with marble busts; Cyberpunk is acid yellow and black with aggressive angular panels.

On mobile

Keep chamfers on cards and the main button only (12px), drop scanlines to a static 4% overlay, and make the tab bar a black strip with a yellow active block; glitch only on the screen title.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinOrbitron · 700/900

The quick brown fox

Heading · ThaiChakra Petch · 600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinRajdhani · 500/600/700

Clear words make shared decisions.

Body · ThaiChakra Petch · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Chakra Petch is the Thai face built with chamfered sci-fi corners — it shares Orbitron’s squared, cut geometry and Rajdhani’s narrow technical rhythm.

Colour palette

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`1px`
Shadow	`0 0 0 1px rgba(252,238,10,0.12), 4px 4px 0 #000`
Display	`clamp(2.6rem, 6.4vw, 5.2rem)`
Motion	`90ms steps(3, end)`
Density	`×0.95`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Cyberpunk UI (cyberpunk-ui) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono:wght@400&family=Chakra+Petch:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 0px;
  --background: #08080D;
  --foreground: #F2F2F7;
  --card: #111119;
  --card-foreground: #F2F2F7;
  --popover: #111119;
  --popover-foreground: #F2F2F7;
  --primary: #FCEE0A;
  --primary-foreground: #08080D;
  --secondary: #FF2A6D;
  --secondary-foreground: #08080D;
  --muted: #191924;
  --muted-foreground: #A3A3BA;
  --accent: #191924;
  --accent-foreground: #F2F2F7;
  --destructive: #FF3B5C;
  --border: #34344A;
  --input: #34344A;
  --ring: #FCEE0A;
  --chart-1: #FCEE0A;
  --chart-2: #FF2A6D;
  --chart-3: #05D9E8;
  --chart-4: #2BFF88;
  --chart-5: #B266FF;
  --sidebar: #111119;
  --sidebar-foreground: #F2F2F7;
  --sidebar-primary: #FCEE0A;
  --sidebar-primary-foreground: #08080D;
  --sidebar-accent: #191924;
  --sidebar-accent-foreground: #F2F2F7;
  --sidebar-border: #34344A;
  --sidebar-ring: #FCEE0A;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Cyberpunk UI (cyberpunk-ui) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono:wght@400&family=Chakra+Petch:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #08080D;
  --color-surface: #111119;
  --color-surface-2: #191924;
  --color-text: #F2F2F7;
  --color-text-muted: #A3A3BA;
  --color-primary: #FCEE0A;
  --color-on-primary: #08080D;
  --color-secondary: #FF2A6D;
  --color-on-secondary: #08080D;
  --color-accent: #05D9E8;
  --color-border: #34344A;
  --color-success: #2BFF88;
  --color-warning: #FCEE0A;
  --color-danger: #FF3B5C;
  --color-chart-1: #FCEE0A;
  --color-chart-2: #FF2A6D;
  --color-chart-3: #05D9E8;
  --color-chart-4: #2BFF88;
  --color-chart-5: #B266FF;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 0 1px rgba(252,238,10,0.12), 4px 4px 0 #000;
  --shadow-lg: 0 0 40px rgba(255,42,109,0.25);
  --font-heading: "Orbitron", "Chakra Petch", system-ui, sans-serif;
  --font-body: "Rajdhani", "Chakra Petch", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, "Chakra Petch", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Cyberpunk UI (cyberpunk-ui). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono:wght@400&family=Chakra+Petch:wght@400;500;600;700&display=swap",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.0314,
            0.051
          ],
          "hex": "#08080d"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0667,
            0.098
          ],
          "hex": "#111119"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.098,
            0.098,
            0.1412
          ],
          "hex": "#191924"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.9686
          ],
          "hex": "#f2f2f7"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6392,
            0.7294
          ],
          "hex": "#a3a3ba"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9882,
            0.9333,
            0.0392
          ],
          "hex": "#fcee0a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.0314,
            0.051
          ],
          "hex": "#08080d"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1647,
            0.4275
          ],
          "hex": "#ff2a6d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.0314,
            0.051
          ],
          "hex": "#08080d"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.851,
            0.9098
          ],
          "hex": "#05d9e8"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.2039,
            0.2902
          ],
          "hex": "#34344a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            1,
            0.5333
          ],
          "hex": "#2bff88"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9882,
            0.9333,
            0.0392
          ],
          "hex": "#fcee0a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.2314,
            0.3608
          ],
          "hex": "#ff3b5c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9882,
            0.9333,
            0.0392
          ],
          "hex": "#fcee0a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1647,
            0.4275
          ],
          "hex": "#ff2a6d"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.851,
            0.9098
          ],
          "hex": "#05d9e8"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            1,
            0.5333
          ],
          "hex": "#2bff88"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.698,
            0.4,
            1
          ],
          "hex": "#b266ff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.9882,
              0.9333,
              0.0392
            ],
            "hex": "#fcee0a",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000"
          },
          "offsetX": {
            "value": 4,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.1647,
              0.4275
            ],
            "hex": "#ff2a6d",
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Orbitron",
        "Chakra Petch",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Rajdhani",
        "Chakra Petch",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Share Tech Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Chakra Petch",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 500
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 90,
      "unit": "ms"
    }
  },
  "density": {
    "$type": "number",
    "$value": 0.95
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!