Skip to content
On this page

Breakpoint

Min-Width

List of design token names, values and metadata for
NameValue
min-width-breakpoint-mobile320px

Defined in src/codex-base.json

Refers to size.viewport.32

A mobile device's minimum available screen width. Many older feature phones have screens smaller than this value.

min-width-breakpoint-tablet640px

Defined in src/codex-base.json

Refers to size.viewport.64

A tablet device's minimum available screen width. Note: the size chosen is eager to be re-evaluated with Web team and Product Analytics.

min-width-breakpoint-desktop1120px

Defined in src/codex-base.json

Refers to size.viewport.112

A desktop device's minimum available screen width.

min-width-breakpoint-desktop-wide1680px

Defined in src/codex-base.json

Refers to size.viewport.168

A wider desktop's minimum available screen width.

Max-Width

List of design token names, values and metadata for
NameValue
max-width-breakpoint-mobilecalc( 640px - 1px )

Defined in src/codex-base.json

Refers to size.viewport.64

Refers to size.absolute.1

A mobile device's maximum available screen width. Many older feature phones have screens smaller than this value.

max-width-breakpoint-tabletcalc( 1120px - 1px )

Defined in src/codex-base.json

Refers to size.viewport.112

Refers to size.absolute.1

A tablet device's maximum available screen width. Note, the size chosen is eager to be re-evaluated with Web team and Product Analytics.

max-width-breakpoint-desktopcalc( 1680px - 1px )

Defined in src/codex-base.json

Refers to size.viewport.168

Refers to size.absolute.1

A desktop device's maximum available screen width.

Width (legacy)

List of design token names, values and metadata for
NameValue
width-breakpoint-mobile deprecated 320px

Defined in src/codex-base.json

Refers to min-width.breakpoint.mobile

Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A mobile device's screen width. Many older feature phones have screens smaller than this value. (use `min-width-breakpoint-mobile` instead)

width-breakpoint-tablet deprecated 720px

Defined in src/codex-base.json

Refers to size.viewport.72

Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A tablet device's screen width. (use `size-viewport-72` instead)

width-breakpoint-desktop deprecated 1000px

Defined in src/codex-base.json

Refers to size.viewport.100

Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A desktop device's screen width. (use `size-viewport-100` instead)

width-breakpoint-desktop-wide deprecated 1200px

Defined in src/codex-base.json

Refers to size.viewport.120

Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A wider desktop's screen width. (use `size-viewport-120` instead)

width-breakpoint-desktop-extrawide deprecated 2000px

Defined in src/codex-base.json

Refers to size.viewport.200

Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. An extra wide desktop's screen width. (use `size-viewport-200` instead)