Two colours, many tones
Density of dots creates the shade. More black dots read as darker grey.
Every shade on this page is made from only two colours. Tiny patterns of black and white dots trick the eye into seeing grey, shadows and curves.
Open the kit Copy the promptDithering creates the illusion of many shades using only a few colours. On the web it gives images a retro, printed texture and can make them very light.
Density of dots creates the shade. More black dots read as darker grey.
Ordered dithering leaves a neat cross-hatched grid, while error diffusion looks like grain.
Images scale up with pixelated rendering, so each dot stays sharp instead of blurring.
A single accent colour can be layered over black and white with CSS blend modes.
Dithering was invented to squeeze images into limited screens and printers. Today people use it because they like the look.
Bryce Bayer at Kodak publishes the ordered dither matrix used for the patterns on this page.
Robert Floyd and Louis Steinberg publish a method that spreads rounding errors to neighbouring pixels, giving a grainy look.
Early personal computers with black and white screens use dither patterns for every grey in the interface.
Return of the Obra Dinn, a mystery game by Lucas Pope, wins acclaim for its entirely dithered visuals.
Low-tech Magazine launches a solar-powered website that dithers its images to save energy.
The light source circles the sphere and the dot pattern recalculates every frame. The only thing that changes is which dots are black.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Sustainable and slow web projects use dithering to shrink image weight and signal their values.
Indie games and art zines use 1-bit visuals for mood and style.
Magazines and portfolios use dithered photos with one colour tint for a strong identity.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Two colours do all the work. Signal orange appears only as a tint over dithered images and for urgent highlights. Tap a swatch to copy its hex value.
:root{
--paper: #F2F0E9;
--ink: #111111;
--mid-paper: #E4E1D6;
--signal-orange: #FF4F00;
}A wide monospace for headings and labels, and a neutral grotesque for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Martian Mono",ui-monospace,monospace;
--font-b: "Public Sans",system-ui,sans-serif;
--font-m: "Martian Mono",ui-monospace,monospace;
--fs-d: clamp(46px, 9vw, 96px);
--fs-1: 45.6px; --fs-2: 35.7px;
--fs-3: 27.9px; --fs-4: 21.8px;
--fs-body: 17px; --fs-sm: 13.3px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 800;
letter-spacing: -.03em;
text-transform: none;
line-height: 1.05;
}
/* fonts: Martian Mono and Public Sans */Strict, square and simple. Dithered images carry the texture, so layouts stay plain.
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. Shadows are made of checkerboard dot patterns instead of solid colour or blur.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 2px;
--shadow: 6px 6px 0 #111;
--shadow-sm: 3px 3px 0 #111;
--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.
/* Dithering / 1-bit kit · Anti-Boring */
:root{
--bg:#F2F0E9;
--surface:#F2F0E9;
--surface2:#E4E1D6;
--fg:#111111;
--muted:#444444;
--accent:#111111;
--accent-fg:#F2F0E9;
--accent2:#FF4F00;
--accent2-fg:#111111;
--border:#111111;
--bw:2px;
--radius:0px;
--radius-sm:0px;
--shadow:6px 6px 0 #111;
--shadow-sm:3px 3px 0 #111;
--font-d:"Martian Mono",ui-monospace,monospace;
--font-b:"Public Sans",system-ui,sans-serif;
--font-m:"Martian Mono",ui-monospace,monospace;
--h-weight:800;
--h-track:-.03em;
--h-case:none;
--h-style:normal;
--h-lh:1.05;
--gap:24px;
--pad:24px;
--focus:#FF4F00;
--ok:#111;
--warn:#111;
--danger:#111;
--info:#111;
--field-bg:var(--surface);
--field-shadow:none;
--media:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQAAAADrRVxmAAADLElEQVR42tWVP48bRRiHn/EuMhRgU0CT4k5XU/ANbgXuaA6BL9Bc0gAFRa4gJ1fxSggBHyANFFBGcVCuozgj9iTaSAglUhpbCxIIydJ5C+Jb4bn9Uczs3wZRMs1au4+f+WnmnXeMaI8e/7sXeeyeoXus57zmv8iPq8VUkuQIm6zh9TYhjRvEGmwy7hBXj29UhA2tTuGg43j2jiQZOQXMMe+2HYvRtCSSCPsQeCVqO8Y7nhCQYROeO2g7Hr/pCRuC/TEDHXYceCIbsoY5FNc7jmjqc4DLwd2k6bgcsyMZIYNcDn4/7jgGkhE2BLZJBly9184xDCQj1i/jc/DrJ23HyEhGJBEwXwNsbjQdt8fgHEO/HLC8jNs5mMpIP4z8csDmm6S9HuzLSJlBeMf3DWKxGEXsyEjnURmDzTRt1scYBjLa/uWLCIr086xRY09GkSPORxYXg82tmtCz8QH0K4dNgCKd5uU2sCS/ZZN+brQ9D62rITjs1wQn6faUwBqtQsCSAMXTT21JFCmXxzYJrNHqZyDzjsBWOS5vj4cQyGj1U+Q2BZZ57VjCR8zdLEl94A6DiuAktQ/xRARJw1H06hhdx+ZmYI3y5wE2cbo9pUMU6SSwRsVvuyxxMbqOQwIb8uKTGPIjmAHQcjyNA2v0Rw6Q69gmzrE9rTrGEf08ZPsohjsp/kOTWOZxPzfa/AkwWTMH+nmTOEkZZCHBrLe7LE9Qy1GkEwZZSDH7glxxZhNP6EEdg500RDOoKhdCjOs97xdpHrNLCF8PqwPkOt0H7teHJ6n/y8cRcOYUESHcBRgXKRM3LZ8lVcUgjPzSsbkJiBBefTtS4hQGjHCLuiSPCSwhbL6iSgFGfu3yI6Cfg5TXBTNw3fI+FKRll5YsUeQJ32EeAPmdFNh3Pah2+C71JQATXFeUFFeEpB7wxt7eXpkcJKUlEEgyF/D3t/6ueCl1hKWOofCscbdcO/PdshFD5gL4xUe/KPt6Wk+icAYU7kV/VhK2nkThqp7krVV1NyS+MkqHk7wwq++XAmBfkmTul9vWu9e8o4oSKIl6mO41H866xFWX+O6/OxZd4tG/Of4BrgfvpQyI+V4AAAAASUVORK5CYII=) center/cover;
--code-bg:#111;
--code-fg:#F2F0E9;
--btn-case:none;
--btn-track:0;
--btn-weight:600;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.3px;
--fs-body:17px;
--fs-4:21.8px;
--fs-3:27.9px;
--fs-2:35.7px;
--fs-1:45.6px;
--fs-d:clamp(46px, 9vw, 96px);
}
*,*::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-media,.dith{image-rendering:pixelated}
.btn{font-family:var(--font-m);font-size:.85rem}
.btn:hover{transform:none;background:repeating-conic-gradient(#111 0 25%,#F2F0E9 0 50%) 0 0/4px 4px;color:#111;text-shadow:0 0 3px #F2F0E9,0 0 3px #F2F0E9}
.btn-2:hover{background:#FF4F00}
.card{box-shadow:6px 6px 0 0 transparent;background-image:none;position:relative}
.card::after{content:"";position:absolute;inset:0;transform:translate(8px,8px);z-index:-1;background:repeating-conic-gradient(#111 0 25%,transparent 0 50%) 0 0/4px 4px}
.badge{border-radius:0;background:#F2F0E9;color:#111;font-family:var(--font-m);font-weight:400}
.alert{border-left-width:2px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px) left/10px 100% no-repeat,#F2F0E9;padding-left:1.8em}
.alert b{color:#111}
.alert-danger b{background:#FF4F00;padding:0 .3em}
.progress{border-radius:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQAAAACCEkxzAAAAUklEQVR42u3MMQ2AMBCG0e8nN1QADGykE6kLkiKhYUILF4wiAQnHgAx4Ap6SZ6AiqIyeEcUBmoBGcZTOCbAFsHW/ItTNDqgHNGxHhL3P/T/feh5tl2UjFNvllwAAAABJRU5ErkJggg==) 0 0/32px 100%;image-rendering:pixelated}
.progress i{background:#111}
.switch,.switch::before,.check{border-radius:0}
.tab[aria-selected="true"]{border-bottom-color:#111}
.pager a{border-radius:0}
.pager a[aria-current]{background:repeating-conic-gradient(#111 0 25%,#F2F0E9 0 50%) 0 0/4px 4px;color:#111;font-weight:800;text-shadow:0 0 3px #fff,0 0 3px #fff}
.table th{background:repeating-conic-gradient(#111 0 25%,#F2F0E9 0 50%) 0 0/2px 2px;color:#111;text-shadow:0 0 3px #F2F0E9,0 0 3px #F2F0E9,0 0 3px #F2F0E9}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#111111;
--surface:#111111;
--surface2:#1C1C1C;
--fg:#F2F0E9;
--muted:#BDBDBD;
--border:#F2F0E9;
--accent:#F2F0E9;
--accent-fg:#111111;
--shadow:6px 6px 0 #F2F0E9;
--shadow-sm:3px 3px 0 #F2F0E9;
--code-bg:#000;
}
html.alt .card::after{background:repeating-conic-gradient(#F2F0E9 0 25%,transparent 0 50%) 0 0/4px 4px}html.alt .alert{background:repeating-linear-gradient(90deg,#F2F0E9 0 2px,transparent 2px 4px) left/10px 100% no-repeat,#111}html.alt .alert b{color:#F2F0E9}html.alt .badge{background:#111;color:#F2F0E9}html.alt .progress i{background:#F2F0E9}html.alt .stage{background:#1C1C1C}html.alt .demo{border-color:#F2F0E9!important}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 slow-web magazine about repair and low technology in an authentic Dithering / 1-bit style.
Palette: Paper #F2F0E9, Ink #111111, Mid paper #E4E1D6, Signal orange #FF4F00.
Typography: Martian Mono 800 for headings and labels, Public Sans for body.
Layout: Two-column hero: headline with one word on a signal-orange block, a dithered gradient strip beneath, and a large dithered image tinted orange with CSS blend modes on the right.
Signature details: Only two colours (#111 and #F2F0E9) plus one orange tint. Ordered 8×8 Bayer dithering on images, image-rendering: pixelated, checkerboard dot shadows instead of blur.
Components: Square buttons that fill with a checkerboard on hover, cards with dotted offset shadows, dithered progress track, tables with a dotted header.
Motion: A live canvas that re-dithers a sphere as the light moves. No smooth gradients anywhere.
Avoid: gradients, blur, rounded corners, dithered text or charts, more than one accent colour.
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.
Dithering destroys thin lines and small text inside images. Keep charts in solid colour.
Browsers blur scaled images by default. Always set image-rendering: pixelated.
Never put body text directly over a dither pattern. Use a solid panel.
If colour carries information, dithering can erase it. Offer the original when it matters.