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
The same page, ready to useINSERT COIN starts an 8×8 six-color pixel board. Move drawing focus with arrows and paint with Space or click cells; clear and redraw. Start, Atlas and Shop reveal content without real coin payments.
Full-page preview · interact directly
What to look for
- 01Use BITMAP’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the BITMAP task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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.
Build a complete BITMAP page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. Keep BITMAP’s dark ground, uppercase Courier New monospace, square black rims, hard card shadows and original screen panel; do not convert existing screen gradients, web text or every neutral into six-color dithering. The six-color limit belongs to the actual 8×8 paint palette. Use the normal repeat(8,minmax(0,1fr)) board, 4px black outer rim and visible cell focus, without transforming page/text scale or introducing real coin payment. Reuse current preview.tokens: background #1A1C2C; foreground #F4F4F4; accent #EF7D57 / #1A1C2C; card #29366F; border #000000; radius 0px; font Courier New, ui-monospace, monospace; card shadow 4px 4px 0. Use generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows. Full-page operations: INSERT COIN starts an 8×8 six-color pixel board. Move drawing focus with arrows and paint with Space or click cells; clear and redraw. Start, Atlas and Shop reveal content without real coin payments. Share one renderer between static covers, the detail experience and /style-scenes/pixel-art/ (English /en/style-scenes/pixel-art/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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