Responsive layout

Build the base experience for narrow containers, let content grow fluidly, and add a query only when the content or interaction needs a different arrangement. Breakpoints describe available space; they do not represent particular devices.

Reference breakpoints

Use these shared thresholds for page-level layouts and documentation examples. They are starting points, not a requirement to use every value.

Name	Minimum width	Typical page-level use
sm	30rem	More room for small horizontal groups
md	48rem	Two-column content or expanded page navigation
lg	64rem	Persistent supporting regions or wider multi-column layouts
xl	80rem	Additional whitespace around a bounded content canvas

Use rem values so a user’s default font size influences when the layout changes. If content fails between these references, add a local content-driven query instead of forcing the nearest shared value.

.page {
  display: grid;
  gap: var(--aidsgn-space-24);
  margin-inline: auto;
  max-inline-size: 80rem;
  padding-inline: clamp(var(--aidsgn-space-16), 4vw, var(--aidsgn-space-32));
}

@media (min-width: 48rem) {
  .page {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  }
}

Prefer intrinsic and component-aware layouts

Use Grid, Flexbox, wrapping, minmax(), auto-fit, and clamp() before adding a breakpoint. Reusable components should normally respond to their container rather than the viewport:

.profile-region {
  container: profile / inline-size;
}

.profile {
  display: grid;
  gap: var(--aidsgn-space-16);
}

@container profile (min-width: 32rem) {
  .profile {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

The local 32rem query describes where this content can support another arrangement. It does not need to match a page-level reference breakpoint.

Tokens and breakpoints

Typography tokens already scale fluidly between bounded minimum and maximum sizes. Layout code can combine spacing tokens in the same pattern:

.section {
  gap: clamp(var(--aidsgn-space-16), 3vw, var(--aidsgn-space-32));
}

Breakpoint values are not published as CSS custom properties. CSS variables cannot be substituted into @media or @container conditions, so use the documented literal reference value in authored CSS. A query-compatible generated artifact would be required before the system could safely publish breakpoint tokens.

Responsive review

• Start with a usable single-column layout before any query applies.
• Check 320px, 768px, 1024px, and 1280px, plus widths immediately around every query used.
• Verify reflow at 400% zoom without loss of content or operation.
• Keep source, reading, and keyboard focus order meaningful in every arrangement.
• Test long translations, increased text spacing, long strings, and both text directions.
• Do not hide essential content merely to make a narrow layout fit.
• Honor reduced-motion and forced-colors preferences.

The repository’s root documentation contains the complete engineering contract alongside the accessibility requirements. Component-specific responsive behavior belongs in that component’s specification and examples.