Pixel / Retro-Modern Hybrid

---
name: pixel-retro-modern
description: Apply the Pixel / Retro-Modern Hybrid visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Pixel / Retro-Modern Hybrid, mentions retro-modern pixel, modern pixel accents, indie dev aesthetic, or describes modern grid with pixel decorations, bitmap display type over modern sans body, hard pixel shadows on soft layouts — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Pixel / Retro-Modern Hybrid Design System

A clean, contemporary layout — modern sans body, sensible grid, generous whitespace — seasoned with pixel-art accents: bitmap headings, sprite icons, hard pixel shadows, and dithered decorations. The console nostalgia is the garnish, not the meal.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Pixel / Retro-Modern Hybrid.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (retro-modern pixel, modern pixel accents, indie dev aesthetic, pixel-flavored modern, itch style), or describes its traits: modern grid with pixel decorations; bitmap display type over modern sans body; hard pixel shadows on soft layouts; sprite icons and dithered accents; mixed sharp and rounded radii.

## Design tokens

### Color palette

- Clean near-white background: `#fafafa` (--color-bg)
- Card and panel surface: `#ffffff` (--color-surface)
- Near-black modern text: `#18181b` (--color-text)
- Secondary gray text: `#52525b` (--color-text-muted)
- Arcade pink-red — CTAs, links, sprite accents: `#d61355` (--color-accent)
- Cool blue secondary accent: `#2563eb` (--color-accent-blue)
- Pixel shadow and sprite outline color: `#27272a` (--color-pixel-dark)
- Quiet hairline borders: `#e4e4e7` (--color-border)

### Typography

- Display / headings: Press Start 2P (fallback: Courier New, monospace)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: Silkscreen (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.5, letter-spacing 0
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Modern and breathable — standard marketing-site rhythm; pixel elements are placed sparsely so each one lands.
- Border radius: none 0px, sm 6px, md 12px — Mixed on purpose: modern containers get 6–12px, anything pixel-flavored (buttons with pixel shadows, sprite frames) stays at 0.
- Border treatment: 1px solid #e4e4e7 — Quiet modern hairlines by default; pixel-accented elements upgrade to 2px solid #27272a.

### Shadows

- pixel: `4px 4px 0 #27272a` — Pixel-flavored buttons and featured cards
- soft: `0 2px 8px rgba(24,24,27,0.08)` — Standard modern cards
- soft-lg: `0 8px 24px rgba(24,24,27,0.12)` — Modals and hover elevation

### Layout

- Max content width: 1200px
- Standard 12-column responsive grid — the layout itself is fully modern
- Pixel decorations anchor section corners or heading starts, never carpet the page
- Sprite divider strips (small repeating pixel pattern) between major sections
- Hero mixes a bitmap headline with modern subcopy and buttons

### Effects

- Sprite icons (hearts, stars, arrows) at integer scales with image-rendering: pixelated
- Dithered checkerboard fade on one hero edge
- Pixel-art mascot or badge as the brand mark
- Cursor trail or hover sparkle sprites, used very sparingly

### Motion

- Easing: cubic-bezier(0.2, 0, 0, 1); durations 120ms / 220ms / 400ms
- Modern elements ease smoothly; pixel elements move in steps() — the contrast is the point
- Pixel buttons jump 2px toward their shadow on press
- Sprite icons can bounce one frame on hover
- Reduced-motion users get static sprites and instant state changes

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #18181b;
  --color-text-muted: #52525b;
  --color-accent: #d61355;
  --color-accent-blue: #2563eb;
  --color-pixel-dark: #27272a;
  --color-border: #e4e4e7;
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-pixel: 4px 4px 0 #27272a;
  --shadow-soft: 0 2px 8px rgba(24,24,27,0.08);
  --shadow-soft-lg: 0 8px 24px rgba(24,24,27,0.12);
  --border-default: 1px solid #e4e4e7;
  --font-display: "Press Start 2P", "Courier New", monospace;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: Silkscreen, "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.5;
  --leading-body: 1.6;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P:wght@400&family=Inter:wght@400;500;700&family=Silkscreen:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar, hairline bottom border, pixel mascot logo at integer scale, modern Inter links; active link gets a small sprite marker
- **Hero:** Press Start 2P headline at modest size (32–40px) with Inter subcopy below, pixel CTA button, dithered fade on the background edge
- **Card:** White surface, 12px radius, soft shadow for standard cards; featured cards go sharp-cornered with 2px dark border and pixel shadow
- **Button (primary):** Accent fill, white Inter label, 0 radius, 2px dark border, pixel shadow, 2px press jump
- **Button (secondary):** White fill, dark border and label, same pixel anatomy
- **Form fields:** White fill, 1px hairline border, 6px radius, modern focus ring in accent-blue; intentionally unpixelated for usability

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A crisp modern card grid where each card carries exactly one pixel artifact — a sprite icon, a 4px stepped shadow, or a bitmap heading — against otherwise contemporary typography and spacing. Spend boldness here; keep everything else quiet.

## Do

- Keep the skeleton modern — grid, spacing, forms — and spend pixels only on accents
- Set bitmap headings smaller than you think (32–40px) with 1.5 line-height
- Scale all sprites at integer multiples with image-rendering: pixelated
- Let smooth easing and steps() coexist: modern shell, pixel garnish

## Don't

- Don't set body copy or forms in bitmap fonts — that's the full pixel-8bit skill, not this one
- No CRT scanlines or full dark-console theming; this style stays light and clean
- Don't scatter more than one pixel artifact per component
- Avoid non-integer sprite scaling — blurry pixels are worse than no pixels

## Accessibility notes

- Bitmap display faces have low legibility — reserve them for short headings 24px+ and ensure all body content uses the modern sans
- Accent pink-red (#d61355) passes 4.5:1 on white but verify any tint variations used on the blue accent for small text
- Sprite hover bounces and cursor trails must be disabled under prefers-reduced-motion

## Reference sites

- itch.io: https://itch.io
- Lexaloffle PICO-8: https://www.lexaloffle.com/pico-8.php
- Silkscreen specimen: https://fonts.google.com/specimen/Silkscreen

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip pixel-retro-modern.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/pixel-retro-modern.json

Settings → Capabilities → Skills → Upload skill → pixel-retro-modern.zip