system-prompts-and-models-of-ai-tools/Bolt.new/Bolt-Design-System.txt

# 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

### Adaptive Consistency
- Platform-appropriate patterns for native feel
- Responsive adaptation across device sizes
- Context-aware behavior that anticipates needs
- Common interaction models for learnability
- Familiar conventions balanced with innovation

## 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

### Secondary Palette

- **Mint Green** (#00CC99)
  - Success states
  - Completion indicators
  - Positive metrics
  - Growth elements
  - Approval indicators

- **Coral** (#FF6B6B)
  - Error states
  - Alerts and warnings
  - Destructive actions
  - Critical information
  - Attention elements

- **Amber** (#FFAB49)
  - Warning states
  - Notification badges
  - Attention indicators
  - Pending status
  - Moderate alerts

- **Lavender** (#8B5CF6)
  - Accent elements
  - Premium features
  - Highlighted content
  - Special states
  - Interactive tutorials

### Neutral Shades

- **Dark**
  - #242933 (Darkest - text, backgrounds)
  - #373F4D (Dark - secondary UI)
  - #4A5468 (Medium-dark - borders)

- **Mid**
  - #6B7A99 (Primary mid-tone - secondary text)
  - #8A94A6 (Light mid-tone - disabled elements)
  - #B0B7C3 (Lightest mid-tone - subtle elements)

- **Light**
  - #D9E0E8 (Dark light - borders)
  - #E5E9F0 (Medium light - backgrounds)
  - #F4F5F7 (Lightest - page backgrounds)

### 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

### Font System

- **Primary Font: Inter**
  - UI elements
  - Content text
  - Navigation
  - Forms and inputs
  - Labels and buttons

- **Secondary Font: Roboto Mono**
  - Code examples
  - Technical data
  - Console output
  - Terminal commands
  - Numerical data and metrics

- **Display Font: Montserrat**
  - Headlines
  - Marketing elements
  - Feature introductions
  - Welcome screens
  - Statement elements

### Type Scale

#### Mobile
- Display: 32px/40px
- Heading 1: 24px/32px
- Heading 2: 20px/28px
- Heading 3: 18px/24px
- Subtitle: 16px/24px
- Body: 14px/20px
- Caption: 12px/16px
- Small: 10px/14px

#### Tablet
- Display: 40px/48px
- Heading 1: 32px/40px
- Heading 2: 24px/32px
- Heading 3: 20px/28px
- Subtitle: 18px/26px
- Body: 16px/24px
- Caption: 14px/20px
- Small: 12px/16px

#### Desktop
- Display: 48px/56px
- Heading 1: 40px/48px
- Heading 2: 32px/40px
- Heading 3: 24px/32px
- Subtitle: 20px/28px
- Body: 16px/24px
- Caption: 14px/20px
- Small: 12px/16px

### Text Styles

- **Weight Application**
  - Regular (400): Body text, captions
  - Medium (500): Subtitles, emphasis
  - Bold (700): Headlines, buttons
  - Extra Bold (800): Key features, CTAs
  - Light (300): Large display text

- **Line Height**
  - Headlines: 1.2 × font size
  - Body text: 1.5 × font size
  - Buttons: 1.25 × font size
  - Captions: 1.33 × font size
  - Code blocks: 1.6 × font size

## Component Design

### Interactive Elements

#### Buttons

- **Primary Button**
  - Background: Azure Blue (#0066FF)
  - Text: White
  - Border radius: 8px
  - Height: 44px (mobile), 48px (desktop)
  - Padding: 12px 20px
  - States: Hover/focus darkens by 10%

- **Secondary Button**
  - Background: Transparent
  - Text: Azure Blue (#0066FF)
  - Border: 1.5px Azure Blue
  - Border radius: 8px
  - Height: 44px (mobile), 48px (desktop)
  - States: Hover adds light background

- **Tertiary Button**
  - Background: Transparent
  - Text: Current text color
  - Underline on hover
  - Padding: 8px 12px
  - Height: 44px (mobile), 48px (desktop)
  - States: Hover adds underline

- **Danger Button**
  - Background: Coral (#FF6B6B)
  - Text: White
  - Border radius: 8px
  - Height: 44px (mobile), 48px (desktop)
  - States: Hover/focus darkens by 10%

- **Disabled Button**
  - Background: Mid Gray
  - Text: Dark Gray
  - Opacity: 60%
  - No hover effects
  - Cursor: not-allowed

#### Input Fields

- **Text Input**
  - Background: Light neutral
  - Border: 1px Mid neutral
  - Border radius: 8px
  - Height: 44px (mobile), 48px (desktop)
  - Inner padding: 12px 16px
  - Focus: Azure Blue border/ring

- **Dropdown**
  - Styling matches text input
  - Icon: Chevron down
  - Dropdown menu: Card styling
  - Option height: 44px
  - Option padding: 16px
  - Selected: Accent background

- **Checkbox**
  - Size: 20px × 20px
  - Border radius: 4px
  - Border: 1.5px Mid neutral
  - Checked: Azure Blue fill, white checkmark
  - Focus: 2px outline, 2px offset

- **Radio Button**
  - Size: 20px × 20px
  - Border radius: 50%
  - Border: 1.5px Mid neutral
  - Selected: 8px Azure Blue dot
  - Focus: 2px outline, 2px offset

- **Toggle**
  - Height: 24px
  - Width: 44px
  - Border radius: 12px
  - Thumb: 20px circle
  - Off state: Mid Gray
  - On state: Azure Blue

### Content Containers

#### Cards
- Background: White (light mode), Dark charcoal (dark mode)
- Border radius: 12px
- Shadow: 0 2px 8px rgba(0,0,0,0.1)
- Padding: 20px
- Dividers: 1px Light neutral
- Header: 16px bottom spacing
- Footer: 16px top spacing
- Interactions: Subtle hover effect

#### Lists
- Item height: 56px (with icon), 44px (text only)
- Padding: 16px horizontal
- Dividers: 1px Light neutral
- Selected: Light Azure background
- Hover: 5% darken/lighten
- Icon spacing: 16px from text

#### Tables
- Header: Medium weight, Light neutral background
- Rows: Alternating background optional
- Cell padding: 12px 16px
- Border: 1px Light neutral
- Hover: 5% darken/lighten
- Sorting indicators: 16px icons

#### Dialogs
- Background: White (light mode), Dark charcoal (dark mode)
- Border radius: 16px
- Shadow: 0 4px 24px rgba(0,0,0,0.15)
- Width: 90% (mobile), 480px (desktop)
- Title: 24px/32px
- Content padding: 24px
- Button container: 24px padding, top border

### Navigation Components

#### Tab Bar
- Height: 56px
- Icon size: 24px
- Label: 12px, Medium weight
- Active indicator: Accent color
- Background: White (light mode), Dark charcoal (dark mode)
- Shadow: 0 -2px 8px rgba(0,0,0,0.1)

#### Navigation Bar
- Height: 56px
- Title: 18px, Medium weight
- Back button: Chevron left + optional text
- Action buttons: 44px touch target
- Background: White (light mode), Dark charcoal (dark mode)
- Shadow: 0 2px 8px rgba(0,0,0,0.1)

#### Sidebar
- Width: 280px
- Item height: 44px
- Icon size: 20px
- Section headers: 14px, Medium weight
- Active indicator: 4px accent border
- Background: Light neutral (light mode), Dark charcoal (dark mode)

#### Bottom Sheet
- Border top-radius: 16px
- Handle indicator: 32px × 4px pill
- Maximum height: 90% of screen
- Drag threshold: 20% of height
- Background: White (light mode), Dark charcoal (dark mode)
- Shadow: 0 -4px 24px rgba(0,0,0,0.15)

## Layout Guidelines

### Spacing System
- Base Unit: 4px
- Spacing Scale:
  - 2xs: 4px (1× base)
  - xs: 8px (2× base)
  - sm: 12px (3× base)
  - md: 16px (4× base)
  - lg: 24px (6× base)
  - xl: 32px (8× base)
  - 2xl: 48px (12× base)
  - 3xl: 64px (16× base)
  - 4xl: 96px (24× base)

- Application:
  - Inline elements: xs (8px)
  - Related items: md (16px)
  - Component groups: lg (24px)
  - Section separation: xl-2xl (32-48px)
  - Page margins: lg-xl (24-32px)

### Grid System
- **Mobile (320-599px)**
  - Columns: 4
  - Margin: 16px
  - Gutter: 16px
  - Column width: Fluid

- **Tablet (600-1023px)**
  - Columns: 8
  - Margin: 32px
  - Gutter: 24px
  - Column width: Fluid

- **Desktop (1024px+)**
  - Columns: 12
  - Margin: 32px
  - Gutter: 32px
  - Column width: Fluid
  - Max width: 1440px

- Common layouts:
  - Full-width: 4/4, 8/8, or 12/12 columns
  - Content area: 4/4, 6/8, or 8/12 columns
  - Half-width: 2/4, 4/8, or 6/12 columns
  - Third-width: n/a, n/a, or 4/12 columns

### Responsive Patterns

#### Stacking
- Desktop: Side-by-side elements
- Mobile: Vertical stacking
- Preserve primary content first
- Maintain spacing proportions
- Reconsider element hierarchy for smaller screens

#### Column Reduction
- Desktop: Multi-column layout
- Mobile: Fewer columns
- Reflow content to maintain relationships
- Preserve content priority
- Adjust spacing proportionally

#### Container Adaptation
- Desktop: Fixed-width containers
- Mobile: Fluid-width containers
- Maintain relative proportions
- Adjust padding for smaller screens
- Optimize touch targets for mobile

#### UI Transformation
- Desktop: Extended navigation
- Mobile: Condensed navigation
- Reposition actions for thumb reach
- Prioritize content on small screens
- Hide secondary information until needed

## Iconography

### Icon System
- **Icon Library: Lucide**
  - Stroke-based icons
  - 24×24px default size
  - 2px stroke width
  - Rounded line caps
  - Consistent padding

- **Size Framework**
  - Small: 16px (touch targets: 32px)
  - Medium: 24px (touch targets: 44px)
  - Large: 32px (touch targets: 56px)
  - Feature: 48px (touch targets: 64px)

- **Alignment**
  - Center in touch target
  - Align with text baseline when inline
  - Use with consistent margins
  - Balance visual weight
  - Ensure proper spacing

### Interactive States
- **Default**
  - Color: Current text color
  - Background: Transparent
  - Opacity: 100%
  - No decorations
  - Normal scale

- **Hover**
  - Color: Current text color
  - Background: 5% fill
  - Opacity: 100%
  - No decorations
  - Normal scale

- **Active**
  - Color: Current text color
  - Background: 10% fill
  - Opacity: 100%
  - No decorations
  - 98% scale (slight press effect)

- **Disabled**
  - Color: Current text color
  - Background: Transparent
  - Opacity: 40%
  - No decorations
  - Normal scale

- **Selected**
  - Color: Accent color
  - Background: Transparent
  - Opacity: 100%
  - No decorations
  - Normal scale

## Motion Design

### Animation Principles
- **Purposeful**
  - Always serves user goals
  - Communicates state changes
  - Provides clear feedback
  - Guides attention
  - Establishes relationships

- **Efficient**
  - Quick and responsive
  - No unnecessary delays
  - Complements interaction
  - Minimizes distraction
  - Enhances productivity

- **Cohesive**
  - Consistent timing
  - Unified easing
  - Thematic relations
  - Predictable behaviors
  - Systematic application

### Timing System
- **Duration Scale**
  - Extra fast: 100ms
  - Fast: 200ms
  - Normal: 300ms
  - Slow: 400ms
  - Extra slow: 500ms

- **Usage Guidelines**
  - Interface feedback: Extra fast
  - Micro-interactions: Fast
  - Component transitions: Normal
  - View transitions: Slow
  - Onboarding animations: Extra slow

- **Easing Curves**
  - Standard: cubic-bezier(0.2, 0.0, 0.2, 1.0)
  - Accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0)
  - Decelerate: cubic-bezier(0.0, 0.0, 0.2, 1.0)
  - Sharp: cubic-bezier(0.4, 0.0, 0.6, 1.0)
  - Bounce: spring(mass: 1, stiffness: 80, damping: 10)

### Animation Patterns

#### Transitions
- **Fade**
  - Opacity: 0 → 1
  - Duration: Fast (200ms)
  - Easing: Standard
  - Usage: Element appearance/disappearance
  - Implementation: CSS transitions or animation libraries

- **Slide**
  - Transform: translateY/X
  - Duration: Normal (300ms)
  - Easing: Decelerate
  - Usage: Lists, panels, sheets
  - Implementation: CSS transitions or animation libraries

- **Scale**
  - Transform: scale
  - Duration: Fast (200ms)
  - Easing: Standard
  - Usage: Buttons, interactive elements
  - Implementation: CSS transitions or animation libraries

- **Crossfade**
  - Combined opacity transitions
  - Duration: Normal (300ms)
  - Easing: Standard
  - Usage: Content replacement
  - Implementation: CSS transitions or animation libraries

#### Micro-interactions
- **Button Press**
  - Scale: 1.0 → 0.98 → 1.0
  - Duration: Extra fast (100ms)
  - Easing: Sharp
  - Usage: All buttons
  - Implementation: CSS or JS animation

- **Toggle Switch**
  - Thumb translation + background color
  - Duration: Fast (200ms)
  - Easing: Standard
  - Usage: Boolean settings
  - Implementation: CSS transitions

- **Input Focus**
  - Border/shadow transition
  - Duration: Fast (200ms)
  - Easing: Decelerate
  - Usage: Form fields
  - Implementation: CSS transitions

## Mobile-Specific Guidelines

### Touch Interaction
- **Minimum Target Size**
  - Primary targets: 48px
  - Secondary targets: 44px
  - Minimum spacing: 8px
  - Hit slop extension: 8-12px
  - Form controls: 44px height

- **Touch Feedback**
  - Visual: Opacity/scale change
  - Haptic: Light impact (iOS)
  - Audio: None by default
  - Duration: 100ms maximum
  - Consistency across similar elements

### Gesture Patterns

#### Common Gestures
- **Tap**
  - Action: Select, activate
  - Feedback: Visual highlight
  - Duration: Instant
  - Components: Buttons, list items
  - Implementation: TouchableOpacity, Pressable

- **Long Press**
  - Action: Context menu, selection mode
  - Feedback: Visual + haptic
  - Duration: 500ms
  - Components: List items, cards
  - Implementation: Custom gesture handlers

- **Swipe**
  - Action: Dismiss, reveal actions
  - Feedback: Content follows finger
  - Threshold: 30% of width
  - Components: List items, cards
  - Implementation: Custom gesture handlers

- **Drag**
  - Action: Reorder, resize
  - Feedback: Element follows finger
  - Constraint: Within container
  - Components: List items, sliders
  - Implementation: Custom gesture handlers

- **Pinch**
  - Action: Zoom, scale
  - Feedback: Content scales with fingers
  - Limits: Min/max scale (0.5-3.0)
  - Components: Images, maps
  - Implementation: Custom gesture handlers

#### Custom Patterns
- **Pull to Refresh**
  - Activation threshold: 25% of header height
  - Visual indicator: Spinner, custom animation
  - Haptic: Success (iOS)
  - Components: Lists, content screens
  - Implementation: RefreshControl

- **Swipe to Delete**
  - Reveal threshold: 30% of width
  - Confirm threshold: 60% of width
  - Visual cue: Red background, delete icon
  - Haptic: None until commit
  - Implementation: Custom swipeable component

### Platform Adaptations
- **iOS Specifics**
  - Navigation: Back swipe gesture
  - Tab bar: Bottom placement
  - Action sheets: Slide up
  - Typography: San Francisco
  - Components: Follow iOS design patterns

- **Android Specifics**
  - Navigation: Hardware back support
  - Tab bar: Material design patterns
  - Dialogs: Material design
  - Typography: Roboto
  - Components: Follow Material design patterns

- **Web Specifics**
  - Navigation: Browser history integration
  - Input: Keyboard navigation support
  - Hover states: Implemented
  - Typography: System fonts
  - Components: Web-appropriate patterns

## Accessibility Guidelines

### Visual Accessibility
- **Color Contrast**
  - Text: 4.5:1 against background
  - Large text: 3:1 against background
  - UI components: 3:1 against adjacent colors
  - Focus indicators: 3:1 against background
  - Icons: 3:1 against background

- **Text Sizing**
  - Support dynamic type (iOS)
  - Support font scaling (Android)
  - Minimum 14sp base size
  - Test with larger text settings
  - Maintain layout with larger text

- **Focus States**
  - Visible focus indicators
  - High contrast focus styles
  - Logical focus order
  - Keyboard navigation support
  - Touch target highlighting

### Screen Reader Support
- **Labeling**
  - Meaningful accessibilityLabel
  - Descriptive accessibilityHint
  - Appropriate accessibilityRole
  - Group related elements
  - Context-aware descriptions

- **Interactive Elements**
  - Clear touch targets
  - Appropriate accessibilityTraits
  - State descriptions (selected, disabled)
  - Error messaging
  - Success confirmation

- **Navigation**
  - Logical reading order
  - Screen reader focus control
  - Landmark regions
  - Skip navigation options
  - Consistent patterns

### Inclusive Design
- **Multiple Interaction Methods**
  - Touch support
  - Keyboard navigation
  - Voice control compatibility
  - Switch control support
  - Gesture alternatives

- **Reduced Motion**
  - Respect prefers-reduced-motion
  - Essential animation only
  - No auto-playing content
  - Static alternatives
  - No parallax effects

- **Cognitive Considerations**
  - Clear, simple language
  - Consistent patterns
  - Error prevention
  - Undo capability
  - Progress indicators

## Implementation Patterns

### Web Applications
- Use semantic HTML elements for proper structure
- Implement responsive breakpoints based on layout guidelines
- Apply fluid typography and spacing
- Use CSS variables for theming and consistency
- Implement keyboard navigation and focus management

### React/React Native
- Structure components following atomic design
- Use styled components or stylesheet patterns consistently
- Implement motion with appropriate libraries (Framer Motion, Reanimated)
- Handle platform-specific adaptation with custom hooks
- Build accessible components with proper ARIA roles

### Mobile Native
- Implement platform-specific UI adaptations
- Use native navigation patterns
- Handle gestures with appropriate libraries
- Optimize for touch interaction
- Implement proper permission handling

## Image Guidelines

### Photography
- Use high-quality, professionally shot images
- Maintain consistent style across all imagery
- Prefer images with natural lighting
- Avoid overly staged or artificial-looking photos
- Use diverse and inclusive representation

### Illustrations
- Maintain consistent style with brand identity
- Use illustrations to simplify complex concepts
- Scale appropriately across device sizes
- Ensure accessibility with proper alt text
- Consider animation for key illustrations

### Icons
- Use consistent icon set (Lucide)
- Maintain uniform weight and style
- Size appropriately for context
- Provide text labels where possible
- Ensure sufficient contrast

## Branding Integration

### Logo Usage
- Maintain clear space around logo
- Use appropriate size for context
- Avoid stretching or distorting
- Use approved color variations
- Apply consistently across platforms

### Brand Colors
- Use primary brand colors for key elements
- Apply secondary palette for supporting elements
- Maintain consistent color application
- Follow accessibility guidelines
- Consider color meaning and psychology

### Voice and Tone
- Professional but approachable
- Clear and concise
- Consistent terminology
- Inclusive and respectful language
- Helpful and solution-oriented

## Implementation Examples

### Component Examples

```jsx
// Button Component
const Button = ({ 
  children, 
  variant = "primary", 
  size = "medium",
  disabled = false,
  ...props 
}) => {
  return (
    <button 
      className={`button ${variant} ${size} ${disabled ? 'disabled' : ''}`}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  );
};

// Card Component
const Card = ({ children, padding = true }) => {
  return (
    <div className={`card ${padding ? 'card-padded' : ''}`}>
      {children}
    </div>
  );
};
```

### Style Implementation

```css
:root {
  /* Color variables */
  --color-primary: #0066FF;
  --color-secondary: #6B7A99;
  --color-success: #00CC99;
  --color-warning: #FFAB49;
  --color-danger: #FF6B6B;
  --color-accent: #8B5CF6;
  
  /* Dark neutrals */
  --color-dark-1: #242933;
  --color-dark-2: #373F4D;
  --color-dark-3: #4A5468;
  
  /* Mid neutrals */
  --color-mid-1: #6B7A99;
  --color-mid-2: #8A94A6;
  --color-mid-3: #B0B7C3;
  
  /* Light neutrals */
  --color-light-1: #D9E0E8;
  --color-light-2: #E5E9F0;
  --color-light-3: #F4F5F7;
  
  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  
  /* Font families */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Roboto Mono', monospace;
  --font-display: 'Montserrat', sans-serif;
  
  /* Font sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;
}

/* Button styles */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: var(--font-primary);
  font-weight: 500;
  transition: all 0.2s ease;
}

.button.primary {
  background-color: var(--color-primary);
  color: white;
}

.button.primary:hover {
  background-color: #0052CC;
}

/* Card styles */
.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card.card-padded {
  padding: 20px;
}
```

## Platform-Specific Guidelines

### Web Applications
- Test across modern browsers
- Implement responsive breakpoints
- Support keyboard navigation
- Optimize for various screen sizes
- Consider print stylesheets for relevant content

### iOS Applications
- Follow Apple Human Interface Guidelines
- Use native components when possible
- Support Dynamic Type
- Implement proper safe area handling
- Test on multiple iOS devices

### Android Applications
- Follow Material Design guidelines
- Support different screen sizes and densities
- Implement proper permission handling
- Test on various Android versions
- Consider manufacturer customizations

### Cross-Platform Applications
- Maintain consistent branding
- Adapt UI for platform conventions
- Optimize performance for each platform
- Use platform-specific features when appropriate
- Test thoroughly on all target platforms

## Quality Assurance

### Design QA Checklist
- Typography follows type scale
- Colors match defined palette
- Spacing adheres to spacing scale
- Components use defined patterns
- Icons follow icon system
- Interactive states are properly defined
- Animation follows motion guidelines
- Layout responds appropriately
- Accessibility requirements met
- Platform adaptations implemented

### Implementation QA Checklist
- Visual fidelity matches design
- Responsive behavior works correctly
- Interactions function as expected
- Animations are smooth and purposeful
- Accessibility features implemented
- Edge cases handled gracefully
- Performance meets targets
- Cross-browser/device compatibility
- Error states display correctly
- Focus management functions properly

## Best Practices

1. Start with content and user needs
2. Design for flexibility across screen sizes
3. Consider all interactive states
4. Test with actual users when possible
5. Document patterns for consistency
6. Build components for reusability
7. Consider localization and internationalization
8. Optimize performance from the start
9. Design with accessibility in mind
10. Regularly review and refine the system