8-bit-vibez

COLOR PALETTE

#0d0d1a--bg

#1d2b53--bg-2

#f8f0e3--text

#c2c3c7--text-dim

#00e436--green

#ff004d--red

#ffec27--yellow

#29adff--blue

#7e2553--purple

#ffa300--orange

#ff77a8--pink

#ab5236--brown

TYPOGRAPHY

LEVEL UP

GAME OVER

PLAYER ONE

HIGH SCORE: 99999

JetBrains Mono — body copy, error messages, sustained reading.

The quick brown fox jumps over the lazy dog. 0123456789

Use this font for anything longer than a label — Dogica fatigue sets in fast.

PIXEL-BUTTON

Primary

Secondary

Danger

Loading

Disabled

PIXEL-INPUT

PIXEL-TEXTAREA

PIXEL-CHECKBOX / RADIO / TOGGLE

PIXEL-RANGE

PIXEL-SELECT / NUMBER

PIXEL-PROGRESS

PIXEL-LIFE / SCORE / BADGE

Common

Uncommon

Rare

Epic

Legendary

PIXEL-STATUS

PIXEL-TOAST

Success

Info

Error

PIXEL-TOOLTIP

Hover me

Epic

PIXEL-DIVIDER

PIXEL-CARD

HP: 80/100

MP: 40/50

Level Up! +250 EXP

HP below 20%

PIXEL-PANEL

Volume: 75%

1920 × 1080 @ 60Hz

Ping: 32ms · Region: EU

PIXEL-TABS

HP 80/100 · MP 40/50 · EXP 65%

Sword +3 · Shield · 25 Potions

Music ON · SFX ON · Difficulty Hard

PIXEL-DIALOG

Open Dialog

Unsaved progress will be lost. Are you sure you want to quit?

Quit

Cancel

PIXEL-CURSOR

            
            Continue
          
            New Game
          
            Load Game
          
            Settings

PIXEL-TYPEWRITER

PIXEL-DIALOG-BOX

Click the box to advance text / next page.

PIXEL-SPRITE

4× @ 8fps · 3× @ 4fps · 2× paused · Replace src with any sprite sheet PNG.

PIXEL-MAP

10×10 map at 3× scale. Tile indices: 0=void 1=wall 2=grass 3=water 4=dirt 5=sand.

PIXEL-SCANLINE

CRT scanline + vignette overlay preview

Production use: add <pixel-scanline> directly to <body> for a full-page effect.