Breakpoint Tokens
Responsive breakpoint system for adaptive layouts, based on patterns implemented in components and responsive design best practices.
| Breakpoint | Range | Characteristics | Layout Strategy |
|---|---|---|---|
| xs | 0px - 479px Extra small devices - phones | Single columnTouch-firstMinimal content | Stack all elements vertically Compact spacing, larger touch targets |
| sm | 480px - 767px Small devices - large phones, small tablets | 1-2 columnsTouch + hoverEssential content | Simple grid layouts, basic multi-column Medium spacing, balanced touch targets |
| md | 768px - 1023px Medium devices - tablets, small laptops | 2-3 columnsHover interactionsMore content | Multi-column grids, sidebar layouts Standard spacing, hover-friendly sizing |
| lg | 1024px - 1279px Large devices - desktops, large laptops | 3-4 columnsFull interactionsRich content | Complex grids, full sidebar, detailed layouts Comfortable spacing, full feature set |
| xl | 1280px - 1535px Extra large devices - large desktops | 4+ columnsAdvanced featuresMaximum content | Wide layouts, multiple sidebars, dashboard views Generous spacing, optimal desktop experience |
| 2xl | 1536px Extra extra large devices - wide monitors | Wide layoutsMaximum featuresFull content | Ultra-wide layouts, constrained max-width Max spacing, centered content containers |
Responsive Design Philosophy
Mobile First
- • Start with mobile design
- • Progressive enhancement
- • Touch-first interactions
Content Priority
- • Essential content first
- • Progressive disclosure
- • Context-aware features
Performance
- • Optimize for mobile
- • Lazy load enhancements
- • Efficient asset loading