Design System

Mobile-first component library with accessible touch targets

Responsive Breakpoints

📱 Mobile (< 640px)

Navigation

Mobile (< 768px):

Bottom navigation bar with thumb-accessible buttons. Check the bottom of your screen on mobile.

Desktop (>= 768px):

Left sidebar navigation. Check the left side of your screen on desktop.

Buttons

Primary Buttons

Secondary Buttons

Outline Buttons

Ghost Buttons

Cards

Card Title 1

This is a card component with responsive grid layout. It adapts from 1 column on mobile to 3 columns on large screens.

Card Title 2

All cards maintain consistent spacing and styling across breakpoints.

Card Title 3

Cards use mobile-first design principles with proper touch targets.

Touch Target Size (44x44px Minimum)

All interactive elements meet WCAG 2.1 Level AAA touch target size requirements (44x44px minimum).

Blue dashed outline shows the actual touch target area

Responsive Grid Layouts

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Viewport Width Test

Resize your browser or test on devices from 320px to 430px width. There should be no horizontal overflow.

The gradient above should never cause horizontal scrolling