Clipped angles
Corners are cut at 45 degrees on buttons, cards and frames, like military hardware.
High tech, low life. Cyberpunk interfaces are dense, angular and lit by neon signs in the rain, with a sense that the system is powerful and not entirely on your side.
Jack in Copy promptCyberpunk design comes from science fiction about megacities and hackers. It pairs aggressive angles and warning colors with heads-up display details.
Corners are cut at 45 degrees on buttons, cards and frames, like military hardware.
Hazard yellow, cyan and red on near-black. Colors signal status, danger and access.
Monospace data readouts, scan lines, brackets and coordinates layer information over everything.
Neon signage, multilingual text and rain-soaked cityscapes create a crowded, nocturnal world.
Cyberpunk began in fiction and film and became a visual language through games.
Bruce Bethke writes a short story called Cyberpunk, published in 1983, which gives the genre its name.
Ridley Scott's film shows a rainy, neon-lit, overcrowded future city that defines the look for decades.
William Gibson's novel popularises cyberspace and the hacker hero.
Katsuhiro Otomo's animated film brings cyberpunk's motorcycles, megacities and neon to global audiences.
The video game turns the aesthetic into a complete interface language of angled panels and yellow warnings.
Cyberpunk motion is scanning and glitching. Lines sweep across displays, counters blink and titles tear for a split second.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Game sites and tournament pages use HUD panels and hazard colors.
Dashboards use dark angular panels to feel technical and powerful.
Fashion drops and electronic labels use neon kanji-style signage and glitch type.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Near-black panels with hazard yellow for action, cyan for data and red for danger. Tap a swatch to copy its hex value.
:root{
--void: #0A0A0F;
--panel: #12121A;
--hazard-yellow: #FCEE0A;
--cyan: #00F0FF;
--alarm-red: #FF003C;
--signal-green: #00FF9C;
--chrome-text: #E8E8F0;
}A squared technical display face in uppercase, a condensed sans for reading and a monospace for data readouts.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Oxanium",system-ui,sans-serif;
--font-b: "Barlow Semi Condensed",system-ui,sans-serif;
--font-m: "Share Tech Mono",ui-monospace,monospace;
--fs-d: clamp(49px, 9vw, 107px);
--fs-1: 48.6px; --fs-2: 37.3px;
--fs-3: 28.7px; --fs-4: 22.1px;
--fs-body: 17px; --fs-sm: 13.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 800;
letter-spacing: .02em;
text-transform: uppercase;
line-height: 1;
}
/* fonts: Oxanium, Barlow Semi Condensed and Share Tech Mono */Dense grids with thin gaps. Panels may be asymmetric, but data aligns strictly.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}No radius. Corners are clipped with clip-path, and an accent bar marks the left edge of panels.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Cyberpunk kit · Anti-Boring */
:root{
--bg:#0A0A0F;
--surface:#12121A;
--surface2:#0E0E15;
--fg:#E8E8F0;
--muted:#9A9AB0;
--accent:#FCEE0A;
--accent-fg:#0A0A0F;
--accent2:#00F0FF;
--accent2-fg:#0A0A0F;
--border:#2A2A3A;
--bw:1px;
--radius:0px;
--radius-sm:0px;
--shadow:none;
--shadow-sm:none;
--font-d:"Oxanium",system-ui,sans-serif;
--font-b:"Barlow Semi Condensed",system-ui,sans-serif;
--font-m:"Share Tech Mono",ui-monospace,monospace;
--h-weight:800;
--h-track:.02em;
--h-case:uppercase;
--h-style:normal;
--h-lh:1;
--gap:24px;
--pad:24px;
--focus:rgba(0,240,255,.5);
--ok:#00FF9C;
--warn:#FCEE0A;
--danger:#FF003C;
--info:#00F0FF;
--field-bg:#0E0E15;
--field-shadow:none;
--media:linear-gradient(0deg,rgba(252,238,10,.15),transparent),repeating-linear-gradient(90deg,#12121A 0 18px,#1A1A28 18px 20px),linear-gradient(#FF003C,#12121A);
--code-bg:#050508;
--code-fg:#FCEE0A;
--btn-case:uppercase;
--btn-track:.12em;
--btn-weight:600;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:17px;
--fs-4:22.1px;
--fs-3:28.7px;
--fs-2:37.3px;
--fs-1:48.6px;
--fs-d:clamp(49px, 9vw, 107px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));font-family:var(--font-d)}
.btn:hover{transform:none;background:#FFFFFF;color:#0A0A0F}
.btn-ghost{clip-path:none;border:1px solid var(--accent2);color:var(--accent2)}
.card{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);border-left:3px solid var(--accent)}
.card-media{clip-path:polygon(0 0,100% 0,100% 80%,85% 100%,0 100%)}
.badge{font-family:var(--font-m);font-weight:400;border-radius:0;background:transparent;color:var(--accent2);border-color:var(--accent2)}
.label{font-family:var(--font-m);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--accent2)}
.input,.select,.textarea{border-left:3px solid var(--accent2)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}
.switch{border-radius:0}.switch::before{border-radius:0}
.check{border-radius:0}
.alert{border-left-width:4px;font-family:var(--font-m);background:#0E0E15}
.progress{border-radius:0;height:.6em}
.progress i{background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 8px)}
.tab{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.1em}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.pager a[aria-current]{background:var(--accent)}
.table{font-family:var(--font-m)}
.table th{color:var(--accent);text-transform:uppercase}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#F2F2EE;
--surface:#FFFFFF;
--surface2:#E6E6E0;
--fg:#0A0A0F;
--muted:#4A4A58;
--border:#0A0A0F;
--accent2:#007A85;
--accent2-fg:#FFFFFF;
--field-bg:#FFFFFF;
--code-bg:#0A0A0F;
}
html.alt .sec-title,html.alt .tl .yr{color:#0A0A0F;text-shadow:3px 3px 0 #FCEE0A}html.alt .alert{background:#fff}html.alt .table th{color:#0A0A0F;background:#FCEE0A}html.alt .tab[aria-selected="true"]{color:#0A0A0F;border-bottom-color:#0A0A0F}html.alt .btn:hover{background:#0A0A0F;color:#FCEE0A}html.alt .stage{background:#0A0A0F}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a cybersecurity monitoring tool in an authentic Cyberpunk style.
Palette: Void #0A0A0F, Panel #12121A, Hazard yellow #FCEE0A, Cyan #00F0FF, Alarm red #FF003C, Signal green #00FF9C, Chrome text #E8E8F0.
Typography: Oxanium 800 uppercase for headings, Barlow Semi Condensed for body, Share Tech Mono for labels and data.
Layout: Full-height hero over a silhouetted city skyline with angled cyan rain, a small mono tag line, a huge yellow title with a rare RGB tear, a text panel with a red left bar. Dense panel grid below.
Signature details: 45-degree clipped corners via clip-path, hazard yellow for primary action, cyan for data, red for danger, thin scan lines, HUD brackets.
Components: Clipped yellow buttons that flash white on hover, dark inputs with a cyan left bar, mono outlined badges, segmented yellow progress bars, mono tables.
Motion: Scanning lines, blinking counters, rare glitches under 200ms.
Avoid: rounded corners, pastel colors, soft shadows, meaningless decorative foreign characters, constant flicker.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Hazard yellow everywhere turns every message into a warning. Reserve it for primary actions.
Random Asian characters as decoration can be meaningless or offensive. Use text you understand.
Tight uppercase text at small sizes is hard to read. Keep body text in sentence case.
Glitches need rhythm and restraint, or they read as bugs.