HomeOverviewFoundationsComponentsGuidelinesPatterns

Responsive Design

Mobile-first approach for all screen sizes

Mobile-First Philosophy

MUZISYSTEM follows a mobile-first approach. We design for small screens first, then progressively enhance the experience for larger screens. This ensures optimal performance and usability across all devices.

Breakpoints

Consistent breakpoints across the design system

📱 Mobile

0px - 639px

Base styles, single column layouts, touch-optimized interactions

📱 Tablet

640px - 1023px

Two-column layouts, larger touch targets, optimized for portrait/landscape

💻 Desktop

1024px - 1279px

Multi-column layouts, hover states, keyboard shortcuts

🖥️ Large Desktop

1280px+

Wide layouts, max-width containers, enhanced spacing

Grid System

Flexible grid for responsive layouts

CSS Grid Classes

  • .grid-2 - 2 columns on desktop, 1 on mobile
  • .grid-3 - 3 columns on desktop, 1 on mobile
  • .grid-4 - 4 columns on desktop, 2 on tablet, 1 on mobile

Container

The .container class provides consistent max-width and padding:

  • Mobile: 100% width with 16px padding
  • Tablet: 100% width with 24px padding
  • Desktop: max-width 1280px with 32px padding

Touch Targets

Minimum sizes for interactive elements

Buttons

Minimum 44x44px touch target

  • Small: 44px height
  • Medium: 48px height
  • Large: 56px height

Form Inputs

Minimum 48px height on mobile

  • Text inputs: 48px
  • Checkboxes: 24x24px
  • Radio buttons: 24x24px

Links

Adequate spacing between links

  • Minimum 8px vertical spacing
  • Underline on hover/focus
  • Clear visual distinction

Typography Scaling

Responsive font sizes for optimal readability

Fluid Typography

Font sizes scale smoothly between breakpoints using CSS clamp():

  • Display - 48px mobile → 72px desktop
  • H1 - 32px mobile → 48px desktop
  • H2 - 24px mobile → 36px desktop
  • Body - 16px (consistent across devices)
  • Small - 14px (consistent across devices)

Line Height

  • Headings: 1.2 - 1.3
  • Body text: 1.5 - 1.6
  • Small text: 1.4

Images & Media

Responsive images and video

Best Practices

  • Responsive images - Use srcset and sizes attributes
  • Lazy loading - Load images as they enter viewport
  • WebP format - Modern format with fallbacks
  • Aspect ratio - Reserve space to prevent layout shift
  • Alt text - Descriptive alternative text for accessibility

Video

  • Responsive container with aspect ratio
  • Autoplay only when muted
  • Provide controls and captions
  • Optimize for mobile bandwidth

Testing Checklist

Ensure responsive design works across devices

Devices to Test

  • ✅ iPhone SE (375px)
  • ✅ iPhone 14 Pro (393px)
  • ✅ iPad (768px)
  • ✅ iPad Pro (1024px)
  • ✅ Desktop 1280px
  • ✅ Desktop 1920px

Orientations

  • ✅ Portrait mode
  • ✅ Landscape mode

Browser Testing

  • ✅ Chrome DevTools responsive mode
  • ✅ Safari on iOS
  • ✅ Chrome on Android
  • ✅ Firefox responsive design mode