7onicDESIGN SYSTEM

Breakpoints

A mobile-first breakpoint system — responsive layouts that adapt to any screen size.

Breakpoint Scale

5 breakpoints covering virtually all devices

default0px
Mobile (portrait)4 col
sm:640px
Small tablets, large smartphones (landscape)4 col
md:768px
Tablets (portrait)8 col
lg:1024px
Tablets (landscape), small laptops12 col
xl:1280px
Desktops, laptops12 col
2xl:1536px
Large desktop monitors12 col

Grid System

Recommended grid column counts per breakpoint

default

4col

md: 768px

8col

lg: 1024px

12col

Common layout patterns

Sidebar + Main
lg+
2
10
3
9
Sidebar (2 or 3)
Main (10 or 9)
3-column card
md+
md:grid-cols-3
default:grid-cols-1
4-column grid
lg+
lg:grid-cols-4
md:grid-cols-2
Responsive change example
default1 col
md:2 col
lg:3 col

Device Reference

Screen widths and corresponding breakpoints for each device

Mobile

default

iPhone SE375px
iPhone 14390px
iPhone 14 Plus428px

Tablet

md: 768px〜

iPad Mini744px
iPad810px
iPad Pro 11"834px

Desktop

lg: 1024px〜

MacBook Air1280px
MacBook Pro 14"1512px
iMac 24"1920px

Screen width comparison

Breakpoint boundaries shown as dashed lines

iPhone SE
375pxxs
iPhone 14
390pxxs
iPhone 14 Plus
428pxxs
iPad Mini
744pxsm
iPad
810pxsm
iPad Pro 11"
834pxsm
MacBook Air
1280pxsm
MacBook Pro 14"
1512pxsm
iMac 24"
1920pxsm

Design Principles

Mobile First

Start from the smallest screen size and progressively enhance for larger screens.

Content First

Choose breakpoints based on your content — not device categories.

2fr
3fr
2fr

Fluid Grid

Use relative units instead of fixed widths for smooth adaptation.

Test-Focused

Test on real devices to verify behavior at breakpoint boundaries.

Interactive Preview

Drag the slider to change screen width and experience breakpoint transitions

1024px
lg
Grid:4col
Nav:inline
Layout:row