ZeroFy

Demo Site 3 — Pixel art

Press start to build.

Pixel art borrows the grammar of 8-bit games: hard edges, chunky borders, a fixed grid and a small deliberate palette. It reads as playful, and it loads fast.

  • Monospace
  • Hard edges
  • 8px tiles
  • No radius
  • Light and dark
Start your project See the next demo

What this theme does

Four rules borrowed straight from 8-bit game menus, applied to a web page.

Tiles

Everything snaps to a visible grid. Nothing overlaps or bleeds, so the layout stays crisp at any zoom level.

Sprites

Icon-like accents and offset shadows give elements a physical, pressable quality that flat cards cannot match.

Palettes

A few saturated colours go a long way. Dark mode swaps the arcade palette for neon on deep purple-black.

Speed

Hard shadows and no blur mean the page is cheap to paint, which is why the genre still works on low-end devices.

The theme in numbers

Everything in this theme is a whole number. That is not a coincidence, it is the style.

  • 0px Border radius

    Not one rounded corner anywhere in the theme.

  • 3px Hard borders

    Thick enough to read as a sprite edge, thin enough to keep the grid.

  • 6px Offset shadow

    A solid block shadow, never blurred and never grey.

  • 4 Colours

    Ink, paper and two accents. Dark mode swaps the accents, not the system.

Typography and spacing

The same specimen as the other demos, set in monospace so you can see how the character grid changes the rhythm.

  • Display 68px

    START

  • Heading 36px

    PLAYER ONE

  • Title 22px

    INSERT COIN

  • Body 17px

    Set in a monospace face so every line starts on the same character.

  • Caption 13px

    SCORE 000120

Display
Courier New 800, tight tracking and no anti-aliased softness.
Body
Courier New 400 at 17px, which keeps the measure honest at any width.
Tile
8px base, so padding, gaps and borders all land on whole pixels.
Borders
3px solid ink in light, 3px near-black in dark. Always the same weight.
Shadows
6px 6px 0 in the ink colour. No blur, no spread, no opacity.
Radii
0px everywhere, including buttons, chips and the FAQ panels.
Grid
A 32px checkerboard sits behind the hero, faded to 55 percent.
Motion
Hover lifts by 2px and the shadow grows to 7px. Nothing fades.
Type
All monospace, which is what makes the page feel like one sprite sheet.
Files
3 HTML, 2 CSS, 2 JS. No images and no sprite sheet to load.

What you get in the box

Six things already solved, and not one image to download with them.

  • A real grid

    Padding, gaps and borders are all multiples of 8px, so the layout never drifts by a stray pixel at any zoom level.

  • Sprite-like hover

    Cards lift two pixels and the block shadow grows to match, so the press feels physical rather than decorative.

  • Two palettes

    Light is cream and ink with a red accent. Dark is arcade green and hot pink on deep purple-black, with the same four-colour logic.

  • Zero image weight

    The checkerboard, the borders and the shadows are all CSS. There is no sprite sheet to download, so the page paints immediately.

  • Readable anyway

    Large type, high contrast and 44px targets. Playful is not the same thing as inaccessible.

  • Reduced motion

    The lift is switched off entirely when the system asks for less movement, and the shadow holds still.

How a build with this theme goes

Four steps. The colour rule at step three is the one that keeps the theme honest.

  1. 1

    Sketch the grid

    We draw the page as tiles first. If a block does not fit the 8px grid, the content is wrong rather than the grid.

  2. 2

    Snap the type

    Monospace only, with line lengths in whole characters so the right edge is as straight as the left one.

  3. 3

    Pick four colours

    Ink, paper and two accents. The moment a fifth colour is needed, something is being said twice.

  4. 4

    Ship it light

    The whole theme is under 5KB of extra CSS and no images, so it loads before the fonts do.

Is this the right theme for you?

The style is loud in a way that is hard to un-notice, so it is worth saying plainly who should stay away.

Use it when

  • Game studios, indies and anything launching into a fandom.
  • Retro and nostalgia brands that grew up on 8-bit references.
  • Events, tournaments and community meet-ups with a crowd under 40.
  • Side projects that deserve more personality than a corporate template.

Skip it when

  • Enterprise and B2B, where the style reads as unserious.
  • Finance, insurance and health, where trust comes from restraint.
  • Long documents, where monospace at length is tiring to read.
  • Dense tables and forms, which need a softer visual rhythm.

Questions people ask

The questions that come up most when a client brings us a screenshot of a retro site.

Is pixel art just nostalgia?

It started there, but the reason it survives is mechanical. Hard edges and block shadows are the cheapest depth effect a browser can draw, and a small palette removes the decisions that make a page look generic. Nostalgia is a bonus.

Does the monospace text hurt readability?

At 17px with a 1.65 line height it reads fine, which is why the body size is not reduced for style. Push the measure past 75 characters and the eye starts to struggle, so the container is capped rather than left full width.

Why is the dark mode green and pink?

Because light mode is ink on cream and dark mode is a different palette, not an inverted one. Neon green against purple-black is the arcade reference, and it keeps the same four colours in play so the layout does not have to change.

Can I use a pixel font?

Yes, and most sites in this style do. Swap --display-font and --body-font for a pixel face, but check the line height: pixel fonts sit larger and usually need 1.7 or 1.8 to stay readable.

Will it work at 200 percent zoom?

Yes. The layout is built on whole-pixel tiles and relative units, so at 200 percent every border stays even and nothing overlaps. Hard shadows scale with the layout, which is exactly the behaviour you want.

What about accessibility?

Playful does not mean inaccessible. Text contrast is well past AA in both modes, the focus ring is a solid 3px outline, the FAQ uses native disclosure elements, and every target is at least 44px on its shortest side.

Our players recognised the genre before they read a word, and the page still loaded in under a second on three-year-old hardware.

Placeholder testimonial for this demo — swap in a real client quote before launch.

Live colour palette

Ten tokens, two palettes, and a border colour that follows the ink rather than the paper. The code under each chip is read live from the computed style.

  • 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 cream and ink with a red accent. Dark mode is arcade green and hot pink on deep purple-black, which is why the border flips to near-black rather than staying brown. Values under each chip are read live from the computed style.

Try the other themes

Seven other personalities to compare against, with your colour mode carried across.

Want your project to look like this?

Tell us what it is for and who it has to win over. We will build a one-page version in this style so you can judge it before committing to anything.

Start your project Read about ZeroFy

Replies within one working day. No newsletter and no follow-up calls.