---
title: "Breakpoints"
description: "Breakpoint names, modifiers, min widths, design widths and the layout grid per breakpoint."
requested_language: fr
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/fr/reference/tokens/breakpoints
version: unreleased (main)
docs_index: https://docs.systhema.app/fr/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

Breakpoints are mobile first: a modifier applies from its min width upward, and classes without a modifier apply everywhere. The design width is the viewport the design was drawn at; it is `--screen-current` inside that breakpoint and the basis of the fluid `.vw` scale (`vw-<breakpoint>` pins it).

| Breakpoint | Modifier | Min width | Design width | Grid columns | Gutter | Container width | Container margin |
| ---------- | -------- | --------- | ------------ | ------------ | ------ | --------------- | ---------------- |
| `sm`       | none     | `0px`     | `390px`      | `12`         | `16px` | `356px`         | `17px`           |
| `md`       | `md:`    | `640px`   | `768px`      | `24`         | `12px` | `708px`         | `30px`           |
| `lg`       | `lg:`    | `1192px`  | `1192px`     | `24`         | `20px` | `1036px`        | `78px`           |
| `xl`       | `xl:`    | `1366px`  | `1440px`     | —            | —      | —               | —                |
| `2xl`      | `2xl:`   | `1728px`  | `1920px`     | —            | —      | —               | —                |
| `3xl`      | `3xl:`   | `2048px`  | `2560px`     | —            | —      | —               | —                |

`xl`, `2xl`, `3xl` have no sizing tokens by default, so they keep the values of the widest sized breakpoint. Define them with `customTokens.responsiveSizing` to use them.