Breakpoints

The viewport widths brand surfaces respond at, and why they are opt-in.

Measuring viewport…

tabletTablet746px

desktopDesktop1024px

wideWidescreen1440px

Opt-in, and only for the marketing site

The brand's breakpoints are a separate import, deliberately left out of @rogo-technologies/brand/styles:

css

@import "@rogo-technologies/brand/styles"; /* palette + type */
@import "@rogo-technologies/brand/styles/breakpoints"; /* marketing site only */

The override works by clearing Tailwind's entire scale before redefining it:

css

@theme {
  --breakpoint-*: initial;
  --breakpoint-tablet: 746px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

--breakpoint-*: initial removes every default, so importing this into an app that ships product UI would silently repoint every existing sm:/md:/lg: utility in that app, a change that compiles cleanly and is close to invisible in review. That is why it is not bundled with the tokens. This design system imports the palette and type scale but not this file, which is why the table above is documentation rather than the values currently in effect on this page.

The widths

Name	Min width	Usage
`sm`	746px	Large phone
`md`	810px	Tablet
`lg`	1024px	Small laptop
`xl`	1200px	Desktop
`2xl`	1440px	Large desktop
`3xl`	1600px	Widescreen

packages/brand/src/styles/breakpoints.css is the only place these widths are stated, so correct them there.

Responsive type is not wired up yet

Narrower-viewport sizes for 14 of the marketing text styles are recorded in the header of packages/brand/src/styles/typography.css but not turned into media queries: most key off widths the site's pages do not break at, so translating them as-is ships the wrong size on mobile. See Typography.

PreviousTypography

NextElevation