Pixel Art

Also called: 8-bit UI, 16-bit, Retro Game UI, Pixel UI

A console game as an interface: pixel fonts, notched pixel borders, a 16-colour palette, chunky bevels and blocky sprites on a sky-blue level.

“8-bit”Retro & NostalgiaEra: 1985–1995 consoles, revived by indie gamesPlayfulNostalgicFriendlyBold

Open full screen ↗

pixel-art / landingEN

pixel-art / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

pixel fontnotched pixel borderstepped box-shadow16-colour palettechunky beveldithered patternblocky clouds and heartscrisp jagged edges

Pixel Art makes every element look drawn on a low-resolution grid. Type is a bitmap face, borders are 4px blocks with the corners knocked out (stepped box-shadows, no radius), and surfaces get a one-pixel-step bevel — light on the top-left, dark on the bottom-right — like NES and SNES menus. Colour comes from a fixed 16-colour palette, gradients become dithered checkerboards, icons and charts render with crisp, jagged edges, and the backdrop is a sky with blocky clouds. Interactions are snappy: buttons hop up on hover and drop on press.

Best for

Indie games, game jams and launchers
Gamified learning and kids’ apps
Developer tools and hackathon sites with a playful voice
Achievement, quest and leaderboard screens

Avoid for

Long-form reading in pixel type
Luxury, finance and healthcare
Dense enterprise data tables
Brands that need a modern or premium feel

✓ Do

