Layout

Breakpoints, layout metrics, motion and stacking. Layout tokens change by breakpoint.

Breakpoints

Raw values5

--breakpoint-2xl

Raw value. Use a semantic token instead.

1536px

--breakpoint-lg

Raw value. Use a semantic token instead.

1024px

--breakpoint-md

Raw value. Use a semantic token instead.

768px

--breakpoint-sm

Raw value. Use a semantic token instead.

640px

--breakpoint-xl

Raw value. Use a semantic token instead.

1280px

Motion

--duration-0

0ms. Primitive — alias via a semantic motion token.

0ms

--duration-500

500ms. Primitive — alias via a semantic motion token.

500ms

--motion-duration-fast

Hover, press and other immediate feedback.

100ms

--motion-duration-instant

No animation. Use for reduced-motion fallbacks.

0ms

--motion-duration-normal

Default for dropdowns, tooltips and small transitions.

200ms

--motion-duration-slow

Dialogs, drawers and larger surfaces entering.

300ms

--motion-easing-entrance

Elements entering: fast start, gentle settle.

cubic-bezier(0, 0, 0, 1)

--motion-easing-exit

Elements leaving: accelerate away.

cubic-bezier(0.3, 0, 1, 1)

--motion-easing-standard

Default easing for most transitions.

cubic-bezier(0.2, 0, 0, 1)

Raw values3

--duration-100

Raw value. Use a semantic token instead.

100ms

--duration-200

Raw value. Use a semantic token instead.

200ms

--duration-300

Raw value. Use a semantic token instead.

300ms

Layout

--layout-tab-bar

Mobile bottom tab bar height (72). Hidden on Tablet and up.

Mobile 72pxTablet 0pxDesktop 0pxWide 0px

72px

Stacking

--z-index-dropdown

Stacking order for dropdown layers. Higher wins; leave gaps of 100 for insertions.

1000

--z-index-modal

Stacking order for modal layers. Higher wins; leave gaps of 100 for insertions.

1300

--z-index-overlay

Stacking order for overlay layers. Higher wins; leave gaps of 100 for insertions.

1200

--z-index-sticky

Stacking order for sticky layers. Higher wins; leave gaps of 100 for insertions.

1100

--z-index-toast

Stacking order for toast layers. Higher wins; leave gaps of 100 for insertions.

1400