Skip to content

Breakpoint

Min-Width

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

Defined in src/application.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/application.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/application.json

Refers to size.viewport.112

A desktop device's minimum available screen width.

min-width-breakpoint-desktop-wide1680px

Defined in src/application.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/application.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/application.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/application.json

Refers to size.viewport.168

Refers to size.absolute.1

A desktop device's maximum available screen width.