RESPONSIVE RULES

Mobile-first. Start with the smallest viewport and layer on complexity at larger breakpoints.

BREAKPOINTS

sm
640px
Large phones, small tablets
md
768px
Tablets
lg
1024px
Small laptops
xl
1280px
Desktops (max container)
2xl
1536px
Wide screens

DEVICE PREVIEW

MOBILE

320–639px

TABLET

640–1023px

DESKTOP

1024px+

SCALING RULES

TYPOGRAPHY

h1: 4xl → 3xl on mobile

h2: 2xl → xl on mobile

h3: xl → lg on mobile

Display: 5xl → 3xl on mobile

Body: no change

SPACING

Section: 64px → 96px

Card gap: 16px → 24px

Grid margin: 16px → 64px

TOUCH TARGETS

Minimum: 44 × 44px

Button height: min 44px on mobile

Link spacing: min 8px between

MOBILE OVERRIDES

Navigation

  • • Hamburger menu (3-line, 24px)
  • • Full-screen or slide-right panel
  • • Menu items: min 48px height, full-width

Forms

  • • All inputs full-width
  • • Labels above inputs (never beside)
  • • Submit button full-width at bottom

Tables

  • • Horizontal scroll with indicator
  • • Or reformat as stacked cards
  • • Never shrink below 14px

Modals

  • • Full-screen on mobile
  • • Bottom-sheet pattern preferred
  • • Standard centered on desktop