# Retrodiffusion AI — Design Language

## 1. Visual Theme & Atmosphere
Retrodiffusion is an AI image generation tool that deliberately invokes pixel-art and retro computing aesthetics while remaining usable and modern. The palette is pure hacker-mode dark: black backgrounds, white text at 87% opacity (slightly softened), electric lime-green for highlights, and vibrant purple for interactive elements. The 2px border radius — almost square — and the name itself signal the retro affiliation. This is nostalgia weaponised as brand identity.

## 2. Color Palette & Roles
- **Background** — `#000000` (pure black): primary surface
- **Primary text** — `rgba(255, 255, 255, 0.87)` (87% white): softened to reduce harshness
- **Highlight** — `#c4f128` / `rgb(196, 241, 40)` (electric lime-green): accent for heading emphasis
- **Interactive / links / brand** — `#8237ff` / `rgb(130, 55, 255)` (vivid purple): buttons, links, CTAs
- **Secondary surface** — `#2b2b2b`: card and module backgrounds
- **Detail background** — `#151515`: slightly raised surface above pure black
- **Secondary highlight** — `#ee97e3` (soft pink-purple): secondary accents
- **Borders** — `rgb(85, 85, 85)`: subtle dividers on dark

## 3. Typography Rules
- **Inter** (weights 400–700): the pragmatic foundation
- Heading scale: 18–36px — contained, not cinematic; readability over drama
- H3 renders in lime-green — colour serves as heading emphasis instead of size
- Weight 700 for primary headings, 600 for subheadings, 400 for body
- `−0.9px` letter-spacing on headings — slight compression
- Body at 17–18px for comfortable dark-mode reading

## 4. Component Stylings
- **2px radius** (near-square) for buttons and small components — the retro pixel aesthetic
- **8px radius** for cards and larger panels — slightly more approachable
- No shadows — flat, terminal-like rendering
- Buttons: purple fill with white text for primary; black fill with white text for secondary
- Section padding: 64px vertical — generous breathing room despite compact visual style

## 5. Layout Principles
- Full-width sections with 64px vertical padding, 80px bottom margins
- Dark surfaces create clear visual chapters without borders
- Left-aligned content typical for technical/tool aesthetics
- Sparse use of imagery — the tool's output (generated images) is the primary visual

## 6. Depth & Elevation
- No shadows — flat hierarchy
- Depth through surface layering: pure black → `#151515` → `#2b2b2b` → components
- Three background levels create a contained depth vocabulary without shadow

## 7. Do's and Don'ts
**Do:** Use lime-green (`#c4f128`) exclusively for heading accent text — not for backgrounds.
**Do:** Reserve purple (`#8237ff`) for all interactive affordances (buttons, links).
**Do:** Keep border radii at 2px for buttons/tags; 8px for cards — never exceed 8px.
**Don't:** Use shadows — they break the flat terminal aesthetic.
**Don't:** Let text opacity reach 100% white — maintain the 87% softness.
**Don't:** Use warm colours — this palette is entirely cool (purple, green, grey).

## 8. Responsive Behavior
- Sections with 64px padding reduce to ~32px on mobile
- Column layouts stack to single column
- Navigation bar fixed at defined height (`--header-height: 42px`)
- Font sizes relatively stable — retro aesthetic does not require dramatic scaling

## 9. Agent Prompt Guide
> Design like Retrodiffusion: pure black background, 87% white text, electric lime (`#c4f128`) for H3/accent, vivid purple (`#8237ff`) for all interactive. Inter 400–700. 2px radius on buttons (retro/square), 8px on cards. Flat — no shadows. Three dark surface layers for depth. Hacker-retro-AI aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*