All skills
staqd.ai/previews/dithered
Open

Live demo — an original page built in the Dithered style. Open in new tab

Proretro

Dithered

Patterned pixel-grit and controlled noise give clean layouts a tactile, retro-machine character without sacrificing legibility.

Install via CLI

$ npx staqd add dithered
Indie tool landing pagesMusic and game-adjacent productsDeveloper-facing dashboards with attitude

Inside this skill

Dithered is a retro-machine aesthetic that borrows the visual language of early bitmap displays — ordered stipple patterns, halftone bands, and controlled noise — and applies it with restraint to otherwise modern, well-spaced layouts. The grit lives in textures and edges, never in the typography or alignment, so the result reads as deliberate craft rather than chaos. It creates a feeling of analog warmth fused with engineered precision, like a well-made instrument. Reach for it when a product wants personality and a hand-built signal without tipping into full kitsch.

Design principles

  • Texture is decoration, never structure: dither patterns sit behind or beside content, never inside reading areas.
  • Keep the grid clean and the type sharp; the contrast between crisp text and noisy fields is the entire point.
  • Favor flat fills and 1px borders over soft shadows — depth is implied by stippling, not blur.
  • Limit the palette hard; let one warm accent and one cool secondary carry all emphasis.
  • Every dither field should have intent: a fade, a band, a highlight — never a full-bleed wash of noise.
  • Pixel-snap everything. Borders, dividers, and pattern cells align to a 4px sub-grid for that machine-cut feel.

Dithered is a Pro skill

Unlock the full Dithered spec — design tokens, component coverage, motion, and accessibility — plus the entire library of design skills and Pro prompts.

  • Every design skill, growing weekly
  • Full Pro prompt library + unlimited MCP
  • Commercial-use rights on output

Use it with these prompts

Hero with dither texture

Free

Build a landing hero in the Dithered style: dark #0E0E12 background overlaid with a fine ordered-dither stipple band behind the headline, a tracked-tight Space Grotesk heading in #E8E4D8, and a solid #FF5C39 primary button with a 4px radius and 1px border.

Stat panel grid

Pro
Unlock this prompt with ProUpgrade

Pricing table

Pro
Unlock this prompt with ProUpgrade