Ben-Day dots
Patterns of coloured dots, borrowed from cheap comic printing, fill shapes with texture.
Comics, ads and soup cans became art! Pop Art borrows the printed dots, thick outlines and loud colours of mass media, and it still grabs attention from across the room.
Open the kit Copy the promptPop Art turned everyday mass media into art. On the web, its halftone dots, comic panels and bold outlines create instant energy and humour.
Patterns of coloured dots, borrowed from cheap comic printing, fill shapes with texture.
Everything is drawn with heavy ink lines, like a comic panel.
Red, yellow and blue at full strength, with black and white.
Speech bubbles, sound effects like POW and panel grids tell stories.
Pop Art started in Britain and exploded in New York, borrowing its look from printing technology.
Illustrator Benjamin Day develops a dot-shading method that comic printers later use for cheap colour.
Artists of London's Independent Group make collages from ads and magazines.
Andy Warhol and Roy Lichtenstein turn soup cans, celebrities and comic panels into gallery art.
Pop graphics spread into fashion, record covers and advertising.
Brands and apps use halftone dots and comic bursts for playful campaigns.
Pop Art motion goes boom. A starburst explodes into view while the dots pulse behind it.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Brands announce products with comic bursts and bold panels.
Snack and soda brands use halftone and primary colours for fun packaging.
Publishers and fan sites use panels and speech bubbles naturally.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Pure primaries and black ink, with dot patterns to create lighter tints. Tap a swatch to copy its hex value.
:root{
--paper: #FFFFFF;
--pop-red: #E4202B;
--pop-yellow: #FFE11A;
--pop-blue: #1C5FD4;
--sky-dots: #9CC3FF;
--ink: #111111;
}A hand-lettered comic display face for titles and a readable comic-style sans for body.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Bangers",Impact,sans-serif;
--font-b: "Comic Neue",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,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: .04em;
text-transform: none;
line-height: 1;
}
/* fonts: Bangers and Comic Neue */A comic panel grid with thick gutters. Each panel holds one idea.
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, thick black borders, hard offset shadows and starburst shapes.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 3px;
--shadow: 6px 6px 0 #111;
--shadow-sm: 4px 4px 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.
/* Pop Art / Halftone kit · Anti-Boring */
:root{
--bg:#FFFFFF;
--surface:#FFFFFF;
--surface2:#FFF3B0;
--fg:#111111;
--muted:#333333;
--accent:#E4202B;
--accent-fg:#FFFFFF;
--accent2:#1C5FD4;
--accent2-fg:#FFFFFF;
--border:#111111;
--bw:3px;
--radius:0px;
--radius-sm:0px;
--shadow:6px 6px 0 #111;
--shadow-sm:4px 4px 0 #111;
--font-d:"Bangers",Impact,sans-serif;
--font-b:"Comic Neue",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:.04em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:24px;
--pad:24px;
--focus:#FFE11A;
--ok:#1E7A3E;
--warn:#9A5A00;
--danger:#E4202B;
--info:#1C5FD4;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(#E4202B 30%,transparent 32%) 0 0/12px 12px,#FFE11A;
--code-bg:#111;
--code-fg:#FFE11A;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--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{font-family:var(--font-d);font-size:1.15rem;letter-spacing:.06em;font-weight:400}
.btn:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:6px 6px 0 #111}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.card{background-image:radial-gradient(rgba(28,95,212,.18) 22%,transparent 24%);background-size:10px 10px}
.card-media{border:3px solid #111}
.badge{font-family:var(--font-d);font-weight:400;letter-spacing:.06em;background:#FFE11A;color:#111;border-radius:0;clip-path:polygon(0 0,100% 0,100% 70%,70% 70%,60% 100%,50% 70%,0 70%);padding-bottom:1em}
.alert{background:#fff;border-left-width:3px;box-shadow:4px 4px 0 #111;border-radius:0}
.alert b{font-family:var(--font-d);font-weight:400;letter-spacing:.05em;font-size:1.1em}
.progress i{background:radial-gradient(#fff 25%,transparent 27%) 0 0/8px 8px,#E4202B}
.switch,.switch::before,.check{border-radius:0}
.tab{font-family:var(--font-d);font-weight:400;font-size:1.15rem;letter-spacing:.05em}
.tab[aria-selected="true"]{border-bottom:5px solid #E4202B}
.pager a{box-shadow:3px 3px 0 #111}
.table th{font-family:var(--font-d);font-weight:400;letter-spacing:.05em;background:#FFE11A}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#0D1B3E;
--surface:#15285A;
--surface2:#12224C;
--fg:#FFFFFF;
--muted:#C9D4F0;
--border:#FFFFFF;
--shadow:6px 6px 0 #FFE11A;
--shadow-sm:4px 4px 0 #FFE11A;
--code-bg:#060D20;
}
html.alt .hero{background:radial-gradient(rgba(255,255,255,.12) 28%,transparent 30%) 0 0/16px 16px,#0D1B3E}html.alt .p3{background:#15285A}html.alt .bubble{color:#111}html.alt .alert{background:#15285A}html.alt .btn:hover{box-shadow:6px 6px 0 #FFE11A}html.alt .pager a,html.alt .alert{box-shadow:3px 3px 0 #FFE11A}html.alt .table th{color:#111}html.alt .tl .yr{color:#FFE11A}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 comic book subscription service in an authentic Pop Art / Halftone style.
Palette: Paper #FFFFFF, Pop red #E4202B, Pop yellow #FFE11A, Pop blue #1C5FD4, Sky dots #9CC3FF, Ink #111111.
Typography: Bangers for titles and sound effects, Comic Neue for body.
Layout: The hero is a comic page: a big panel with a halftone blue background and a yellow outlined title, a yellow panel with a red POW starburst, and a wide panel with a speech bubble holding the intro and buttons.
Signature details: Pop red, yellow and blue with black ink, Ben-Day dot patterns as radial gradients, 3 to 4px outlines, hard offset shadows, starbursts via clip-path.
Components: Comic-lettered buttons with hard shadows, dotted cards, speech-bubble badges, dotted progress bars, yellow table headers.
Motion: A POW burst popping in with overshoot, pulsing dots.
Avoid: copies of famous paintings or comic characters, comic fonts for body text, dots behind small text, gradients.
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.
Iconic Pop Art paintings are protected. Use the techniques, not the pictures.
Display comic lettering is hard to read in paragraphs. Use a calm body face.
Halftone behind small text makes reading hard. Keep text on white.
If every heading is POW, nothing lands. Use bursts for key moments.