retro-css-architecture

name	retro-css-architecture
description	Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.

Retro CSS Architecture

Organize CSS for 8-bit components using custom properties, pixel fonts, and responsive patterns.

Required Import

All 8-bit components must import the retro stylesheet:

import "@/components/ui/8bit/styles/retro.css";

Pixel Font

Use "Press Start 2P" for authentic 8-bit typography:

.retro {
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

Apply via class or font variant:

<Button className="retro">START GAME</Button>

// or via font prop
<Button font="retro">START GAME</Button>

Pixelated Images

For sharp pixel art images:

.pixelated {
  : pixelated;
  : crisp-edges;
}