Platforms
Specifications, guidelines and tokens are written once for every platform. A state, an example, an accessibility statement or a token value is scoped only when a platform genuinely differs.
A platform is the runtime whose conventions and accessibility sources apply. A technology (Flutter, React Native, Qt, JavaFX, a web framework) targets one or several platforms and consumes that platform's resolved tokens. From packages/components/specs/platforms.json and packages/tokens/tokens.config.json.
Vocabulary
| Platform | Inputs | Technologies | Trusted sources | Tokens |
|---|---|---|---|---|
Web webBrowsers on any device, framework or not. The reference implementation in web/ targets it and the site renders it. |
pointertouchkeyboard | HTML and CSS, Web Components, React, Vue, Angular, Flutter web | wcagwcag-guidancewai-ariaapgaccnamehtml-aamcore-aamhtml-ariawai-tutorialswhatwg-htmlmdnrgaaen-301-549orange |
packages/tokens/dist/css/*.css |
iOS iosiOS and iPadOS apps. Touch first; pointer and keyboard exist (trackpad, Full Keyboard Access). |
touchpointerkeyboard | UIKit, SwiftUI, Flutter, React Native | apple-higen-301-549orange |
dist/platforms/ios/light.tokens.jsondist/platforms/ios/dark.tokens.json |
Android androidAndroid apps. Touch first; pointer and keyboard exist (mouse, stylus, hardware keyboard). |
touchpointerkeyboard | Jetpack Compose, Android Views, Flutter, React Native | androidmaterialen-301-549orange |
dist/platforms/android/light.tokens.jsondist/platforms/android/dark.tokens.json |
Desktop desktopNative desktop apps on macOS, Windows and Linux. Pointer and keyboard; no touch assumed. No platform token overlay: the base values apply. |
pointerkeyboard | Qt, JavaFX, WPF, AppKit, SwiftUI, Flutter desktop | apple-higen-301-549 |
base values |
Inputs
pointer— A pointing device that can hover: mouse, trackpad, stylus.touch— Direct touch; no hover, coarse targets.keyboard— Physical or assistive keyboard; focus moves between controls.
Token overlays
An overlay overrides raw or semantic tokens for one platform. Component tokens never change: the same decisions resolve to platform values. Each platform output is a resolved DTCG tree, one per mode, that any token tooling can transform.
iOS 2 overridden · dist/platforms/ios/light.tokens.jsondist/platforms/ios/dark.tokens.json
Sources: packages/tokens/src/platforms/ios/typography.tokens.json
| Token | Tier | Web (base) | iOS | Component tokens affected |
|---|---|---|---|---|
heading.family |
semantic | Inter |
"SF Pro", system-ui, sans-serif |
accordion.title.typography.smallaccordion.title.typography.mediumaccordion.panel.typography.smallaccordion.panel.typography.mediumalert.title.typographyalert.message.typographyavatar.initials.typography.smallavatar.initials.typography.mediumavatar.initials.typography.largebadge.label.typography.smallbadge.label.typography.mediumbreadcrumb.link.typography.smallbreadcrumb.link.typography.mediumbutton.label.typography.xsmallbutton.label.typography.smallbutton.label.typography.mediumbutton.label.typography.largecard.title.typographycard.description.typographycheckbox-group.legend.typographycheckbox-group.description.typographycheckbox-group.error-message.typographycheckbox-group.option-label.typography.smallcheckbox-group.option-label.typography.mediumcheckbox-group.option-description.typography.smallcheckbox-group.option-description.typography.mediumcheckbox.label.typography.smallcheckbox.label.typography.mediumcheckbox.description.typography.smallcheckbox.description.typography.mediumdropdown.item-label.typographynumber-field.label.typographynumber-field.control.typography.smallnumber-field.control.typography.mediumnumber-field.control.typography.largenumber-field.description.typographynumber-field.error-message.typographypagination.link.typography.smallpagination.link.typography.mediumprogress-bar.label.typographyprogress-bar.value.typographyradio-group.legend.typographyradio-group.description.typographyradio-group.error-message.typographyradio-group.option-label.typography.smallradio-group.option-label.typography.mediumradio-group.option-description.typography.smallradio-group.option-description.typography.mediumsearch-field.label.typographysearch-field.control.typography.smallsearch-field.control.typography.mediumsearch-field.control.typography.largesearch-field.description.typographyselect.label.typographyselect.control.typography.smallselect.control.typography.mediumselect.control.typography.largeselect.description.typographyselect.error-message.typographyslider.label.typographyslider.value.typographyspinner.label.typographyswitch.label.typography.smallswitch.label.typography.mediumswitch.description.typography.smallswitch.description.typography.mediumtext-field.label.typographytext-field.control.typography.smalltext-field.control.typography.mediumtext-field.control.typography.largetext-field.description.typographytext-field.error-message.typographytextarea.label.typographytextarea.control.typography.smalltextarea.control.typography.mediumtextarea.control.typography.largetextarea.description.typographytextarea.error-message.typography |
body.family |
semantic | Inter |
"SF Pro", system-ui, sans-serif |
accordion.title.typography.smallaccordion.title.typography.mediumaccordion.panel.typography.smallaccordion.panel.typography.mediumalert.title.typographyalert.message.typographyavatar.initials.typography.smallavatar.initials.typography.mediumavatar.initials.typography.largebadge.label.typography.smallbadge.label.typography.mediumbreadcrumb.link.typography.smallbreadcrumb.link.typography.mediumbutton.label.typography.xsmallbutton.label.typography.smallbutton.label.typography.mediumbutton.label.typography.largecard.title.typographycard.description.typographycheckbox-group.legend.typographycheckbox-group.description.typographycheckbox-group.error-message.typographycheckbox-group.option-label.typography.smallcheckbox-group.option-label.typography.mediumcheckbox-group.option-description.typography.smallcheckbox-group.option-description.typography.mediumcheckbox.label.typography.smallcheckbox.label.typography.mediumcheckbox.description.typography.smallcheckbox.description.typography.mediumdropdown.item-label.typographynumber-field.label.typographynumber-field.control.typography.smallnumber-field.control.typography.mediumnumber-field.control.typography.largenumber-field.description.typographynumber-field.error-message.typographypagination.link.typography.smallpagination.link.typography.mediumprogress-bar.label.typographyprogress-bar.value.typographyradio-group.legend.typographyradio-group.description.typographyradio-group.error-message.typographyradio-group.option-label.typography.smallradio-group.option-label.typography.mediumradio-group.option-description.typography.smallradio-group.option-description.typography.mediumsearch-field.label.typographysearch-field.control.typography.smallsearch-field.control.typography.mediumsearch-field.control.typography.largesearch-field.description.typographyselect.label.typographyselect.control.typography.smallselect.control.typography.mediumselect.control.typography.largeselect.description.typographyselect.error-message.typographyslider.label.typographyslider.value.typographyspinner.label.typographyswitch.label.typography.smallswitch.label.typography.mediumswitch.description.typography.smallswitch.description.typography.mediumtext-field.label.typographytext-field.control.typography.smalltext-field.control.typography.mediumtext-field.control.typography.largetext-field.description.typographytext-field.error-message.typographytextarea.label.typographytextarea.control.typography.smalltextarea.control.typography.mediumtextarea.control.typography.largetextarea.description.typographytextarea.error-message.typography |
Android 2 overridden · dist/platforms/android/light.tokens.jsondist/platforms/android/dark.tokens.json
Sources: packages/tokens/src/platforms/android/typography.tokens.json
| Token | Tier | Web (base) | Android | Component tokens affected |
|---|---|---|---|---|
heading.family |
semantic | Inter |
Roboto, sans-serif |
accordion.title.typography.smallaccordion.title.typography.mediumaccordion.panel.typography.smallaccordion.panel.typography.mediumalert.title.typographyalert.message.typographyavatar.initials.typography.smallavatar.initials.typography.mediumavatar.initials.typography.largebadge.label.typography.smallbadge.label.typography.mediumbreadcrumb.link.typography.smallbreadcrumb.link.typography.mediumbutton.label.typography.xsmallbutton.label.typography.smallbutton.label.typography.mediumbutton.label.typography.largecard.title.typographycard.description.typographycheckbox-group.legend.typographycheckbox-group.description.typographycheckbox-group.error-message.typographycheckbox-group.option-label.typography.smallcheckbox-group.option-label.typography.mediumcheckbox-group.option-description.typography.smallcheckbox-group.option-description.typography.mediumcheckbox.label.typography.smallcheckbox.label.typography.mediumcheckbox.description.typography.smallcheckbox.description.typography.mediumdropdown.item-label.typographynumber-field.label.typographynumber-field.control.typography.smallnumber-field.control.typography.mediumnumber-field.control.typography.largenumber-field.description.typographynumber-field.error-message.typographypagination.link.typography.smallpagination.link.typography.mediumprogress-bar.label.typographyprogress-bar.value.typographyradio-group.legend.typographyradio-group.description.typographyradio-group.error-message.typographyradio-group.option-label.typography.smallradio-group.option-label.typography.mediumradio-group.option-description.typography.smallradio-group.option-description.typography.mediumsearch-field.label.typographysearch-field.control.typography.smallsearch-field.control.typography.mediumsearch-field.control.typography.largesearch-field.description.typographyselect.label.typographyselect.control.typography.smallselect.control.typography.mediumselect.control.typography.largeselect.description.typographyselect.error-message.typographyslider.label.typographyslider.value.typographyspinner.label.typographyswitch.label.typography.smallswitch.label.typography.mediumswitch.description.typography.smallswitch.description.typography.mediumtext-field.label.typographytext-field.control.typography.smalltext-field.control.typography.mediumtext-field.control.typography.largetext-field.description.typographytext-field.error-message.typographytextarea.label.typographytextarea.control.typography.smalltextarea.control.typography.mediumtextarea.control.typography.largetextarea.description.typographytextarea.error-message.typography |
body.family |
semantic | Inter |
Roboto, sans-serif |
accordion.title.typography.smallaccordion.title.typography.mediumaccordion.panel.typography.smallaccordion.panel.typography.mediumalert.title.typographyalert.message.typographyavatar.initials.typography.smallavatar.initials.typography.mediumavatar.initials.typography.largebadge.label.typography.smallbadge.label.typography.mediumbreadcrumb.link.typography.smallbreadcrumb.link.typography.mediumbutton.label.typography.xsmallbutton.label.typography.smallbutton.label.typography.mediumbutton.label.typography.largecard.title.typographycard.description.typographycheckbox-group.legend.typographycheckbox-group.description.typographycheckbox-group.error-message.typographycheckbox-group.option-label.typography.smallcheckbox-group.option-label.typography.mediumcheckbox-group.option-description.typography.smallcheckbox-group.option-description.typography.mediumcheckbox.label.typography.smallcheckbox.label.typography.mediumcheckbox.description.typography.smallcheckbox.description.typography.mediumdropdown.item-label.typographynumber-field.label.typographynumber-field.control.typography.smallnumber-field.control.typography.mediumnumber-field.control.typography.largenumber-field.description.typographynumber-field.error-message.typographypagination.link.typography.smallpagination.link.typography.mediumprogress-bar.label.typographyprogress-bar.value.typographyradio-group.legend.typographyradio-group.description.typographyradio-group.error-message.typographyradio-group.option-label.typography.smallradio-group.option-label.typography.mediumradio-group.option-description.typography.smallradio-group.option-description.typography.mediumsearch-field.label.typographysearch-field.control.typography.smallsearch-field.control.typography.mediumsearch-field.control.typography.largesearch-field.description.typographyselect.label.typographyselect.control.typography.smallselect.control.typography.mediumselect.control.typography.largeselect.description.typographyselect.error-message.typographyslider.label.typographyslider.value.typographyspinner.label.typographyswitch.label.typography.smallswitch.label.typography.mediumswitch.description.typography.smallswitch.description.typography.mediumtext-field.label.typographytext-field.control.typography.smalltext-field.control.typography.mediumtext-field.control.typography.largetext-field.description.typographytext-field.error-message.typographytextarea.label.typographytextarea.control.typography.smalltextarea.control.typography.mediumtextarea.control.typography.largetextarea.description.typographytextarea.error-message.typography |
Lengths stay in the DTCG unit (px): read them as pt on iOS and dp on Android; a technology transform does the conversion. Tokens are listed per tier under Tokens.