Skip to content
m3exp-web
System Light Dark

Layout

Window size classes decide how many panes fit and which navigation to show; the spacing scale, elevation and state layers are the rest of the layout tokens.

Window size classes

Layouts adapt by class, not by device. This window is (needs JavaScript).

Width class Range Typical use
compact 0–599dp One pane; a navigation bar
medium 600–839dp One pane; a collapsed navigation rail
expanded 840–1199dp Two panes; a navigation rail
large 1200–1599dp Two panes; the expanded rail
extra-large 1600dp and up Up to three panes; the expanded rail
Height class Range
compact 0–479dp
medium 480–899dp
expanded 900dp and up

The breakpoints are --m3e-sys-window-* tokens and the windowBreakpoints object. In JavaScript, observeWindowSizeClass() (custom elements) and useWindowSizeClass() (React) report the current class. The navigation suite switches bar and rail by it, and the canonical layouts apply the same breakpoints to their own width with container queries. 

import { observeWindowSizeClass } from '@kyralabs/m3exp-web/elements';

observeWindowSizeClass(({ widthClass, heightClass }) => {
  document.body.dataset.layout = widthClass; // 'compact' … 'extra-large'
}, { signal: new AbortController().signal });

Spacing

An 8dp-based scale (m3.material.io, 2026), from 0 to 72dp, as --m3e-sys-space-<step>. Compose has no spacing tokens at the pinned version.

  • space-0 0dp
  • space-25 2dp
  • space-50 4dp
  • space-75 6dp
  • space-100 8dp
  • space-125 10dp
  • space-150 12dp
  • space-175 14dp
  • space-200 16dp
  • space-250 20dp
  • space-300 24dp
  • space-400 32dp
  • space-450 36dp
  • space-500 40dp
  • space-600 48dp
  • space-700 56dp
  • space-800 64dp
  • space-900 72dp

Elevation

Six levels, drawn as two-layer shadows in the shadow color role (--m3e-sys-elevation-levelN-shadow). Surfaces show depth through their container tone too; surface tint is not applied.

  • level0 0dp
  • level1 1dp
  • level2 3dp
  • level3 6dp
  • level4 8dp
  • level5 12dp

State layers

Interactive elements lay a translucent layer of their content color over themselves: these opacities for each state, and a ripple from the press point. The focus ring is separate: 3dp in the secondary role, 2dp outside the component.

State Opacity Token
hover 0.08 --m3e-sys-state-hover-state-layer-opacity
focus 0.1 --m3e-sys-state-focus-state-layer-opacity
pressed 0.1 --m3e-sys-state-pressed-state-layer-opacity
dragged 0.16 --m3e-sys-state-dragged-state-layer-opacity

Sources

  • Window size classes: androidx window-core WindowSizeClass.kt L146–161 at the pinned commit (FOUNDATIONS_SPEC §9); pane counts: m3.material.io Breakpoints and Compose calculatePaneScaffoldDirective.
  • Spacing: the m3.material.io token database (md.sys.measurement.space*).
  • Elevation: ElevationTokens.kt L24–40; shadows from Material Web 2.5.0. State layers: StateTokens.kt L22–25 (FOUNDATIONS_SPEC §5, §6).