---
name: design-pixel-retro
description: >
  Pixel Art Retro design system — ChonkyPixels font, neon glow CTAs, pixel
  dot animations, and dark foundation theme. Use when building retro/pixel art
  UIs, foundation sites, when user says "pixel art", "retro design", "8-bit
  aesthetic", "neon glow buttons", "pixel font", or "retro foundation style".
metadata:
  author: dorian
  version: 1.0.0
  category: design-system
  tags: [pixel-art, retro, 8-bit, neon, dark-theme, foundation]
---

# Pixel Art Retro Design System

Extracted from Archipelago Foundation. Pixel-perfect aesthetics with modern
web technology, neon glow accents, and playful retro energy.

## Design Identity

**Name:** Pixel Art Retro
**Mood:** Playful retro, 8-bit nostalgia with modern polish
**Background:** Dark (#0A0A0A) with pixel texture overlays
**Accent:** Bitcoin orange (#F7931A) with radial neon glow

## Typography

```css
--font-pixel: 'ChonkyPixels', monospace; /* Display/headings — CRITICAL */
--font-body: 'Avenir Next', system-ui, sans-serif;
--font-mono: 'Courier New', monospace;
```

**Rule:** ChonkyPixels must be loaded with `font-synthesis: none` and
`!important` on headings to prevent browser synthesis of bold/italic.

## Color Palette

Same dark base as Glassmorphism, but with neon glow effects:
```css
--bg-primary: #0A0A0A;
--accent: #F7931A;
--accent-glow: radial-gradient(circle, rgba(247,147,26,0.4) 0%, transparent 70%);
--neon-green: #39ff14;
--neon-pink: #ff6ec7;
--neon-blue: #04d9ff;
```

## Key Components

### Neon Glow CTA
```css
.neon-cta {
  background: linear-gradient(135deg, #f7931a, #e68a00);
  border: 2px solid rgba(247, 147, 26, 0.5);
  border-radius: 4px; /* Sharp corners — pixel aesthetic */
  padding: 12px 32px;
  font-family: var(--font-pixel);
  text-transform: uppercase;
  position: relative;
}
.neon-cta::after {
  content: '';
  position: absolute;
  inset: -8px;
  background: var(--accent-glow);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.neon-cta:hover::after { opacity: 1; }
```

### Pixel Dot Animation
```css
@keyframes pixel-dot-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.pixel-dot { animation: pixel-dot-bounce 0.6s steps(2) infinite; }
```

### Intro Sequence
```css
.intro-container { animation: intro-container 0.6s ease-out; transform-origin: center; }
.intro-corners { animation: intro-corners 0.5s ease-out 0.35s both; }
.intro-logo { animation: fadeIn 0.5s ease-out 0.7s both; }

@keyframes intro-container { from { transform: scale(0.97); opacity: 0; } }
@keyframes intro-corners { from { transform: scale(0.8); opacity: 0; } }
```

## UI Approach

- Sharp corners (2-4px radius) — pixel aesthetic, not rounded
- Stepped animations (`steps(N)`) where possible for pixel feel
- Monospace alignment for data displays
- Donation modal: max-width 480px, QR code on white background
- Theme toggle: smooth dark/light with inverted logo filter

## Modular Architecture

- Pixel font loaded via `@font-face` with subset for performance
- Glow effects via CSS pseudo-elements (no extra DOM)
- Animation keyframes in global stylesheet
- Component-scoped overrides only