PIXEL ART
PLAYSCORESABOUT

PIXEL ART

INSERT COIN TO CONTINUE

Retro 8-bit aesthetics. Sharp corners. Pixel borders. Hard shadows. PICO-8 palette. Pure nostalgia.

SCORE
9999
LEVEL
01
LIVES
03

COMPONENTS

CORE UI ELEMENTS

PALETTE SWAP — hover hard-cuts color, no transitions

PIXEL PERFECT DROP — active translate === shadow offset

<button className="
  px-6 py-3 bg-[#ff004d]
  border-[4px] border-[#1a1c2c] rounded-none
  text-white font-bold uppercase tracking-widest
  shadow-[4px_4px_0_#1a1c2c]
  hover:bg-[#29adff] hover:shadow-[4px_4px_0_#ff004d]
  active:translate-x-[4px] active:translate-y-[4px]
  active:shadow-none transition-none
">
  START
</button>

COLOR SYSTEM

PICO-8 INSPIRED PALETTE — 12 COLORS

DARK
#1A1C2C
RED
#FF004D
GREEN
#00E436
BLUE
#29ADFF
YELLOW
#FFEC27
PINK
#FF77A8
ORANGE
#FFA300
PURPLE
#7E2553
LIGHT
#F4F4F4
BROWN
#5F574F
TAN
#C2C3C7
TEAL
#008751

DESIGN RULES

DO'S AND DON'TS OF PIXEL ART UI

+

DO

  • [+]Use rounded-none — zero radius, always
  • [+]Use border-4 for all borders
  • [+]Hard shadow: 4px 4px 0 color — no blur
  • [+]PICO-8 / NES palette only
  • [+]Monospace or pixel fonts, uppercase
  • [+]Pixel Perfect Drop: active translate equals shadow offset exactly
  • [+]Palette Swap: hover hard-cuts to another 8-bit color
  • [+]transition-none everywhere — state machine, not animation engine
X

DON'T

  • [X]No rounded corners of any kind
  • [X]No gradients — ever
  • [X]No soft box-shadow with blur
  • [X]No off-palette colors
  • [X]No thin borders (border, border-2)
  • [X]No transition-* except transition-none
  • [X]No opacity transitions on hover
  • [X]No mismatched active translate vs shadow offset

TYPOGRAPHY

PIXEL FONT SYSTEM — MONOSPACE UPPERCASE

DISPLAYGAME OVER
HEADINGHIGH SCORE
SUBHEADLEVEL SELECT
BODYINSERT COIN TO CONTINUE. PRESS START TO PLAY.
CAPTION© 1985 STYLEKIT GAMES. ALL RIGHTS RESERVED.

LETTER SPACING SCALE

NORMAL (0em)PIXEL ART
TIGHT PIXEL (0.05em)PIXEL ART
STANDARD PIXEL (0.1em)PIXEL ART
WIDE PIXEL (0.2em)PIXEL ART
EXTREME PIXEL (0.4em)PIXEL ART

INTERACTIVE

LIVE GAME UI DEMOS

CURRENT SCORE

000000

PLAYER STATS

♥ HP75/100
★ XP2450/5000
◆ MP80/100

MAIN MENU — CLICK TO SELECT

SELECTED: START GAME

GAME OPTIONS

SOUND FX
MUSIC
VIBRATION

PHILOSOPHY

THE PIXEL ART ETHOS

■

PIXEL PERFECT

Every element aligns to the pixel grid. No sub-pixel rendering. No anti-aliasing. Hard edges only.

◆

STATE MACHINE

UI runs on a state machine, not an animation engine. All transitions are instantaneous hard cuts.

★

LIMITED PALETTE

16 colors maximum. PICO-8 inspired. Every color choice is deliberate, no gradients allowed.

♥

NOSTALGIA CODED

Every interaction echoes classic games. The aesthetic is constraint turned into identity.

BADGES

ACHIEVEMENTS AND ITEM TAGS

ITEM RARITY TAGS

COMMONUNCOMMONRAREEPICLEGENDARYGODLIKE

ACHIEVEMENT BADGES

1
★
PRO
MAX
99
NEW!
A
B
C
PIXEL ART

PART OF STYLEKIT

8-BIT RETRO GAMING AESTHETICS — PICO-8 PALETTE

© 2026 STYLEKIT. INSERT COIN TO CONTINUE.