Flat, never glossy
No gradients in the chrome and no blur on the panels, because the reference was printed with a single pass of ink.
Demo Site 6 — Pop art
Loud on purpose.
Pop art borrows from cheap printing: flat colour, a heavy black outline, a halftone ground, and a headline set so large it cannot be read past. It is the loudest theme here, and it is meant to be.
What this theme does
Four habits that make a page read like a printed panel rather than a screen.
Outline everything
A 4px black border on every block, so the structure is legible before a single word is read.
Halftone ground
A dot pattern sits behind the hero at low opacity, which is the cheapest possible nod to comic printing.
Loud where it counts
Three saturated primaries, used in blocks rather than sprinkled, so the page stays readable despite the volume.
The theme in numbers
The measurements that keep a very loud page from turning into noise.
-
3
Flat primaries
Pink, cyan and violet, never mixed or softened.
-
4px
Outline weight
The same border on every block on the page.
-
0px
Corner radius
Nothing on this page is rounded.
-
320px
Narrowest layout
Fluid rules hold all the way down to 320px.
Typography and spacing
One heavy sans at four weights, set uppercase with a hard offset shadow. The specimen on the left uses the same tokens as the page.
-
Display 68px
SHOUT IT
-
Heading 36px
Says it again
-
Title 22px
And again, smaller
-
Body 17px
The reading size. Still a sans, still steady, never a whisper.
-
Caption 13px
Labels, notes and metadata
- Display
- Inter 800, uppercase, -0.045em tracking with a hard shadow.
- Body
- Inter 400 at 17px on a 1.6 line height.
- Scale
- 68 / 36 / 22 / 17 / 13 px, five sizes and no more.
- Spacing
- 4, 8, 16, 24, 32 and 64 px from one rhythm.
- Measure
- 60ch for ledes, 66ch for running text.
- Grid
- 12 columns, 1200px maximum, 24px gutter.
- Corners
- 0px everywhere. A rounded corner would soften the panel.
- Borders
- A single 4px black outline on every block.
- Shadows
- One hard offset, no blur, no glow.
- Motion
- 150ms on transform and colour only.
- Icons
- 1.05rem, 1.8px outline stroke, no fills.
- Files
- 3 HTML, 2 CSS, 2 JS. No build step, no framework.
What you get in the box
Six things that are already solved, so the work that remains is your own content.
-
Design tokens
Every colour, radius and shadow is a CSS variable, so the light and dark palettes live in a single block of overrides.
-
Semantic markup
Landmarks, one h1, ordered headings and real lists, so assistive technology reads the page in the order you wrote it.
-
Keyboard support
Every control is reachable with Tab and shows a visible 2px focus ring that is never removed.
-
Responsive by default
Fluid type and grid rules hold from 320px. Breakpoints only handle the navigation and the mode switcher.
-
Reduced motion
When the operating system asks for less movement, every transition on the page collapses to nothing.
-
No dependencies
No framework and no bundler. Open the file in a browser and it runs.
How a build with this theme goes
Four steps, usually two or three days for a small business site from brief to handover.
-
1
Pick three inks
We commit to three saturated colours and refuse a fourth, which is what keeps the volume from becoming noise.
-
2
Draw the outlines
Every block gets the same 4px border, so the layout reads as a set of panels before any copy is added.
-
3
Set it loud
Display type goes uppercase with a hard offset shadow, and the halftone ground goes in behind the hero at low opacity.
-
4
Prove it
We check contrast, keyboard order and a 320px viewport before the theme goes anywhere near production.
Is this the right theme for you?
Pop art is the loudest option here, so it is worth being honest about where it works and where it will fight you.
Use it when
- Events, launches and ticketing, where the page has to be noticed from across a room.
- Games, comics, music and anything aimed at a very young audience.
- Streetwear, records and products whose packaging is already the brand.
- Campaign and landing pages that exist to be clicked once, hard.
Skip it when
- Medical, legal or financial services, where loud reads as unserious.
- Long-form reading, where a halftone ground and uppercase type fight the reader.
- Corporate and enterprise buyers, who tend to read loud as risky.
- Brands that need calm to signal premium pricing.
Questions people ask
The things clients usually want to know before committing to a very loud design.
Can I copy this demo as a starting point?
Yes. The eight demos share css/styles.css and css/demo-themes.css. Each theme is one token block plus one character block, so copying a page and its theme gives you a working site with no wiring to redo.
Is loud the same as unprofessional?
No. Loud is a choice about colour and scale, not about craft. The contrast is checked, the type scale is still only five sizes, and the reading size never changes.
What if I only want part of this?
Then take the panel treatment without the halftone. The 4px outline and the flat colour are what carry the theme, and the ground pattern is one declaration you can drop.
Does the dark mode hold up?
It is a separate set of tokens, not an inversion. Light is a flat yellow ground with black ink; dark is a deep violet with the same three primaries lifted, so the outlines still read as outlines.
What fonts can I swap in?
Anything with a similar range of weights. The theme uses --display-font and --body-font, so you can point both at one family or run a second family for headings without touching the markup.
Is it accessible?
The light palette is checked token by token against the 4.5:1 ratio WCAG asks for, and dark mode is checked the same way. Focus rings are never suppressed, the FAQ uses real disclosure widgets, and every list on the page is a real list.
People stopped scrolling at the second block, which is the only metric that ever mattered to us. It is loud, and it works.
Live colour palette
Ten tokens, two palettes. The chips are painted with the same custom properties the page uses, and the code under each one is read live from the computed style, so the switch in the header updates both together.
- Background --bg
- Surface --surface
- Surface tint --surface-strong
- Primary --primary
- Primary soft --primary-soft
- Secondary --secondary
- Accent --accent
- Text --text
- Muted --muted
- Border --border
Light mode is a flat yellow ground with black ink and three saturated primaries. Dark mode swaps the ground for deep violet and lifts the same primaries, so the outlines keep reading. The value under each chip is read live from the computed style.
Try the other themes
The same content, seven other personalities. The mode you pick follows you between them.
- Demo Site 1 · Minimalism Less, but better. Monochrome, hairline rules and one accent spent only where it matters. Open the demo
- Demo Site 2 · Futuristic Built for what comes next. Deep blue, glow and a technical grid. Reads as fast and engineered. Open the demo
- Demo Site 3 · Pixel art Press start to build. Hard edges, chunky borders and a tiny palette lifted from 8-bit games. Open the demo
- Demo Site 4 · Clay style Soft edges, solid build. Big radii, warm colour and stacked shadows that feel moulded by hand. Open the demo
- Demo Site 5 · Retro Warm, printed, unhurried. Cream stock, a serif throughout and rules heavy enough to be seen. Open the demo
- Demo Site 7 · Maximalism Everything, all at once. Dense colour and stacked decoration, with no empty space anywhere. Open the demo
- Demo Site 8 · Editorial Ink, paper, one red rule. High-contrast serif headlines set like a magazine feature. Open the demo
Want this much noise for your launch?
Tell us what you do and what you would rather stop saying. We will send back a stripped-down first pass, a fixed price, and an honest note on anything we think should be cut.
Replies within one working day. No newsletter and no follow-up calls.