# Cyberpunk UI > Acid-yellow and hot-magenta neon on near-black, chamfered corners, glitch-split headlines and terminal labels — high-tech, low-life. - Nickname: Night City - Also called: Neon noir, Cyberpunk 2077 UI - Category: Futuristic & Tech - Moods: Edgy, Bold, Techy - Industries: Gaming, Web3 & Crypto, Media & Entertainment, Creative & Portfolio - Style page: https://uilingo.dev/styles/cyberpunk-ui/ 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 ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Cyberpunk UI" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Acid-yellow and hot-magenta neon on near-black, chamfered corners, glitch-split headlines and terminal labels — high-tech, low-life. Design keywords: neon yellow on black, hot magenta accent, chamfered cut corners, glitch RGB split, terminal mono labels, scanlines, hazard stripes, uppercase wide headlines. ## Visual language A dystopian neon interface: near-black base (#08080D) with faint scanlines and a magenta glow in one corner, one screaming acid yellow (#FCEE0A) for actions and key numbers, hot magenta (#FF2A6D) and electric cyan (#05D9E8) as accents. Shapes are hard and angular — no radius anywhere; panels and buttons have 45° cut (chamfered) corners. Headlines are wide, uppercase and RGB-split like a glitching screen, while tiny mono labels read like terminal output. Loud, aggressive and game-like, but still organised on a clean grid. ## Signature details (must be visible) - Chamfered corners with clip-path: panels polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); buttons cut only the bottom-right 10px: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%) - Border redrawn across the cut, as copyable CSS on the SAME element as the clip-path: --cut:14px; border:1px solid #34344A; background: linear-gradient(225deg, transparent calc(var(--cut)*.707 - .7px), #34344A 0 calc(var(--cut)*.707 + .7px), transparent 0), linear-gradient(45deg, transparent calc(var(--cut)*.707 - .7px), #34344A 0 calc(var(--cut)*.707 + .7px), transparent 0), #111119. On hover swap #34344A for #FCEE0A. Buttons cut only the bottom-right 10px and need the 45deg line only - Poster headline: uppercase Orbitron 900 (max ~16ch). The hero headline text is filled acid yellow #FCEE0A (.ui-display__text wraps the whole title in the demo); when only a key phrase is highlighted, the rest of the line is #F2F2F7, and every other heading is #F2F2F7. RGB-split text-shadow −3px 0 rgba(255,42,109,.9), 3px 0 rgba(5,217,232,.75) — this split is the ONE allowed place where yellow and magenta touch. A 4s steps(1) keyframe jolts the offset for ~200ms - Thai headlines: Orbitron is Latin-only, so Thai headlines render in Chakra Petch 700 with line-height 1.25, no uppercase, max-width 18ch; keep Orbitron for Latin words and numerals. Thai mono labels fall back to Chakra Petch with 0 tracking - Terminal labels in Share Tech Mono: eyebrows as yellow blocks prefixed '// ', form labels prefixed '> ' in cyan, feature cards numbered [01]…[06] in magenta (the 6 cards form a clean 3 × 2 grid at ≥960px) - Background: scanlines repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px) + column grid linear-gradient(90deg, rgba(252,238,10,.05) 1px, transparent 1px) 0 0/80px 80px + a magenta glow bottom-left and cyan glow top-right - Hazard stripes: repeating-linear-gradient(-45deg, #FCEE0A 0 10px, #08080D 10px 20px) as a 12px band on the top edge of every alternate (.ui-section--alt) section, plus a 22px band down the CTA's left edge - Segmented progress: bars made of 6px yellow blocks with 2px gaps and a yellow glow ## Design tokens — use these exact values Colours (dark mode): - background #08080D - surface #111119 - surface-2 #191924 - text #F2F2F7 - text-muted #A3A3BA - primary #FCEE0A (text on it #08080D) - secondary #FF2A6D (text on it #08080D) - accent #05D9E8 - border #34344A - success #2BFF88 · warning #FCEE0A · danger #FF3B5C - chart series #FCEE0A, #FF2A6D, #05D9E8, #2BFF88, #B266FF Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 1px Shadows: sm `none`, md `0 0 0 1px rgba(252,238,10,0.12), 4px 4px 0 #000`, lg `0 0 40px rgba(255,42,109,0.25)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.95 density Motion: 90ms steps(3, end) ## Typography (Latin + Thai) - Headings: Orbitron 700/900 with Thai fallback Chakra Petch 600/700 - Body: Rajdhani 500/600/700 with Thai fallback Chakra Petch 400/500/600 - Mono: Share Tech Mono - Google Fonts URL: 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 - CSS stacks: heading `"Orbitron", "Chakra Petch", system-ui, sans-serif`; body `"Rajdhani", "Chakra Petch", system-ui, sans-serif`; mono `"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, "Chakra Petch", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Chakra Petch — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 6.4vw, 5.2rem), heading weight 700, heading tracking 0.02em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: acid-yellow fill, black uppercase Rajdhani 700 with .1em tracking, bottom-right cut; hover flips to magenta with a cyan text ghost - Secondary button: magenta outline + magenta text on 6% magenta tint, same cut; hover fills magenta - Cards: #111119 panels with chamfer, 1px #34344A border, a 3px yellow inset stripe on the left of feature cards; hover = yellow border and a 6% yellow top wash - Highlight card / featured plan / mobile featured card: solid yellow block with black text and a hazard-stripe edge - Inputs: #050508 fill, cut bottom-right; focus = yellow border + 2px yellow underline + soft glow; error = 3px red left stripe - Badges: square, mono, uppercase, 1px currentColor outline (cyan/green/yellow/red); chips square with a cut corner, active = yellow - Split nav: links on the left, the logo (a yellow chamfered tile) centred, login + yellow CTA on the right; black bar with a yellow hairline under it; the active link is wrapped in magenta [ ] - Shadows: token sm = none, md = hard outline 0 0 0 1px rgba(252,238,10,.12) + 4px 4px 0 #000 offset, lg = neon glow 0 0 40px rgba(255,42,109,.25) used only on the featured plan or CTA. Never a grey blurred drop shadow - Motion: steps(3,end) over 90ms for colour/border hovers; transforms and the glitch keyframe use steps(1); no easing curves - Dashboard: icon rail with a yellow active block; KPI cards with a magenta top line and the first value in glitching yellow; line chart yellow with glow + magenta dashed comparison, scanlined vertical bars, square yellow heatmap - Tab bar: black strip, uppercase labels, active icon inside a small yellow cut block ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: poster-sized headline that fills the viewport width, visual below. Navigation: split style. Sections in order: hero → logos → stats → features → steps → testimonials → pricing → cta. Feature section as grid. Use a poster hero: a huge glitching uppercase headline (max ~16ch) with the product shot of chamfered cards beneath it, then a mono logo strip, hazard-striped stats band with yellow glitch numbers, a numbered feature grid, steps with magenta [01] blocks, testimonials, pricing with one solid-yellow plan and a yellow CTA slab with a hazard edge. Dashboards use a narrow icon rail, dense KPIs and neon charts. ## Content Use realistic product copy (fictional brand) suited to: Game launchers, store pages and esports. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Rounded corners, pills or grey blurred drop shadows (hard offsets and neon glows are fine) - Pastel colours, soft gradients or frosted blur - Glitching or animating body text - Thin hairline wireframes as the main language (that reads as HUD / FUI) - Yellow and magenta fighting on the same element — except the headline's RGB-split shadow - Letter-spacing or uppercase on Thai text ## Stack notes One self-contained HTML file with a