# Bolt Design System

This document contains comprehensive design guidelines for creating beautiful, consistent, and production-ready user interfaces.

## Design Philosophy

Create interfaces that are:

- **Professional and Beautiful** - Clean, modern aesthetics with attention to detail
- **Production-Ready** - Fully featured and implementation-ready for real-world use
- **Unique** - Distinctive visual style that avoids generic or cookie-cutter designs
- **Consistent** - Cohesive visual language across all components and screens
- **Accessible** - Usable by everyone, regardless of abilities or circumstances

## Core Principles

### Human-Centered Design
- Intuitive interfaces that minimize cognitive load
- Progressive disclosure of complex functionality 
- Contextual assistance when and where needed
- Meaningful feedback throughout user journeys
- Focus on user goals rather than system capabilities

### Content-First Approach
- Content determines layout structure
- Strong information hierarchy guides attention
- Intentional whitespace improves readability
- Visual rhythm creates natural flow
- Respect natural reading patterns

## Visual Language

### Modern Minimalism
- Include only essential elements
- Use purposeful negative space
- Create focused interactions
- Apply deliberate contrast
- Maintain visual clarity

### Foundational Harmony
- Balance compositions with visual weight
- Establish rhythm through spacing and repetition
- Create proportional relationships between elements
- Align to grid for structural consistency
- Maintain spatial relationships across contexts

### Subtle Sophistication
- Add refined details that reward attention
- Implement elegant transitions between states
- Design thoughtful animations that guide users
- Polish micro-interactions for delight
- Ensure quality craftsmanship in every element

## Color System

### Primary Palette

- **Azure Blue** (#0066FF)
  - Primary actions and buttons
  - Key interactive elements
  - Focus states and selections
  - Brand identity elements
  - Progress indicators

- **Charcoal** (#242933)
  - Primary backgrounds (dark mode)
  - Container elements
  - Base typography in dark mode
  - UI frameworks and structure
  - Navigation elements

- **Platinum** (#F4F5F7)
  - Light backgrounds (light mode)
  - Content areas
  - Card elements
  - Form field backgrounds
  - Subtle dividers

... (remaining content omitted for brevity) ...

### Accessibility Guidelines
- Maintain minimum contrast ratios:
  - 4.5:1 for normal text
  - 3:1 for large text
  - 3:1 for UI components and graphics
  - 4.5:1 for focus indicators
  - 7:1 for enhanced accessibility
- Never use color alone to convey meaning
- Include additional indicators for important states
- Support system color schemes and high contrast modes
- Design for color blindness with multiple visual cues
- Test with accessibility tools during development

## Typography

... (remaining content omitted for brevity) ...