Small Screen-first
The Standard Life digital estate includes various platforms with different breakpoints. Customers must receive the best possible experience across all platforms and viewports.
Working in a smaller viewport delivers the most critical user journeys first, then scales up to support additional content as viewport space allows.
Compound component libraries use the standard breakpoints below. While values may vary, use this information as a guide for similar platforms.
Breakpoints
Compound Web
Compound Web component library uses these breakpoint values.
|
Min width |
Max width |
Name |
Example devices |
|---|---|---|---|
|
0 |
575 |
Small (S) |
iPhone SE, iPhone 8, iPhone 13, 12 Pro Max, Google Pixel, Galaxy Note |
|
576 |
1023 |
Medium (M) |
Kindle Fire |
|
1024 |
1279 |
Large (L) |
iPads Landscape/Small Desktop |
|
1280 |
and above |
Extra Large (XL) |
HD Laptops, iPad Pro 12”, 13” Macbook Pro |
Figma frame sizes
Recommended frame size for working with the web component library
|
Breakpoint size |
Figma frame size (px) |
|---|---|
|
Small (S) |
375 |
|
Medium (M) |
768 |
|
Large (L) |
1024 |
|
Extra Large (XL) |
1440 |
Compound React Native
Compound React Native component library uses these breakpoint values. These values follow Tailwind 3.4 default breakpoints.
|
Min width |
Max width |
Name |
Example devices |
|---|---|---|---|
|
0 |
640 |
Default |
iPhone SE, iPhone 8, iPhone 13, 12 Pro Max, Google Pixel, Galaxy Note |
|
641 |
767 |
Small (SM) |
Kindle Fire |
|
768 |
1023 |
Medium (MD) |
iPads Landscape/Small Desktop |
|
1024 |
1279 |
Large (LG) |
HD Laptops, iPad Pro 12”, 13” Macbook Pro |
|
1280 |
1536 |
Extra Large (XL) |
Larger Desktop and iPad Pros |
|
1537 |
and above |
2x Extra Large (2XL) |
Large Desktop Monitors |
Figma frame sizes
Recommended starting frame sizes for React Native component library.
|
Breakpoint size |
Figma frame size (px) |
|---|---|
|
Default / Small (SM) |
375 |
|
Medium (MD) |
768 |
|
Large (LG) |
1024 |
|
Extra Large (XL) |
1440 |
Resources
- Responsive testing tool - Test live sites in various breakpoints
- Figma grid visualiser - Converts Figma grids to frames to overlay mockups
- Figma responsive plugin - Preview designs in Figma at different sizes
- iOS resolution - iOS device screen sizes
- Screensiz.es - Directory of screen sizes by device
- 8-Point Grid: Vertical Rhythm – A good article on vertical rhythm
- Gestalt principles - A quick summary of the main Gestalt principles