Illustration · 1880s–present
Halftone
Reproducing continuous-tone images through arrays of dots that vary in size or density, creating the illusion of shading in a single ink colour.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(98% 0 0) - --fg
oklch(5% 0 0) - --muted
oklch(38% 0 0) - --surface
oklch(98% 0 0) - --surface-2
oklch(92% 0 0) - --border
oklch(5% 0 0) - --accent
oklch(52% 0.26 25) - --accent-fg
oklch(99% 0 0) - --focus
oklch(52% 0.26 25)
| Token | Value |
|---|---|
| --font-body | 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif |
| --font-display | 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif |
| --font-mono | 'Helvetica Neue', Helvetica, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 4px 4px 0 oklch(5% 0 0) |
| --shadow-lg | 6px 6px 0 oklch(5% 0 0) |
:root {
--bg: oklch(98% 0 0);
--fg: oklch(5% 0 0);
--muted: oklch(38% 0 0);
--surface: oklch(98% 0 0);
--surface-2: oklch(92% 0 0);
--border: oklch(5% 0 0);
--accent: oklch(52% 0.26 25);
--accent-fg: oklch(99% 0 0);
--focus: oklch(52% 0.26 25);
--font-body: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
--font-display: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
--font-mono: 'Helvetica Neue', Helvetica, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 4px 4px 0 oklch(5% 0 0);
--shadow-lg: 6px 6px 0 oklch(5% 0 0);
}Where it came from
Origin: Commercial printing reproduction; offset lithography; comic book printing
Halftone printing was developed in the 1880s to reproduce photographs in newspapers and magazines using a single ink. Comic books printed on newsprint used Ben-Day dots, a related coarse dot screen for flat tints, which became a defining visual — Roy Lichtenstein elevated it to fine art in the 1960s. Digital design uses halftone dot patterns deliberately as a retro or pop-art reference, independent of any printing necessity.
How to spot it
- Uniform dot arrays varying in size or spacing to suggest tone
- Monochrome or limited-colour palettes matching print constraints
- Bold outlines borrowed from the comic printing that required them
- High contrast between background and foreground with no subtle midtones
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Immediately evokes print history and vintage pop culture | Can overpower typography and other content if used heavily |
| Works well as a background texture without competing with content | Very specific cultural reference — not versatile across brands |
| Achievable in CSS with radial-gradient alone, no images needed | Loses its texture at small sizes or low screen densities |
In the wild
- Roy Lichtenstein pop art paintings
- Comic book and graphic novel printing
- Retro poster and screen-printing aesthetics
Use it when
The brand references pop art, comics, print history, or retro aesthetics, and the dot grid is a visual signature.