Breakpoints
Atelier uses a mobile-first responsive strategy. Components are built to render correctly at any viewport; breakpoints are where layout compositions shift, not where components break.
The scale
sm
min-width: 640px
Large phones, compact tablets in portrait
md
min-width: 768px
Tablets, small laptops
lg
min-width: 1024px
Laptops, desktops
xl
min-width: 1280px
Wide desktops
2xl
min-width: 1536px
Large desktop monitors
Philosophy
Components do not watch breakpoints. They express themselves in intrinsic units (em, rem, ch) and container queries when supported, so a component behaves correctly regardless of whether the surrounding page is wide or narrow.
Breakpoints govern composition — when a two-column layout becomes stacked, when a sidebar becomes a drawer, when a table becomes a card list. A Dialog or a Button looks and behaves the same on every device.