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