aiuicode

# aiuicode Design System

## Visual Theme & Atmosphere
Dark, technical, developer-focused. The void-black canvas (#050505) creates immersion, while purple gradients (#8B5CF6 → #A855F7) provide energetic accents. A fusion of Vercel's monochrome precision and Linear's purple sophistication. The design whispers "this tool is for serious builders."

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #8B5CF6 | Brand, CTAs, highlights, purple-500 |
| Secondary | #A855F7 | Gradients, hover states, purple-600 |
| Accent | #6366F1 | Indigo accent, links, indigo-500 |
| Background | #050505 | Main canvas (void black) |
| Surface | #0A0A0A | Cards, panels, elevated surfaces |
| Text | #FFFFFF | Primary text, headings |
| Muted | #A1A1AA | Secondary text, descriptions, zinc-400 |
| Border | #27272A | Subtle dividers, zinc-800 |

## Typography Rules
- **Heading Font**: Inter, system-ui, sans-serif
- **Body Font**: Inter, system-ui, sans-serif
- **Mono Font**: JetBrains Mono, monospace (for code)
- **Base Size**: 16px
- **H1**: 3.5rem / weight 700 / line-height 1.1 / letter-spacing -0.02em
- **H2**: 2.25rem / weight 700 / line-height 1.2
- **H3**: 1.5rem / weight 600 / line-height 1.3
- **H4**: 1.25rem / weight 600 / line-height 1.4
- **Body**: 1rem / weight 400 / line-height 1.6
- **Small**: 0.875rem / weight 400 / line-height 1.5

## Component Stylings
- **Buttons**: 
  - Primary: Purple-500 bg (#8B5CF6), white text, rounded-lg (8px), px-6 py-2.5
  - Ghost: Transparent, border zinc-700, hover:bg-zinc-800
  - Text: Purple-400 text, hover:text-purple-300
- **Cards**: Surface bg (#0A0A0A), border zinc-800, rounded-xl (12px), hover:border-zinc-700
- **Inputs**: Surface bg, border zinc-800, rounded-xl (12px), h-14, focus:ring-purple-500/30
- **Badges**: Pill-shaped, bg-purple-500/10, text-purple-400, border-purple-500/20
- **Navigation**: Sticky top-0, backdrop-blur-xl, bg-[#050505]/80, border-b border-zinc-800/50

## Layout Principles
- Max content width: 1280px (max-w-7xl)
- Grid: 4-column card grid on desktop, 2 on tablet, 1 on mobile
- Spacing: 16px base unit, 32px section padding
- Hero: Centered text, gradient glow background (radial purple blur)
- Responsive breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px)

## Depth & Elevation
- Level 0: Background, no shadow
- Level 1: Cards, subtle border elevation
- Level 2: Hover states, purple glow shadow (shadow-purple-500/5)
- Level 3: Modals, dropdowns, higher contrast borders

## Responsive Behavior
- Mobile-first: Stack layouts vertically
- Cards: 1 → 2 → 3 → 4 columns
- Typography: Slight scale reduction on mobile
- Navigation: Horizontal on desktop, hamburger on mobile
- Touch targets: Minimum 44px

## Special Effects
- Hero background: Radial gradient ellipse at 50% -20%, purple/15 opacity
- Glow effect: 800px × 500px purple-500/10 blur-[120px] behind hero
- Card hover: Subtle purple shadow + border lighten
- Grid background: Optional CSS grid pattern with zinc-900 lines