Broken grids
Blocks overlap, tilt and crash into each other instead of sitting in neat rows.
Anti-design is a deliberate rejection of good taste and polish. It uses ugliness, chaos and default settings as a statement against sameness.
Blocks overlap, tilt and crash into each other instead of sitting in neat rows.
System fonts, blue underlined links and raw form controls, used on purpose.
Pure RGB colours like acid yellow, magenta and blue fight for attention.
Words so large they run off the screen, readable only in pieces.
Anti-design comes back whenever design becomes too polished and predictable.
Italian groups like Archizoom and Superstudio start an Anti-Design movement against tasteful modernism.
Magazine designers break every rule of legibility, making disorder a style.
Artists and studios build deliberately raw websites that reject templates.
Fashion brands, musicians and Gen Z portfolios embrace chaotic, ugly-on-purpose design.
Anti-design motion is jerky and unpredictable. Words jump around in stepped moves instead of smooth animation.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Streetwear labels and musicians use chaos to feel rebellious.
Creatives show personality by breaking web conventions.
Independent publications embrace raw, unfiltered layouts.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Pure screen colours at full strength. The clash is the point. Tap a swatch to copy its hex value.
:root{
--white: #FFFFFF;
--acid-yellow: #FFFF00;
--link-blue: #0000FF;
--magenta: #FF00AA;
--toxic-green: #00FF66;
--red: #FF0000;
--black: #000000;
}Fonts that look like Times, Arial and Courier. Using defaults on purpose is part of the message.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Tinos","Times New Roman",serif;
--font-b: "Arimo",Arial,sans-serif;
--font-m: "Cousine","Courier New",monospace;
--fs-d: clamp(65px, 9vw, 179px);
--fs-1: 65.3px; --fs-2: 46.6px;
--fs-3: 33.3px; --fs-4: 23.8px;
--fs-body: 17px; --fs-sm: 12.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 700;
letter-spacing: -.04em;
text-transform: none;
line-height: .85;
}
/* fonts: Tinos, Arimo and Cousine, which look like default Times, Arial and Courier */Start with a grid and then break it: rotate, overlap and offset. Keep one readable path through the chaos.
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, 2px black borders, tilted blocks. Nothing is aligned twice the same way.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 2px;
--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.
/* Anti-design kit · Anti-Boring */
:root{
--bg:#FFFFFF;
--surface:#FFFF00;
--surface2:#00FF66;
--fg:#000000;
--muted:#333333;
--accent:#0000FF;
--accent-fg:#FFFFFF;
--accent2:#FF00AA;
--accent2-fg:#000000;
--border:#000000;
--bw:2px;
--radius:0px;
--radius-sm:0px;
--shadow:none;
--shadow-sm:none;
--font-d:"Tinos","Times New Roman",serif;
--font-b:"Arimo",Arial,sans-serif;
--font-m:"Cousine","Courier New",monospace;
--h-weight:700;
--h-track:-.04em;
--h-case:none;
--h-style:normal;
--h-lh:.85;
--gap:24px;
--pad:24px;
--focus:#FF0000;
--ok:#008000;
--warn:#FF8800;
--danger:#FF0000;
--info:#0000FF;
--field-bg:var(--surface);
--field-shadow:none;
--media:repeating-linear-gradient(17deg,#FF00AA 0 20px,#00FF66 20px 40px,#0000FF 40px 60px);
--code-bg:#000;
--code-fg:#00FF66;
--btn-case:none;
--btn-track:0;
--btn-weight:400;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:12.1px;
--fs-body:17px;
--fs-4:23.8px;
--fs-3:33.3px;
--fs-2:46.6px;
--fs-1:65.3px;
--fs-d:clamp(65px, 9vw, 179px);
}
*,*::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{font-family:var(--font-m);text-decoration:underline;border-radius:0}
.btn:hover{transform:rotate(3deg);background:#FF0000;color:#fff}
.btn-2{transform:rotate(-2deg)}
.card{transform:rotate(var(--r,1.5deg))}
.card:nth-child(2n){--r:-2deg;margin-top:22px}
.card:nth-child(3n){--r:.5deg;background:#00FF66}
.badge{border-radius:0;font-family:var(--font-m);background:#FF00AA;color:#000}
.label{font-family:var(--font-m);text-transform:uppercase}
.input,.select,.textarea{background:#fff;color:#000;font-family:var(--font-m)}
.alert{transform:rotate(-.6deg);background:#FFFF00;color:#000;border-left-width:2px}
.alert:nth-of-type(2n){transform:rotate(.8deg);margin-left:24px}
.progress{border-radius:0}
.progress i{background:repeating-linear-gradient(90deg,#FF0000 0 5px,#0000FF 5px 10px)}
.tab{font-family:var(--font-d);font-size:1.2rem;text-decoration:underline;color:#0000FF}
.tab[aria-selected="true"]{color:#FF0000;border-bottom:0;font-style:italic}
.pager a{border-radius:0;transform:rotate(calc(var(--i,1) * 3deg))}
.table{font-family:var(--font-m)}
.table-wrap{transform:rotate(-.5deg)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#000000;
--surface:#0000FF;
--surface2:#FF00AA;
--fg:#FFFFFF;
--muted:#DDDDDD;
--border:#FFFFFF;
--accent:#FFFF00;
--accent-fg:#000000;
--code-bg:#111;
}
html.alt .docnav{background:#FF00AA!important}html.alt .sec-title{color:#000}html.alt .note,html.alt .alert{color:#000}html.alt .tab{color:#FFFF00}html.alt .card{color:#fff}html.alt .card:nth-child(3n){color:#000}html.alt .stage{background:#000}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 experimental record label in an authentic Anti-design style.
Palette: White #FFFFFF, Acid yellow #FFFF00, Link blue #0000FF, Magenta #FF00AA, Toxic green #00FF66, Red #FF0000, Black #000000.
Typography: Tinos (Times style) for giant headlines, Arimo (Arial style) for body, Cousine (Courier style) for labels and buttons.
Layout: A giant headline cropped off the right edge, a tilted blue marquee band across the hero, sticky-note text blocks overlapping it, and a rotated magenta sticker saying NOT A TEMPLATE.
Signature details: Pure RGB colours (yellow, blue, magenta, green, red), 2px black borders, rotated and overlapping blocks, blue underlined links, crosshair cursor.
Components: Underlined monospace buttons that tilt and turn red on hover, rotated cards with different backgrounds, yellow tilted alerts.
Motion: Stepped, jerky jumps using steps() easing, a scrolling marquee.
Avoid: hidden navigation, unreadable body text, flashing colours, polished gradients, smooth easing.
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.
Breaking layout is fine. Breaking navigation, contrast or focus states is not.
Overlaps must never cover important text or buttons.
Rapid colour flashing can trigger seizures. Keep motion stepped but slow.
Random ugliness is just ugly. Anti-design needs a point of view.