← All UI styles
Pixel Eight Bit
Everything snaps to an 8px cell: square corners, hard edges, no half pixels.
PixelretroGamesDeveloper toysNostalgia products
Construction · Pixel
Everything snaps to the grid: hard rings instead of borders, block offsets instead of shadows, and no soft edge anywhere.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Pixel Eight Bit style. Every dimension is a multiple of 8, corners are square, and there is no anti-aliasing or blur anywhere. Type is monospaced and set on the same cell. Build every
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- everything on an 8px cell
- square corners
- no anti-aliasing
- monospaced type
What this style refuses
- rounded corners
- blurred shadows
- gradients
- sub-pixel spacing
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#e8e8d8#101014Surface
#f4f4e8#18181eBorder
#2a2a20#e8e8dcText
#141410#f0f0e4Muted text
#525246#9e9e92Accent
#2a6f3f#57d67fOn accent
#f4f4e8#04160cShape and type
Radius0 / 0 / 0 px
Border2px solid
Shadowhard-offset
Displayui-monospace
Bodyui-monospace
Monoui-monospace
Type scale10 · 12 · 14 · 16 · 24 · 32 px
Weights400 / 700 / 700
Line height1.5
Tracking0em
Spacing8px grid · regular
Surfaceflat
Accentblock
Separatorhairline
Labelsuppercase
Blurnone
Measured contrast — body 14.92:1 light, 16.53:1 dark; secondary text 6.39:1 and 7.01:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Pixel Eight Bit
*
* Everything snaps to an 8px cell: square corners, hard edges, no half pixels.
*
* One complete product screen, rendered from the token object below —