Breakpoint tokens

Provisional

Breakpoint tokens are provisional until UX revises them. Bands, values, and naming may change.

Catnip uses XS, S, M, L, XL, and XXL for layout. Tokens are CSS --catnip-breakpoint-* variables and matching CatnipBreakpoint* JavaScript exports.

Source: packages/design-tokens/src/tokens/base/breakpoints.json

@import "@signicat/catnip-design-tokens/css";

Bands

Breakpoint	Range	Focus
XS	0px – 479px	Single column, high readability
S	480px – 767px	Phablets and small tablets
M	768px – 1023px	Standard tablets
L	1024px – 1279px	Laptops
XL	1280px and up	Desktops
XXL	1536px and up (min-width token)	Large desktops / ultrawide

How the variables map

• --catnip-breakpoint-xs-max (479px) — use with max-width for the XS band (0–479px).
• --catnip-breakpoint-s-min, m-min, l-min, xl-min, xxl-min — use with min-width for mobile-first breakpoints (S through XXL).

Upper ends of S / M / L (767, 1023, 1279) are next band min − 1px if you need a max-width pair (for example calc(var(--catnip-breakpoint-m-min) - 1px) for the top of S).

Typography

Responsive font presets use the mobile column for viewports below M. The build inlines @media (max-width: 767px) because var() is not allowed in media query conditions. See Typography tokens.

Reference table

No breakpoint tokens were found. Build the design-tokens package (e.g. pnpm run build in packages/design-tokens) and restart the docs dev server.