Breakpoints
Define responsive breakpoints for layout, typography, and component behavior across screen sizes.
Breakpoints
Breakpoints are used to adapt layouts, components, and typography across various screen sizes. The Tendoo Design System uses a mobile-first approach, with clearly defined tokens to control how the UI responds at each stage.
Breakpoints help ensure your product looks and works well on every device — from small mobile screens to large desktop monitors.
Breakpoint Tokens
| Token | Width | Description |
|---|---|---|
breakpoint.xs | 0px | Extra small (mobile-first) |
breakpoint.sm | 640px | Small devices (phones) |
breakpoint.md | 768px | Medium devices (tablets) |
breakpoint.lg | 1024px | Large devices (small laptops) |
breakpoint.xl | 1280px | Extra large (desktop) |
breakpoint.2xl | 1536px | Very large (wide screens) |
// breakpoint.tokens.ts
export const breakpoint = {
xs: "0px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
};Usage Guidelines
- Start with a mobile-first layout and scale up with media queries or utility classes.
- Use breakpoints to adjust layout, typography, spacing, and visibility.
- Avoid introducing too many custom breakpoints — stick to the system for consistency.
Example (Tailwind-style classes)
<div className="p-md sm:p-lg lg:p-xl">
This container has responsive padding.
</div>
<h1 className="text-xl md:text-2xl xl:text-4xl">
Responsive heading
</h1>Media Query Example
@media (min-width: 768px) {
.sidebar {
display: block;
}
}Related
A consistent set of breakpoints ensures predictable, responsive behavior — letting your UI scale beautifully across every device.