Design Tokens

Foundations

Guidelines

Design Patterns

design token

Breakpoints

Mobile-first responsive breakpoints for adaptive layouts across screen sizes.

A mobile-first breakpoint system with five size steps. Values are written in px on purpose: the design system’s root font is 10px, so a rem media query would not mean what it does elsewhere.

Scale

scale · breakpoints
sm640pxmd768pxlg1024pxxl1280px2xl1536px
tokens · breakpoints
tokenvaluedescription
sm640pxLarge phones, small tablets
md768pxTablets
lg1024pxSmall desktops, laptops
xl1280pxLarge desktops
2xl1536pxExtra large screens

Mobile-First Approach

Styles are applied from the smallest screen up. Breakpoint conditions override base styles at their threshold and above:

import { css } from "@pindoba/styled-system/css";

<div
  className={css({
    padding: "sm", // Mobile (default)
    sm: { padding: "md" }, // 640px+
    md: { padding: "lg" }, // 768px+
    lg: { padding: "xl" }, // 1024px+
  })}
>
  Responsive content
</div>;

Usage

Responsive Layout

<div
  className={css({
    display: "grid",
    gridTemplateColumns: "1fr",
    gap: "md",
    sm: { gridTemplateColumns: "repeat(2, 1fr)" },
    lg: { gridTemplateColumns: "repeat(3, 1fr)" },
  })}
>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Visibility

<div className={css({
  display: "block",
  md: { display: "none" },
})}>
  Mobile only
</div>

<div className={css({
  display: "none",
  md: { display: "block" },
})}>
  Desktop only
</div>

Best Practices

  • Start with mobile styles, then layer breakpoint overrides
  • Use content-driven breakpoints — choose the right one based on when the layout breaks, not device names
  • Use responsive spacing (padding: { base: "sm", md: "lg" }) rather than fixed values