Merge b26aff9dbe into f4d989a75a

Bolt.new/Bolt-Design-System.txt

@@ -0,0 +1,96 @@
+# 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) ...