Breakpoints

Breakpoints are a crucial element in responsive web design, ensuring that our content adapts seamlessly across various devices and screen sizes. They allow us to define specific points at which our layout will adjust to provide an optimal viewing experience.

Storybook

Storybook - Breakpoints Documentation

Figma demo

Mobile-First Design

Purpose

We adopt a mobile-first design approach, which means designing for the smallest screen first and then progressively enhancing the experience for larger screens. This approach ensures that the core content and functionality are prioritized, leading to a cleaner and more efficient design that performs well on all devices.

Design Considerations

Start by designing for the mobile breakpoint and then scale up to larger screens. Focus on simplicity, clarity, and usability, ensuring that the content is easily accessible and readable on smaller devices.

Code

Any classes that are used on an element should not start with any prefixes, ie. p-16 flex gap-8

Mobile (375px)

Purpose

This breakpoint is tailored for smartphones. It ensures that our content is easily readable and navigable on smaller screens.

Design Considerations

Focus on vertical scrolling, single-column layouts, larger touch targets, and simplified navigation.

Code

To change a UI at the mobile breakpoint, use the mobile: prefix.

Tablet (700px)

Purpose

Optimized for tablets, this breakpoint provides a balance between the compactness of mobile devices and the expansive real estate of desktops.

Design Considerations

Introduce multi-column layouts where appropriate, enhance navigation options, and ensure that interactive elements are adequately spaced for touch.

Code

To change a UI at the tablet breakpoint, use the tablet: prefix.

Desktop (1024px)

Purpose

This breakpoint is intended for standard desktop monitors and larger tablets in landscape mode.

Design Considerations

Utilize grid layouts, sidebars, and additional navigation features. Ensure that content density is balanced to avoid overwhelming users with too much information at once.

Code

To change a UI at the desktop breakpoint, use the desktop: prefix.

Cap (1440px)

Purpose

Targeted at high-resolution displays, including large desktops and high-end laptops.

Design Considerations

Expand content to take advantage of the additional space, introduce more complex layouts, and ensure high-quality visuals. Maintain readability and usability by avoiding overly wide text lines.

Code

To change a UI at the cap breakpoint, use the cap: prefix. For max-width, the max-w-cap class will apply a max-width of the current cap token.

Max (1536px)

Purpose

This breakpoint addresses the removal of the padding within a full-bleed layout, allowing the capped content to be a full 1440px.

Design Considerations

Maximize the use of space for immersive experiences, such as wide galleries or expansive dashboards. Ensure that content remains centered and legible, and avoid excessive white space.

Code

To change a UI at the max breakpoint, use the max: prefix. DO NOT use max-w-max for max-width, the max-w-max class stands for max-width: max-content;, not the max-width breakpoint.