# Pixel Art > 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. - Nickname: 8-bit - Also called: 8-bit UI, 16-bit, Retro Game UI, Pixel UI - Category: Retro & Nostalgia - Moods: Playful, Nostalgic, Friendly, Bold - Industries: Gaming, Kids & Family, Education, Creative & Portfolio, Startup & Tech - Style page: https://uilingo.dev/styles/pixel-art/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Pixel Art" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line 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. Design keywords: pixel font, notched pixel border, stepped box-shadow, 16-colour palette, chunky bevel, dithered pattern, blocky clouds and hearts, crisp jagged edges. ## Visual language The interface is a console game from the late 80s: everything snaps to a 4px grid and looks drawn in low resolution. Bitmap type, 4px outlines with the corners knocked out into steps, and a one-step bevel (light top-left, dark bottom-right) make every panel look like an NES/SNES menu box. The world behind is a flat sky-blue level with blocky clouds and a grass-and-dirt strip; colour comes only from a fixed 16-colour palette, and shading is done with dithered checkerboards instead of gradients. Icons, charts and sprites have crisp, jagged edges, and controls hop up and drop down in two-frame steps. ## Signature details (must be visible) - Notched pixel outline instead of border: box-shadow 0 -4px 0 0 #1A1C2C, 0 4px 0 0 #1A1C2C, -4px 0 0 0 #1A1C2C, 4px 0 0 0 #1A1C2C (no radius, corners stay empty); badges alone use a 2px stepped outline. Grid rule: borders, bevels and offsets are multiples of 2px; spacing tokens are 4/8/12/16/24/32/48 (multiples of 4); type sizes are exempt - One-step bevel on every panel and button: inset -4px -4px 0 0 rgba(26,28,44,.2), inset 4px 4px 0 0 rgba(255,255,255,.75); sunken fields reverse it - Hard pixel drop that keeps the notch, always a stepped pair of opaque #566C86 offsets listed after the outline: buttons 6px 4px 0 0 + 4px 6px 0 0; cards and dialog boxes 12px 8px 0 0 + 8px 12px 0 0; card hover 16px 12px 0 0 + 12px 16px 0 0. The shadow tokens sm/md/lg hold exactly these pairs. Never a single plain or translucent rectangle drop - Colour: the 16-colour sweetie base palette #1A1C2C #5D275D #B13E53 #EF7D57 #FFCD75 #A7F070 #38B764 #257179 #29366F #3B5DC9 #41A6F6 #73EFF7 #F4F4F4 #94B0C2 #566C86 #333C57, plus these named extras only: --sky #8FD3FF (page bg), --field #FFFFFF (inputs), --tile-pink #FFB3C1 (icon tiles), --on-navy #C9D3E8 (text and links on navy), --trough #E3EEF5 (chart troughs, heatmap base), --drop #566C86 (pixel drop), success #257A45 and warning #B5541E (text-contrast tokens) and ink rgba bevels. Dithered alternate sections use surface-2 #73EFF7 under a .28 white checker - Press Start 2P (weight 400 only) for display, headings and numbers; Silkscreen for labels and buttons; Pixelify Sans for paragraphs. Display in gold #FFCD75 with text-shadow 2px 0 0 #1A1C2C, -2px 0 0 #1A1C2C, 0 2px 0 #1A1C2C, 0 -2px 0 #1A1C2C, 2px 2px 0 #1A1C2C, -2px -2px 0 #1A1C2C, 2px -2px 0 #1A1C2C, -2px 2px 0 #1A1C2C, 4px 4px 0 #1A1C2C (a 2px outline plus a 4px drop). Thai: apply font-weight 700 and font-synthesis: none only to elements whose text is Thai, so squared Bai Jamjuree 700 is used; wrap Latin-only headings or runs in lang=en so Press Start 2P stays at 400 and is never faux-bolded. Set word-spacing (not letter-spacing) to about -0.45em on Thai headings, needed only because the space glyph comes from the 1em-wide Press Start 2P - Dithering: checker cell 4px, repeat 8px — repeating-conic-gradient(rgba(255,255,255,.18) 0 25%, transparent 0 50%) 0 0 / 8px 8px (up to .28 on the cyan #73EFF7 bands) on alternate sections, art blocks and the CTA - World, drawn as crisp SVG rect sprites (shape-rendering: crispEdges): a ground strip position:fixed; bottom:0; height:36px; z-index:5 — a 4px #A7F070 top edge stepped every 8px, 8px #38B764 grass, 24px #EF7D57 dirt dithered with #B13E53 on a 4px checker — with body/page padding-bottom 36–40px so the footer is never covered. Blocky white clouds are fixed repeat-y columns of 128×48px clouds placed at left:-64px and right:-64px so about 60% of each cloud shows at the viewport edge, never inside the content column. Pixel hearts mark eyebrows and list items; pixel stars sit in art blocks - Motion in steps: transition timing steps(2, end) at 100ms; buttons translateY(-4px) on hover and +2px with a sunken bevel and no drop on press; cards hop -4px and their drop steps up to 16/12 + 12/16 ## Design tokens — use these exact values Colours (light mode): - background #8FD3FF - surface #F4F4F4 - surface-2 #73EFF7 - text #1A1C2C - text-muted #333C57 - primary #38B764 (text on it #1A1C2C) - secondary #B13E53 (text on it #F4F4F4) - accent #FFCD75 - border #1A1C2C - success #257A45 · warning #B5541E · danger #B13E53 - chart series #3B5DC9, #B13E53, #38B764, #EF7D57, #5D275D Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 4px Shadows: sm `6px 4px 0 0 #566C86, 4px 6px 0 0 #566C86`, md `12px 8px 0 0 #566C86, 8px 12px 0 0 #566C86`, lg `16px 12px 0 0 #566C86, 12px 16px 0 0 #566C86` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 100ms steps(2, end) ## Typography (Latin + Thai) - Headings: Press Start 2P 400 with Thai fallback Bai Jamjuree 400/600/700 - Body: Pixelify Sans 400/500/600/700 with Thai fallback Bai Jamjuree 400/500/600 - Mono: Silkscreen - Google Fonts URL: 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 - CSS stacks: heading `"Press Start 2P", "Bai Jamjuree", system-ui, sans-serif`; body `"Pixelify Sans", "Bai Jamjuree", system-ui, sans-serif`; mono `"Silkscreen", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Bai Jamjuree — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(1.5rem, 3.3vw, 2.7rem), heading weight 400, heading tracking 0em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Button: Silkscreen uppercase label (Latin); Bai Jamjuree 700 for Thai with no uppercase and letter-spacing 0. Notched outline + raised bevel + stepped drop 6px 4px 0 0 #566C86, 4px 6px 0 0 #566C86; primary green #38B764 with ink text, accent/danger red #B13E53 with #F4F4F4 text, default light grey #F4F4F4 - Card / dialog box: #F4F4F4 fill, notched outline, bevel and the stepped drop 12px 8px 0 0 + 8px 12px 0 0 #566C86; hover = the card hops translateY(-4px) and the drop becomes 16px 12px 0 0 + 12px 16px 0 0; the highlight card is navy #29366F with #F4F4F4 text, #C9D3E8 secondary text and a gold price; the featured pricing badge is a gold #FFCD75 tag with ink text and a 2px stepped outline - Icon tile: 44px gold (or cyan / lime / pink rotating) square with its own bevel and notched outline; icons render with square caps and crisp edges - Input: white sunken field with the notched ink outline; focus recolours the outline to blue #3B5DC9, error to red #B13E53 - Checkbox and radio: square cells with a 4px stepped outline; checked = green fill with a thick 4px ink tick or a square ink dot - Progress: ink trough with a segmented health bar — repeating 12px blocks separated by 4px gaps (green; red on the featured card) - Tabs and nav: active item gets a ▶ cursor and a gold or red underline; nav links show the ▶ cursor on hover too; the top nav is a navy #29366F HUD bar with a 4px ink edge. Label/mono stack '"Silkscreen", "Bai Jamjuree", monospace'; :lang(th) labels, buttons, tabs and nav switch to Bai Jamjuree 600–700, no uppercase, letter-spacing 0. Footer: the same navy HUD bar with a 4px ink top edge holding the logo, 3 Silkscreen link columns and its blurb in #C9D3E8, and a '© 2026 · PRESS START' line - Charts: 4px-wide lines with miter joins and square caps, dashed 8/8 comparison line, square heatmap cells green on #E3EEF5; vertical bars outline with an inset 4px ink box-shadow (so each bar keeps its column width), 12px gaps and each label centred under its bar - Badges: tiny Silkscreen tags with a 2px stepped outline (the half-step is allowed only on badges), filled lime / gold / grey for status and red #B13E53 with #F4F4F4 text for danger; inside tables keep them nowrap at ~.62rem so they never clip - Steps: each step is an LV.n dialog box (card recipe: #F4F4F4, bevel, notched outline, stepped drop, 20px padding) with a gold number tile reading 'LV.' in Press Start 2P .7rem followed by the number, then a title and one line of copy ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → stats → features → steps → pricing → faq → cta. Feature section as grid. A split hero on the sky-blue level (blocky clouds bleeding off the outer edges, the fixed grass-and-dirt strip at the viewport bottom): heart-prefixed eyebrow, gold outlined pixel headline, short lead, a green START-style button and a grey secondary, with a cluster of pixel dialog boxes (chart + score counters) on the right. Stats become score boxes; features are a 3-column grid (3 + 3) of item cards with coloured icon tiles; steps read like levels (LV.1, LV.2… dialog boxes with gold number tiles); pricing uses a navy highlight card with a gold badge; the FAQ uses ▶/▼ toggles; the CTA is a dithered navy screen; the footer is the navy HUD bar. Long text sits in a large light dialog box. Dashboards use a navy menu sidebar with a gold active item, score-counter KPIs in Press Start 2P and crisp 4px charts. ## Content Use realistic product copy (fictional brand) suited to: Indie games, game jams and launchers. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Any border-radius, blur, soft shadow or smooth gradient — shade with dithering and hard steps - Thick square outlines with a single flat drop shadow and bright pastel cards — that reads as Neubrutalism - Smooth, rounded modern components with 3D bottom borders — that is Gamified Playful - Paragraphs or long Thai text in a bitmap font, or faux-bold on Press Start 2P - Colours outside the 16-colour base palette and its documented extras, and borders/offsets that are not multiples of 2px (no 3px or 5px) - Black terminal screens with monospace prompts — that is Terminal / CLI ## Stack notes One self-contained HTML file with a