Responsive

The design system takes a mobile-first approach: base styles target small screens, and progressively wider breakpoints layer on complexity. This keeps the smallest, most constrained experience as the default and ensures content is usable on any device.

Breakpoints

Four width breakpoints plus a print media query are defined in the Settings layer. Every responsive utility class and grid feature keys off these values.

Token	Sass variable	Value	px
sm	$bp-sm	30rem	480 px
md	$bp-md	50rem	800 px
lg	$bp-lg	60rem	960 px
xl	$bp-xl	80rem	1280 px
print	—	@media print	—

Breakpoints use min-width media queries, so a rule applied at md takes effect at 800 px and wider.

The 12-Column Grid

The grid system uses CSS Grid with 12 equal columns inside a constrained container. Content areas are defined with object classes that control maximum width:

Class	Max width	Use case
obj-limit-width	90rem (1440 px)	Full-bleed page wrapper
obj-content-width	75rem (1200 px)	Standard content sections
obj-reading-width	60rem (960 px)	Long-form text for comfortable line lengths

These classes center their content and apply horizontal padding so the layout has breathing room at every viewport size.

For more granular column control, see the Grid and Flexbox documentation.

Responsive Utility Suffixes

Most utility classes accept a breakpoint suffix that activates the style only at that breakpoint and above. The suffix is appended with an @ sign.

Pattern: .util-{property}-{value}@{breakpoint}

Examples

Class	Effect
util-margin-bottom-lg	Applies margin-bottom at the lg spacing value at all screen sizes
util-margin-bottom-lg@md	Applies margin-bottom: lg only at the md breakpoint (800 px) and above
util-display-none@print	Hides the element when printing
util-margin-vert-lg@print	Applies vertical margin at the lg value in print stylesheets

This lets you stack mobile-first overrides without writing custom media queries:

<div class="util-margin-bottom-md util-margin-bottom-xl@lg">
  <!-- md spacing by default, xl spacing on large screens -->
</div>

Available breakpoint suffixes: @sm, @md, @lg, @xl, @print.

Flexbox and Grid Utilities

Object classes for flexbox layouts also support responsive modifiers:

• obj-flex — establishes a flex container
• obj-flex--direction-column@md — switches to column direction at the md breakpoint
• obj-flex--justify-between — distributes items with space between

See the Flexbox page for the full set of direction, alignment, and wrapping utilities.

Width Control

The spacing and width systems work together to keep content readable. Key width-related variables:

Variable	Value	Purpose
$max-page-width	90rem	Outermost page cap
$max-content-width	75rem	Content area cap
$max-reading-width	60rem	Prose/text cap for readability
$hero-content-width	75rem	Hero section content cap

Print Styles

The print breakpoint applies styles only when the page is printed or saved as PDF. Common uses:

• Hide interactive elements: util-display-none@print
• Adjust spacing: util-margin-vert-lg@print
• Show full URLs after links (handled by the generic print stylesheet)

The design system includes print-specific color variables ($print-black, $print-blue) that ensure legibility on paper.

Mobile-First in Practice

When building a page, start with the smallest screen:

1. Write base styles and utility classes without any breakpoint suffix.
2. Add @sm or @md suffixes to introduce layout changes as space allows (e.g., switching from a single column to a multi-column grid).
3. Use @lg and @xl for fine-tuning wide-screen layouts.
4. Add @print overrides to remove chrome and optimize for paper.

This approach guarantees that every device gets a functional layout, even if it does not get the most elaborate one.