Tokens
Tokens reference
Every token in tokens/tokens.json and tokens/components.tokens.json, generated.
Generated from tokens/tokens.json and tokens/components.tokens.json. The Foundations pages show the same tokens with swatches, samples and usage.
Colours
| Token | CSS | Light | Dark |
|---|
paper | --paper | #FFFFFF | #0F141C |
card | --card | #F3F4F7 | #171D27 |
card2 | --card-2 | #E9EBF1 | #1F2733 |
line | --line | #E3E6EC | #263041 |
inactive | --inactive | #C9CDD6 | #465267 |
ink | --ink | #101A2E | #EEF1F6 |
muted | --muted | #5B6472 | #98A2B3 |
accent | --accent | #0B4EA2 | #6EA0F0 |
accentInk | --accent-ink | #FFFFFF | #0F141C |
accentTint | --accent-tint | #EAF1FB | #182944 |
good | --good | #1B5E20 | #7FD48A |
warn | --warn | #8A4B00 | #F2B96B |
alert | --alert | #E0641A | #F08A4A |
favorite | --favorite | #B7800F | #E8A317 |
scrim | --scrim | #101A2E | #101A2E |
liveBg | --live-bg | #101A2E | #EEF1F6 |
liveInk | --live-ink | #FFFFFF | #0F141C |
Fixed colours
| Token | CSS | Value |
|---|
alwaysWhite | --always-white | #FFFFFF |
alwaysInk | --always-black | #101A2E |
CTA lines
| Line | CSS | Light | Dark |
|---|
red | --red-line | #C60C30 | #C60C30 |
blue | --blue-line | #00A1DE | #00A1DE |
brown | --brown-line | #62361B | #A8653A |
green | --green-line | #009B3A | #009B3A |
orange | --orange-line | #F9461C | #F9461C |
purple | --purple-line | #522398 | #8D61D8 |
pink | --pink-line | #E27EA6 | #E27EA6 |
yellow | --yellow-line | #E3CC00 | #F9E300 |
Type
| Role | CSS | Size | Weight | Tracking (em) |
|---|
display | --fs-display | 32 | 750 | -.02 |
title | --fs-title | 20 | 700 | 0 |
body | --fs-body | 16 | 400 | 0 |
sub | --fs-sub | 13 | 400 | 0 |
cap | --fs-cap | 11 | 400 | 0 |
Spacing
| Token | CSS | Value |
|---|
gutter | --gutter | 20 pt |
cardPadding | --card-padding | 14 pt |
arrivalVerticalPadding | --arrival-vertical-padding | 5 pt |
arrivalHorizontalPadding | --arrival-horizontal-padding | 14 pt |
cardStackGap | --card-stack-gap | 8 pt |
arrivalStackGap | --arrival-stack-gap | 6 pt |
routeToggleGap | --route-toggle-gap | 6 pt |
metadataControlOverlap | --metadata-control-overlap | 12 pt |
metadataControlVerticalOverhang | --metadata-control-vertical-overhang | 14 pt |
headerMetadataGap | --header-metadata-gap | 4 pt |
headerCloseVerticalOverhang | --header-close-vertical-overhang | 8 pt |
directionControlVerticalOverhang | --direction-control-vertical-overhang | 6 pt |
sectionGap | --section-gap | 24 pt |
Space scale
| Token | CSS | Value |
|---|
s0 | --space-0 | 0 pt |
s2 | --space-2 | 2 pt |
s4 | --space-4 | 4 pt |
s6 | --space-6 | 6 pt |
s8 | --space-8 | 8 pt |
s10 | --space-10 | 10 pt |
s12 | --space-12 | 12 pt |
s14 | --space-14 | 14 pt |
s16 | --space-16 | 16 pt |
s20 | --space-20 | 20 pt |
s24 | --space-24 | 24 pt |
s32 | --space-32 | 32 pt |
s40 | --space-40 | 40 pt |
Radius
| Token | CSS | Value |
|---|
control | --r-control | 10 pt |
card | --r-card | 12 pt |
dialog | --r-modal | 20 pt |
sheet | --r-sheet | 28 pt |
lineBar | --radius-line-bar | 3 pt |
chip | --radius-chip | 6 pt |
segment | --radius-segment | 8 pt |
pill | --radius-pill | 999 pt |
Sizes
| Token | CSS | Value |
|---|
floatingControl | --fab | 52 pt |
mapStationMarker | --size-map-station-marker | 26 pt |
mapBusMarker | --size-map-bus-marker | 20 pt |
mapBusMarkerCompact | --size-map-bus-marker-compact | 7 pt |
mapStationMarkerCompact | --size-map-station-marker-compact | 10 pt |
iconButton | --size-icon-button | 44 pt |
minimumTapTarget | --size-minimum-tap-target | 44 pt |
controlGlyph | --size-control-glyph | 22 pt |
alertGlyph | --size-alert-glyph | 28 pt |
metadataGlyph | --size-metadata-glyph | 16 pt |
nearbyModeGlyph | --size-nearby-mode-glyph | 12 pt |
routeToggle | --size-route-toggle | 28 pt |
denseRouteToggle | --size-dense-route-toggle | 28 pt |
routeToggleMinimumWidth | --size-route-toggle-minimum-width | 44 pt |
directionControl | --size-direction-control | 36 pt |
lineBarHeight | --size-line-bar-height | 24 pt |
lineBarSegmentWidth | --size-line-bar-segment-width | 10 pt |
lineBarSegmentSpacing | --size-line-bar-segment-spacing | 3 pt |
listRowMinimumHeight | --size-list-row-minimum-height | 56 pt |
listLead | --size-list-lead | 44 pt |
arrivalPanelWidth | --size-arrival-panel-width | 128 pt |
timelineRowMinimumHeight | --size-timeline-row-minimum-height | 44 pt |
searchField | --size-search-field | 44 pt |
settingsRow | --size-settings-row | 52 pt |
primaryButton | --size-primary-button | 48 pt |
tabBar | --size-tab-bar | 64 pt |
tabBarClearance | --size-tab-bar-clearance | 88 pt |
tabBarEdgeFade | --size-tab-bar-edge-fade | 118 pt |
tabGlyph | --size-tab-glyph | 26 pt |
sheetLow | --core-low-h | 180 pt |
sheetLowNearby | --size-sheet-low-nearby | 120 pt |
sheetHalfFraction | --size-sheet-half-fraction | .5 ratio |
sheetFullTopOffset | --size-sheet-full-top-offset | 4 pt |
coreSheetInset | --core-inset | 6 pt |
coreSheetHeader | --corebar-h | 64 pt |
sheetGrabberZone | --size-sheet-grabber-zone | 28 pt |
grabberWidth | --size-grabber-width | 40 pt |
grabberHeight | --size-grabber-height | 5 pt |
focusRingWidth | --size-focus-ring-width | 2.5 pt |
focusRingOffset | --size-focus-ring-offset | 2 pt |
Font weight
| Token | CSS | Value |
|---|
regular | --weight-regular | 400 |
medium | --weight-medium | 500 |
semibold | --weight-semibold | 600 |
bold | --weight-bold | 700 |
heavy | --weight-heavy | 750 |
Elevation
| Token | CSS | x y blur · colour |
|---|
sheet | --shadow-sheet | 0 -10 30 · ink 16% |
floating | --shadow-fab | 0 6 16 · ink 24% |
control | --shadow-control | 0 1 4 · ink 18% |
Motion
| Token | CSS | Value |
|---|
pageDuration | --motion-page-duration | .17 s |
detail | --motion-detail-curve | cubic-bezier(.2, .85, .3, 1) |
detailDuration | --motion-detail-duration | .39 s |
sheetDuration | --motion-sheet-duration | .42 s |
sheetBounce | --motion-sheet-bounce | .15 ratio |
recenterDuration | --motion-recenter-duration | .45 s |
swipeSettleDuration | --motion-swipe-settle-duration | .25 s |
liveSectionDuration | --motion-live-section-duration | .25 s |
upcomingPlaceholderDuration | --motion-upcoming-placeholder-duration | .2 s |
upcomingResizeDuration | --motion-upcoming-resize-duration | .25 s |
upcomingFadeDuration | --motion-upcoming-fade-duration | .15 s |
liveValueDuration | --motion-live-value-duration | .15 s |
controlDuration | --motion-control-duration | .15 s |
spinDuration | --motion-spin-duration | .6 s |
Component tokens
From tokens/components.tokens.json. Each component reads var(--name, var(--ct-name)), so a page can override one instance.
Badge
| Custom property | Value | Alias |
|---|
--ct-badge-background | var(--accent-tint) | {colors.accentTint} |
--ct-badge-color | var(--accent) | {colors.accent} |
--ct-badge-font-size | var(--fs-sub) | {type.sub} |
--ct-badge-font-weight | var(--weight-bold) | {weight.bold} |
--ct-badge-gap | var(--space-8) | {space.s8} |
--ct-badge-height | 30px | |
--ct-badge-padding-x | var(--space-12) | {space.s12} |
--ct-badge-radius | var(--radius-pill) | {radius.pill} |
| Custom property | Value | Alias |
|---|
--ct-button-background | var(--accent-tint) | {colors.accentTint} |
--ct-button-background-primary | var(--accent) | {colors.accent} |
--ct-button-color | var(--accent) | {colors.accent} |
--ct-button-color-disabled | var(--inactive) | {colors.inactive} |
--ct-button-color-primary | var(--accent-ink) | {colors.accentInk} |
--ct-button-font-size | var(--fs-body) | {type.body} |
--ct-button-font-size-sm | var(--fs-sub) | {type.sub} |
--ct-button-font-weight | var(--weight-semibold) | {weight.semibold} |
--ct-button-gap | var(--space-8) | {space.s8} |
--ct-button-height | var(--size-minimum-tap-target) | {size.minimumTapTarget} |
--ct-button-height-sm | 36px | |
--ct-button-icon-size | 18px | |
--ct-button-padding-x | 18px | |
--ct-button-padding-x-sm | var(--space-12) | {space.s12} |
--ct-button-radius | var(--r-card) | {radius.card} |
Card
| Custom property | Value | Alias |
|---|
--ct-card-background | var(--card) | {colors.card} |
--ct-card-empty-color | var(--muted) | {colors.muted} |
--ct-card-empty-font-size | var(--fs-sub) | {type.sub} |
--ct-card-empty-padding-x | var(--space-16) | {space.s16} |
--ct-card-empty-padding-y | var(--space-20) | {space.s20} |
--ct-card-gap | var(--space-8) | {space.s8} |
--ct-card-padding | var(--space-card-padding) | {spacing.cardPadding} |
--ct-card-radius | var(--r-card) | {radius.card} |
Chip
| Custom property | Value | Alias |
|---|
--ct-chip-background | var(--card-2) | {colors.card2} |
--ct-chip-color | var(--ink) | {colors.ink} |
--ct-chip-font-size | 12px | |
--ct-chip-font-weight | var(--weight-semibold) | {weight.semibold} |
--ct-chip-height | 22px | |
--ct-chip-outline-width | var(--size-focus-ring-width) | {size.focusRingWidth} |
--ct-chip-padding-x | var(--space-8) | {space.s8} |
--ct-chip-radius | var(--radius-chip) | {radius.chip} |
| Custom property | Value | Alias |
|---|
--ct-icon-button-background | var(--accent-tint) | {colors.accentTint} |
--ct-icon-button-background-pressed | var(--accent) | {colors.accent} |
--ct-icon-button-color | var(--accent) | {colors.accent} |
--ct-icon-button-color-disabled | var(--inactive) | {colors.inactive} |
--ct-icon-button-color-pressed | var(--accent-ink) | {colors.accentInk} |
--ct-icon-button-glyph-size | var(--size-control-glyph) | {size.controlGlyph} |
--ct-icon-button-radius | var(--radius-pill) | {radius.pill} |
--ct-icon-button-size | var(--size-icon-button) | {size.iconButton} |
| Custom property | Value | Alias |
|---|
--ct-input-background | var(--card) | {colors.card} |
--ct-input-color | var(--ink) | {colors.ink} |
--ct-input-color-placeholder | var(--muted) | {colors.muted} |
--ct-input-font-size | var(--fs-body) | {type.body} |
--ct-input-gap | var(--space-10) | {space.s10} |
--ct-input-height | var(--size-search-field) | {size.searchField} |
--ct-input-icon-size | 18px | |
--ct-input-label-color | var(--muted) | {colors.muted} |
--ct-input-label-font-size | var(--fs-sub) | {type.sub} |
--ct-input-label-font-weight | var(--weight-semibold) | {weight.semibold} |
--ct-input-label-gap | var(--space-6) | {space.s6} |
--ct-input-padding-x | var(--space-12) | {space.s12} |
--ct-input-radius | var(--r-card) | {radius.card} |
Route toggle
| Custom property | Value | Alias |
|---|
--ct-route-toggle-bus-font-size | var(--fs-body) | {type.body} |
--ct-route-toggle-bus-font-weight | var(--weight-bold) | {weight.bold} |
--ct-route-toggle-bus-min-width | 56px | |
--ct-route-toggle-bus-padding-x | var(--space-14) | {space.s14} |
--ct-route-toggle-bus-radius | var(--r-control) | {radius.control} |
--ct-route-toggle-duration | var(--motion-control-duration) | {motion.controlDuration} |
--ct-route-toggle-ring-color | var(--ink) | {colors.ink} |
--ct-route-toggle-ring-gap | 3px | |
--ct-route-toggle-ring-gap-color | var(--paper) | {colors.paper} |
--ct-route-toggle-ring-width | var(--size-focus-ring-width) | {size.focusRingWidth} |
--ct-route-toggle-size | 40px | |
--ct-route-toggle-size-dense | 34px | |
Segmented control
| Custom property | Value | Alias |
|---|
--ct-segmented-background | var(--card-2) | {colors.card2} |
--ct-segmented-background-selected | var(--paper) | {colors.paper} |
--ct-segmented-color | var(--muted) | {colors.muted} |
--ct-segmented-color-selected | var(--ink) | {colors.ink} |
--ct-segmented-font-size | var(--fs-sub) | {type.sub} |
--ct-segmented-font-weight | var(--weight-medium) | {weight.medium} |
--ct-segmented-font-weight-selected | var(--weight-semibold) | {weight.semibold} |
--ct-segmented-gap | var(--space-2) | {space.s2} |
--ct-segmented-height | 36px | |
--ct-segmented-padding | var(--space-2) | {space.s2} |
--ct-segmented-radius | var(--r-control) | {radius.control} |
--ct-segmented-segment-padding-x | var(--space-12) | {space.s12} |
--ct-segmented-segment-radius | var(--radius-segment) | {radius.segment} |
--ct-segmented-shadow-selected | var(--shadow-control) | {shadows.control} |
Spinner
| Custom property | Value | Alias |
|---|
--ct-spinner-color | var(--accent) | {colors.accent} |
--ct-spinner-duration | var(--motion-spin-duration) | {motion.spinDuration} |
--ct-spinner-size | 20px | |
--ct-spinner-stroke-width | var(--size-focus-ring-width) | {size.focusRingWidth} |
--ct-spinner-track | var(--line) | {colors.line} |
Status
| Custom property | Value | Alias |
|---|
--ct-status-font-weight | var(--weight-bold) | {weight.bold} |
--ct-status-pill-font-size | var(--fs-cap) | {type.cap} |
--ct-status-pill-height | 22px | |
--ct-status-pill-padding-x | var(--space-8) | {space.s8} |
--ct-status-pill-radius | var(--radius-pill) | {radius.pill} |
--ct-status-pill-tint | .14 | |
Table
| Custom property | Value | Alias |
|---|
--ct-table-cell-padding-x | var(--space-12) | {space.s12} |
--ct-table-cell-padding-y | var(--space-10) | {space.s10} |
--ct-table-font-size | 14px | |
--ct-table-head-background | var(--card) | {colors.card} |
--ct-table-head-color | var(--muted) | {colors.muted} |
--ct-table-head-font-size | var(--fs-cap) | {type.cap} |
--ct-table-head-tracking | .04em | |
--ct-table-rule | var(--line) | {colors.line} |
Toast
| Custom property | Value | Alias |
|---|
--ct-toast-background | var(--live-bg) | {colors.liveBg} |
--ct-toast-color | var(--live-ink) | {colors.liveInk} |
--ct-toast-duration | var(--motion-live-section-duration) | {motion.liveSectionDuration} |
--ct-toast-font-size | var(--fs-sub) | {type.sub} |
--ct-toast-font-weight | var(--weight-semibold) | {weight.semibold} |
--ct-toast-offset | var(--space-24) | {space.s24} |
--ct-toast-padding-x | var(--space-16) | {space.s16} |
--ct-toast-padding-y | var(--space-10) | {space.s10} |
--ct-toast-radius | var(--radius-pill) | {radius.pill} |
| Custom property | Value | Alias |
|---|
--ct-tooltip-background | var(--live-bg) | {colors.liveBg} |
--ct-tooltip-color | var(--live-ink) | {colors.liveInk} |
--ct-tooltip-duration | var(--motion-control-duration) | {motion.controlDuration} |
--ct-tooltip-font-size | var(--fs-cap) | {type.cap} |
--ct-tooltip-font-weight | var(--weight-semibold) | {weight.semibold} |
--ct-tooltip-max-width | 240px | |
--ct-tooltip-offset | var(--space-6) | {space.s6} |
--ct-tooltip-padding-x | var(--space-8) | {space.s8} |
--ct-tooltip-padding-y | var(--space-4) | {space.s4} |
--ct-tooltip-radius | var(--radius-chip) | {radius.chip} |
