retro-css-architecture

```

CSS Organization

Keep retro-specific styles in components/ui/8bit/styles/retro.css:

```css

/ Import pixel font /

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/ Font class /

.retro {

font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;

line-height: 1.5;

letter-spacing: 0.5px;

}

/ Image handling /

.pixelated {

image-rendering: pixelated;

image-rendering: crisp-edges;

}

```

Component-Level CSS

Use Tailwind utilities for component-specific styling:

```tsx

className={cn(

"relative border-y-6 border-foreground dark:border-ring",

"rounded-none active:translate-y-1 transition-transform",

className

)}

/>

```

Key Principles

1. Import retro.css - Required for all 8-bit components
2. Pixel font - Use "Press Start 2P" for authentic look
3. Pixelated images - Apply image-rendering: pixelated to sprites
4. Consistent sizing - Use fixed pixel values (1.5, 3, 6px)
5. Dark mode - Use semantic colors with dark: prefix
6. rounded-none - Remove all border radius for retro feel
7. Tailwind first - Use utilities before custom CSS

Reference Files

• components/ui/8bit/styles/retro.css - Global retro styles
• components/ui/8bit/button.tsx - CSS class usage example