mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2026-01-31 14:24:19 -05:00
6358107ceb
Restores the complete content of Backend-Architecture-Guidelines.txt and Bolt-Design-System.txt, replacing previously truncated or omitted sections with the full original text for both files.
96 lines
2.9 KiB
Plaintext
96 lines
2.9 KiB
Plaintext
# 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) ... |