Overview

Our design system uses a defined set of breakpoint tokens to ensure consistent responsive behavior across our digital products.

Note: CSS variables are computed at runtime and can’t be used in media queries. Use the SCSS variable instead.

Mobile-First Approach

We follow a mobile-first philosophy, which means that the default styles are optimized for mobile devices. This establishes a clear baseline for styles that assumes a mobile device's constraints, so that larger screens receive additional overrides only when needed. When using breakpoints in our code, you should strive to primarily use min-width queries. Use max-width queries only if you have a specific need to override styles for devices below a certain width that is not achievable through min-width queries.

Tailwind Variants

Our breakpoint tokens are used to configure the responsive Tailwind variants. This ensures that utility classes like xs:bg-red-300 or md:bg-yellow-300 work as expected.

Media vs. Container Queries

In our design, we distinguish between media queries—which respond to the overall viewport size—and container queries, which allow us to style components based on the size of a particular container. This flexible approach helps ensure that components adapt both globally and locally to different screen sizes. More details on our implementation and best practices will be added soon.

[Content TBD]

Specs Table

Click on any token in the table below to copy the corresponding variable to clipboard.