Desktop windows
Content sits inside gray windows with blue gradient title bars and bevelled edges, like an old operating system.
An aesthetic built from the early internet: gray desktop windows, binary rain, error dialogs and screens that glitch. It treats old computers as a place, with its own weather and landscape.
Open kit.exe Copy promptCybercore romanticises the computer itself. Interfaces look like operating systems from around 2000, dressed in binary, pixel icons and deliberate errors.
Content sits inside gray windows with blue gradient title bars and bevelled edges, like an old operating system.
Light and dark 2px inner lines replace soft shadows. Buttons look raised and press inward.
Binary strings, terminal green and blinking cursors fill backgrounds as decoration.
RGB splitting, torn slices and error dialogs appear briefly to suggest a machine with a mind of its own.
Cybercore is a look back at the internet as it felt before social media, remixed by people too young to have used it.
Consumer operating systems ship with gray windows, bevelled buttons and blue title bars. That chrome becomes the visual default of personal computing.
The Matrix turns falling green characters into a cultural symbol for digital reality.
Artists start breaking files on purpose. Corrupted images and datamoshing become an art form with festivals and manifestos.
Online communities name niche looks with the suffix -core. Cybercore collects the imagery of early computing into one mood.
Portfolio sites and fashion brands recreate desktop windows in CSS, often as playful homepages you can drag around.
Cybercore motion copies machines. Columns of binary fall at different speeds, and every so often the system crashes into a blue screen.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Designers present projects as desktop icons and windows you open, making browsing feel like exploring.
Limited releases use error dialogs and countdown terminals to build hype.
Net artists use the look to comment on technology, memory and online identity.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
A deep desktop blue as the world, window gray for content, terminal green for action. Tap a swatch to copy its hex value.
:root{
--desktop-blue: #0A1A6B;
--title-blue: #1084D0;
--window-gray: #C3C7CF;
--terminal-green: #00F57A;
--glitch-magenta: #FF2BD6;
--error-red: #B00020;
--black: #000000;
}A bitmap-style display face for titles, a plain grotesque for reading, and a monospace for anything that looks like code.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "VT323",ui-monospace,monospace;
--font-b: "IBM Plex Sans",system-ui,sans-serif;
--font-m: "IBM Plex 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: 400;
letter-spacing: .02em;
text-transform: none;
line-height: .95;
}
/* fonts: VT323 for display, IBM Plex Sans and Plex Mono for text */Layouts feel like a desktop. Windows can overlap on large screens, and a tight 16px gap keeps things dense.
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: 16px;
}
.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, no blur. Depth comes from two 2px bevel lines, light on top left and dark on bottom right.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 2px;
--shadow: inset -2px -2px 0 #6E737C, inset 2px 2px 0 #FFFFFF;
--shadow-sm: inset -2px -2px 0 #6E737C, inset 2px 2px 0 #FFFFFF;
--gap: 16px;
--pad: 18px;
}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.
/* Cybercore kit · Anti-Boring */
:root{
--bg:#0A1A6B;
--surface:#C3C7CF;
--surface2:#0E2489;
--fg:#F2F5FF;
--muted:#A9B6F2;
--accent:#00F57A;
--accent-fg:#001B0C;
--accent2:#C3C7CF;
--accent2-fg:#000;
--border:#000;
--bw:2px;
--radius:0px;
--radius-sm:0px;
--shadow:inset -2px -2px 0 #6E737C, inset 2px 2px 0 #FFFFFF;
--shadow-sm:inset -2px -2px 0 #6E737C, inset 2px 2px 0 #FFFFFF;
--font-d:"VT323",ui-monospace,monospace;
--font-b:"IBM Plex Sans",system-ui,sans-serif;
--font-m:"IBM Plex Mono",ui-monospace,monospace;
--h-weight:400;
--h-track:.02em;
--h-case:none;
--h-style:normal;
--h-lh:.95;
--gap:16px;
--pad:18px;
--focus:rgba(0,245,122,.5);
--ok:#007A3D;
--warn:#8A5A00;
--danger:#B00020;
--info:#0A1A6B;
--field-bg:#FFFFFF;
--field-shadow:inset 2px 2px 0 #6E737C, inset -2px -2px 0 #FFFFFF;
--media:repeating-linear-gradient(0deg,#00F57A 0 2px,#032a14 2px 6px);
--code-bg:#000;
--code-fg:#00F57A;
--btn-case:none;
--btn-track:0;
--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 */
.card,.table-wrap,.alert{color:#000}
.card{padding:0}
.card>*:not(.card-media){margin-left:var(--pad);margin-right:var(--pad)}
.card::before{content:"window.exe";display:block;background:linear-gradient(90deg,#000A7A,#1084D0);color:#fff;font:1.1rem/1 var(--font-d);padding:6px 8px;margin-bottom:var(--pad)}
.card .card-media{margin:0 var(--pad) 1em}
.card>*:last-child{margin-bottom:var(--pad)}
.btn{background:var(--surface);color:#000;border:2px solid #000}
.btn.btn-sm,.btn.btn-lg,.btn:not(.btn-2):not(.btn-ghost){background:var(--surface)}
.btn:not(.btn-2):not(.btn-ghost){outline:1px dotted transparent}
.btn:active{box-shadow:inset 2px 2px 0 #6E737C,inset -2px -2px 0 #fff;transform:none}
.btn:hover{transform:none;background:#D6D9E0}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none;border-color:var(--accent);color:var(--accent)}
.input,.select,.textarea{color:#000}
.check:checked,.radio:checked{background:#fff}
.check::after{border-color:#000}.radio::after{background:#000}
.switch{border-radius:0;background:#fff}.switch::before{border-radius:0;background:#000}.switch:checked{background:var(--accent)}
.badge{background:#000;color:var(--accent);border-color:var(--accent);font-family:var(--font-m);border-radius:0}
.progress{border-radius:0;background:#fff}
.progress i{background:repeating-linear-gradient(90deg,#000A7A 0 10px,transparent 10px 13px)}
.tab{color:var(--muted)}.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.pager a{background:var(--surface);color:#000;box-shadow:var(--shadow-sm)}
.pager a[aria-current]{background:#000A7A;color:#fff}
.table th{font-size:1.2rem;background:#000A7A;color:#fff}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#E8ECF7;
--surface2:#D5DBEE;
--fg:#0A1A6B;
--muted:#34407A;
--code-bg:#0A1A6B;
}
html.alt .demo{border-color:#0A1A6B!important}html.alt .tl li{border-color:#0A1A6B}html.alt .tl .yr{color:#0A1A6B}html.alt .rain{color:#0A1A6B;opacity:.08}html.alt .docfoot{border-color:#0A1A6B}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 an online archive of early internet music in an authentic Cybercore style.
Palette: Desktop blue #0A1A6B, Title blue #1084D0, Window gray #C3C7CF, Terminal green #00F57A, Glitch magenta #FF2BD6, Error red #B00020, Black #000000.
Typography: VT323 for window titles and headings, IBM Plex Sans for body, IBM Plex Mono for code and data.
Layout: A deep blue desktop background with content inside gray windows that have blue gradient title bars. On wide screens windows overlap slightly.
Signature details: 2px bevel borders (light top-left, dark bottom-right), binary text as faint background texture, one error dialog used as a playful callout, a blinking cursor.
Components: Raised gray buttons that press inward, white inset text fields, square checkboxes, a striped progress bar, tables with blue header rows.
Motion: Falling binary columns, a rare 150ms RGB glitch on the main title, stepped animations instead of smooth easing.
Avoid: rounded corners, soft drop shadows, gradients other than title bars, constant flicker, neon cyberpunk city imagery.
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.
Bright green on black glows nicely in a heading. In long text it strains the eye, so keep reading text on gray windows.
Constant flicker is tiring and can trigger seizures. Keep glitches short, rare and optional.
If a window looks closable, the close button must work. Broken expectations feel like bugs.
Use the look where exploration fits. On a checkout page it only slows people down.