Viewport
Responsive breakpoints and the values that shift across them.
Breakpoint
Name
Token
Value
max-width
$viewport-breakpoint-max-width
$spacing-breakpoint-1920-max
min-width
$viewport-breakpoint-min-width
$spacing-breakpoint-1728
Grid / Dashboard
Name
Token
Value
column
$viewport-grid-dashboard-column
$spacing-unit-16
gutter
$viewport-grid-dashboard-gutter
$spacing-unit-24
margin
$viewport-grid-dashboard-margin
$spacing-unit-24
Grid / Landing
Name
Token
Value
column
$viewport-grid-landing-column
$spacing-unit-16
gutter
$viewport-grid-landing-gutter
$spacing-unit-24
margin
$viewport-grid-landing-margin
$spacing-unit-32
Layout / page
Name
Token
Value
width
$viewport-layout-page-width
$spacing-breakpoint-1440
width-max
$viewport-layout-page-width-max
3546
Layout / section
Name
Token
Value
padding
$viewport-layout-section-padding
$viewport-grid-dashboard-margin
top-padding
$viewport-layout-section-top-padding
$spacing-unit-32
Layout / wrapper
Name
Token
Value
gap
$viewport-layout-wrapper-gap
$viewport-grid-dashboard-gutter
Typo / body
Name
Token
Value
height L
$viewport-typo-body-height-l
↗ library ref
height M
$viewport-typo-body-height-m
↗ library ref
height S
$viewport-typo-body-height-s
↗ library ref
height XL
$viewport-typo-body-height-xl
$type-font-height-xl
height XS
$viewport-typo-body-height-xs
$type-font-height-xs
size L
$viewport-typo-body-size-l
↗ library ref
size M
$viewport-typo-body-size-m
↗ library ref
size S
$viewport-typo-body-size-s
↗ library ref
size XL
$viewport-typo-body-size-xl
↗ library ref
size XS
$viewport-typo-body-size-xs
$type-font-size-xs
Typo / code
Name
Token
Value
height L
$viewport-typo-code-height-l
↗ library ref
height M
$viewport-typo-code-height-m
↗ library ref
size L
$viewport-typo-code-size-l
↗ library ref
size M
$viewport-typo-code-size-m
↗ library ref
Typo / display
Name
Token
Value
height L
$viewport-typo-display-height-l
$type-type-display-l-line-height
height M
$viewport-typo-display-height-m
$type-type-display-m-line-height
height S
$viewport-typo-display-height-s
$type-type-display-s-line-height
height XS
$viewport-typo-display-height-xs
↗ library ref
size L
$viewport-typo-display-size-l
↗ library ref
size M
$viewport-typo-display-size-m
$type-type-display-m-size
size S
$viewport-typo-display-size-s
$type-type-display-s-size
size XS
$viewport-typo-display-size-xs
↗ library ref
Typo / heading
Name
Token
Value
height 2XL
$viewport-typo-heading-height-2xl
$type-type-heading-2xl-line-height
height 3XL
$viewport-typo-heading-height-3xl
$type-type-heading-3xl-line-height
height 4XL
$viewport-typo-heading-height-4xl
↗ library ref
height 5XL
$viewport-typo-heading-height-5xl
↗ library ref
height 6XL
$viewport-typo-heading-height-6xl
$type-type-heading-6xl-line-height
height L
$viewport-typo-heading-height-l
↗ library ref
height XL
$viewport-typo-heading-height-xl
$type-type-heading-xl-line-height
size 2XL
$viewport-typo-heading-size-2xl
↗ library ref
size 3XL
$viewport-typo-heading-size-3xl
↗ library ref
size 4XL
$viewport-typo-heading-size-4xl
↗ library ref
size 5XL
$viewport-typo-heading-size-5xl
↗ library ref
size 6XL
$viewport-typo-heading-size-6xl
↗ library ref
size L
$viewport-typo-heading-size-l
↗ library ref
size XL
$viewport-typo-heading-size-xl
↗ library ref
Typo / label
Name
Token
Value
height 2XL
$viewport-typo-label-height-2xl
$type-font-height-xl
height 3XL
$viewport-typo-label-height-3xl
$type-font-height-2xl
height 4XL
$viewport-typo-label-height-4xl
↗ library ref
height L
$viewport-typo-label-height-l
↗ library ref
height M
$viewport-typo-label-height-m
↗ library ref
height XL
$viewport-typo-label-height-xl
$type-font-height-xl
size 2XL
$viewport-typo-label-size-2xl
↗ library ref
size 3XL
$viewport-typo-label-size-3xl
↗ library ref
size 4XL
$viewport-typo-label-size-4xl
↗ library ref
size L
$viewport-typo-label-size-l
↗ library ref
size M
$viewport-typo-label-size-m
↗ library ref
size XL
$viewport-typo-label-size-xl
↗ library ref
Typo / link
Name
Token
Value
height L
$viewport-typo-link-height-l
↗ library ref
height M
$viewport-typo-link-height-m
↗ library ref
height S
$viewport-typo-link-height-s
↗ library ref
size L
$viewport-typo-link-size-l
↗ library ref
size M
$viewport-typo-link-size-m
↗ library ref
size S
$viewport-typo-link-size-s
↗ library ref