Keep borders, bevels and offsets on multiples of 2px (4px outlines, 8px drops) and spacing on a 4px grid
Use the 16-colour sweetie base palette plus the documented UI extras only (sky bg, contrast-safe success/warning, white fields, pale on-navy text, #566C86 drop); replace gradients with dithered checkerboards
Use the pixel font for display, labels and numbers, and a readable pixel-ish sans for paragraphs
Set shape-rendering: crispEdges / image-rendering: pixelated on icons, charts and sprites

✕ Don't

No border-radius, blur, soft shadows or smooth gradients
Don’t use thick borders with square corners and a flat drop shadow only — that is Neubrutalism
Don’t set paragraphs in Press Start 2P
Don’t use odd border or offset sizes that break the pixel grid (3px, 5px); keep them multiples of 2px
Don’t use neon glow, chrome or smooth sunset gradients — that is Retro-Futurism / Vaporwave

Not to be confused with

Neubrutalism →Neubrutalism has smooth thick outlines with square or rounded corners and one hard shadow; Pixel Art knocks the corners out into stepped pixels, adds a light/dark bevel and uses bitmap fonts.Gamified Playful →Gamified Playful is a smooth, rounded, modern app (Duolingo) with 3D bottom borders; Pixel Art is literally low-res — bitmap type, jagged icons and a fixed 16-colour palette.Terminal CLI →Terminal is monospace text on black with prompts and ASCII boxes; Pixel Art is colourful, sprite-based and lives on a bright game-world backdrop.

On mobile

Pixel UIs are born on small screens: keep 4px notched borders, make the tab bar a navy game HUD with a gold ▶ cursor on the active item, and turn progress into segmented health bars. Use 2× pixel scale (8px blocks) for touch targets so nothing gets fiddly.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinPress Start 2P · 400

The quick brown fox

Heading · ThaiBai Jamjuree · 400/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinPixelify Sans · 400/500/600/700

Clear words make shared decisions.

Body · ThaiBai Jamjuree · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

There is no Thai bitmap face on Google Fonts, so Bai Jamjuree stands in: its squared, engineered loopless strokes and flat terminals read as blocky next to Press Start 2P and Pixelify Sans.

Colour palette

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`4px`
Shadow	`12px 8px 0 0 #566C86, 8px 12px 0 0 #566C86`
Display	`clamp(1.5rem, 3.3vw, 2.7rem)`
Motion	`100ms steps(2, end)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Pixel Art (pixel-art) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Press+Start+2P:wght@400&family=Pixelify+Sans:wght@400;500;600;700&family=Silkscreen:wght@400;700&family=Bai+Jamjuree:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 0px;
  --background: #8FD3FF;
  --foreground: #1A1C2C;
  --card: #F4F4F4;
  --card-foreground: #1A1C2C;
  --popover: #F4F4F4;
  --popover-foreground: #1A1C2C;
  --primary: #38B764;
  --primary-foreground: #1A1C2C;
  --secondary: #B13E53;
  --secondary-foreground: #F4F4F4;
  --muted: #73EFF7;
  --muted-foreground: #333C57;
  --accent: #73EFF7;
  --accent-foreground: #1A1C2C;
  --destructive: #B13E53;
  --border: #1A1C2C;
  --input: #1A1C2C;
  --ring: #38B764;
  --chart-1: #3B5DC9;
  --chart-2: #B13E53;
  --chart-3: #38B764;
  --chart-4: #EF7D57;
  --chart-5: #5D275D;
  --sidebar: #F4F4F4;
  --sidebar-foreground: #1A1C2C;
  --sidebar-primary: #38B764;
  --sidebar-primary-foreground: #1A1C2C;
  --sidebar-accent: #73EFF7;
  --sidebar-accent-foreground: #1A1C2C;
  --sidebar-border: #1A1C2C;
  --sidebar-ring: #38B764;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Pixel Art (pixel-art) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Press+Start+2P:wght@400&family=Pixelify+Sans:wght@400;500;600;700&family=Silkscreen:wght@400;700&family=Bai+Jamjuree:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #8FD3FF;
  --color-surface: #F4F4F4;
  --color-surface-2: #73EFF7;
  --color-text: #1A1C2C;
  --color-text-muted: #333C57;
  --color-primary: #38B764;
  --color-on-primary: #1A1C2C;
  --color-secondary: #B13E53;
  --color-on-secondary: #F4F4F4;
  --color-accent: #FFCD75;
  --color-border: #1A1C2C;
  --color-success: #257A45;
  --color-warning: #B5541E;
  --color-danger: #B13E53;
  --color-chart-1: #3B5DC9;
  --color-chart-2: #B13E53;
  --color-chart-3: #38B764;
  --color-chart-4: #EF7D57;
  --color-chart-5: #5D275D;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --shadow-sm: 6px 4px 0 0 #566C86, 4px 6px 0 0 #566C86;
  --shadow-md: 12px 8px 0 0 #566C86, 8px 12px 0 0 #566C86;
  --shadow-lg: 16px 12px 0 0 #566C86, 12px 16px 0 0 #566C86;
  --font-heading: "Press Start 2P", "Bai Jamjuree", system-ui, sans-serif;
  --font-body: "Pixelify Sans", "Bai Jamjuree", system-ui, sans-serif;
  --font-mono: "Silkscreen", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Pixel Art (pixel-art). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Press+Start+2P:wght@400&family=Pixelify+Sans:wght@400;500;600;700&family=Silkscreen:wght@400;700&family=Bai+Jamjuree:wght@400;500;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.8275,
            1
          ],
          "hex": "#8fd3ff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9569,
            0.9569
          ],
          "hex": "#f4f4f4"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.451,
            0.9373,
            0.9686
          ],
          "hex": "#73eff7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.1098,
            0.1725
          ],
          "hex": "#1a1c2c"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2,
            0.2353,
            0.3412
          ],
          "hex": "#333c57"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2196,
            0.7176,
            0.3922
          ],
          "hex": "#38b764"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.1098,
            0.1725
          ],
          "hex": "#1a1c2c"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6941,
            0.2431,
            0.3255
          ],
          "hex": "#b13e53"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9569,
            0.9569
          ],
          "hex": "#f4f4f4"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8039,
            0.4588
          ],
          "hex": "#ffcd75"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.1098,
            0.1725
          ],
          "hex": "#1a1c2c"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1451,
            0.4784,
            0.2706
          ],
          "hex": "#257a45"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7098,
            0.3294,
            0.1176
          ],
          "hex": "#b5541e"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6941,
            0.2431,
            0.3255
          ],
          "hex": "#b13e53"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.3647,
            0.7882
          ],
          "hex": "#3b5dc9"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6941,
            0.2431,
            0.3255
          ],
          "hex": "#b13e53"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2196,
            0.7176,
            0.3922
          ],
          "hex": "#38b764"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.4902,
            0.3412
          ],
          "hex": "#ef7d57"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3647,
            0.1529,
            0.3647
          ],
          "hex": "#5d275d"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 4,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3373,
              0.4235,
              0.5255
            ],
            "hex": "#566c86"
          },
          "offsetX": {
            "value": 6,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3373,
              0.4235,
              0.5255
            ],
            "hex": "#566c86"
          },
          "offsetX": {
            "value": 4,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3373,
              0.4235,
              0.5255
            ],
            "hex": "#566c86"
          },
          "offsetX": {
            "value": 12,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3373,
              0.4235,
              0.5255
            ],
            "hex": "#566c86"
          },
          "offsetX": {
            "value": 8,
            "unit": "px"
          },
          "offsetY": {
            "value": 12,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3373,
              0.4235,
              0.5255
            ],
            "hex": "#566c86"
          },
          "offsetX": {
            "value": 16,
            "unit": "px"
          },
          "offsetY": {
            "value": 12,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3373,
              0.4235,
              0.5255
            ],
            "hex": "#566c86"
          },
          "offsetX": {
            "value": 12,
            "unit": "px"
          },
          "offsetY": {
            "value": 16,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Press Start 2P",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Pixelify Sans",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Silkscreen",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Bai Jamjuree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 100,
      "unit": "ms"
    }
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!