Pixel Art UI
像素风
Aliases:像素风像素游戏界面8位机风格马赛克复古风点阵字界面pixel art UI8-bit UIpixel retro
What is it
Hard pixel edges, a limited palette and bitmap faces as a console-nostalgia interface look. Aliasing is correct, scaling must be integer, dithering does the gradients. Deliberately against anti-aliasing.
Design spec
Typography
Bitmap or monospace face at integer sizes
Color
A palette of six colors or fewer, hard high-contrast cuts
Border
2px solid pixel outlines, radius 0
Shadow
Hard offset pixel-block shadows, no blur
Spacing
8px grid alignment, elements snapped to the pixel lattice
Motion
No tweening, stepped and instant
States
Hover switches to a highlight pixel colour; focus shows a visible 2px pixel outline; active shifts by one pixel block; disabled drops to two greys; error uses a red pixel block
Style in action
See the full page, then try the interactive sceneFull-page preview
PRESS
START
Scale in whole numbers. Sharp pixels are the point.
NO ANTI-ALIASING ALLOWED.
INSERT COIN →No anti-aliasing
Up to six colors
Alternating two colors
Interactive scene
Loading demo…
✓ When to use
- Games, indie releases and retro-themed products where style is worldbuilding
- Nostalgic warmth via bitmap and limited color, or gamified progress
- Badges, achievements and status dots that must read at small size
✕ When not to use
- Long reading and dense tables — bitmap type degrades when scaled
- Continuous gradients, photo galleries and smooth motion
- Formal enterprise and finance UIs where pixels undercut trust
Variants
8-bit retro
8位复古
NES-style hard edges, 3–6 color palette, black-outlined blocks
Modern pixel
现代像素
Finer pixel grid, wider palette, radii as stepped corners
Isometric pixel
等距像素
2:1 isometric vignettes like a SimCity minimap
Implementation
image-rendering: pixelatedborder-radius: 0font-family: monospacebox-shadow: 多层硬阶梯模拟圆角background: repeating-conic-gradient() 抖动网点Pixel feel hinges on integer scaling: design assets at 1x and present via transform: scale(integer) or image-rendering: pixelated. Approximate radii with multi-layer hard box-shadow steps — or stay square. Fake gradients with dithering: repeating-conic-gradient alternating two colors. Type is a bitmap face (e.g. Press Start 2P) or monospace with letter-spacing. Dark mode swaps the palette but keeps the same grid.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement Pixel Art UI visual style in the current project. Inspect existing icon and font assets first; manage pixel assets at integer scale factors. Requirements: - Hard pixel edges, border-radius 0, solid pixel-block outlines - Palette collapsed to 6 colors or fewer; gradients always dithered - Bitmap or monospace type at integer sizes - Buttons swallow their hard shadow on press; image-rendering: pixelated for bitmaps - Dark mode on the palette's dark tier; text contrast compliant - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language reviving turn-of-the-millennium digital optimism: liquid chrome, iMac translucent candy plastics, bubble type, sparkle stars, and pink-purple-blue gradients on silver highlights. It mixes naive futurism with clumsy low-poly 3D — sweet, shiny, gloriously unrestrained.
StylesSimilarThe future as imagined by the past: cream-orange-brown warm palettes, chunky rounded casings, orbit lines and planet decals, pixel screens and CRT phosphor — optimistic tech that has aged. Space-age dashboards, vintage appliances and space-race posters fold into one warm nostalgic future.
StylesSimilar"High tech, low life" as a visual language: neon cyan and magenta edges cut through a near-black ground, monospace type and terminal glyphs run throughout, and scanlines plus glitch offsets suggest overloaded systems. Light is sliced out of darkness — the screen feels hijacked.
StylesUsed withA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsAffectsA loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.
ComponentsAffects