System Tokens
TypeScale
Display Large
| Token | Value |
|---|---|
| ds.sys.typeScale.displayLarge.fontFamily | ds.ref.typeface.brandRegular |
| ds.sys.typeScale.displayLarge.lineHeight | 64dp |
| ds.sys.typeScale.displayLarge.fontSize | 57dp |
| ds.sys.typeScale.displayLarge.letterSpacing | -0.25dp |
Display Medium
| Token | Value |
|---|---|
| ds.sys.typeScale.displayMedium.fontFamily | ds.ref.typeface.brandRegular |
| ds.sys.typeScale.displayMedium.lineHeight | 52dp |
| ds.sys.typeScale.displayMedium.fontSize | 45dp |
| ds.sys.typeScale.displayMedium.letterSpacing | 0dp |
Display Small
| Token | Value |
|---|---|
| ds.sys.typeScale.displaySmall.fontFamily | ds.ref.typeface.brandRegular |
| ds.sys.typeScale.displaySmall.lineHeight | 44dp |
| ds.sys.typeScale.displaySmall.fontSize | 36dp |
| ds.sys.typeScale.displaySmall.letterSpacing | 0dp |
Headline Large
| Token | Value |
|---|---|
| ds.sys.typeScale.headlineLarge.fontFamily | ds.ref.typeface.brandRegular |
| ds.sys.typeScale.headlineLarge.lineHeight | 40dp |
| ds.sys.typeScale.headlineLarge.fontSize | 32dp |
| ds.sys.typeScale.headlineLarge.letterSpacing | 0dp |
Headline Medium
| Token | Value |
|---|---|
| ds.sys.typeScale.headlineMedium.fontFamily | ds.ref.typeface.brandRegular |
| ds.sys.typeScale.headlineMedium.lineHeight | 36dp |
| ds.sys.typeScale.headlineMedium.fontSize | 28dp |
| ds.sys.typeScale.headlineMedium.letterSpacing | 0dp |
Headline Small
| Token | Value |
|---|---|
| ds.sys.typeScale.headlineSmall.fontFamily | ds.ref.typeface.brandRegular |
| ds.sys.typeScale.headlineSmall.lineHeight | 32dp |
| ds.sys.typeScale.headlineSmall.fontSize | 24dp |
| ds.sys.typeScale.headlineSmall.letterSpacing | 0dp |
Title Large
| Token | Value |
|---|---|
| ds.sys.typeScale.titleLarge.fontFamily | ds.ref.typeface.brandRegular |
| ds.sys.typeScale.titleLarge.lineHeight | 28dp |
| ds.sys.typeScale.titleLarge.fontSize | 22dp |
| ds.sys.typeScale.titleLarge.letterSpacing | 0dp |
Title Medium
| Token | Value |
|---|---|
| ds.sys.typeScale.titleMedium.fontFamily | ds.ref.typeface.brandMedium |
| ds.sys.typeScale.titleMedium.lineHeight | 24dp |
| ds.sys.typeScale.titleMedium.fontSize | 16dp |
| ds.sys.typeScale.titleMedium.letterSpacing | 0.15dp |
Title Small
| Token | Value |
|---|---|
| ds.sys.typeScale.titleSmall.fontFamily | ds.ref.typeface.brandMedium |
| ds.sys.typeScale.titleSmall.lineHeight | 20dp |
| ds.sys.typeScale.titleSmall.fontSize | 14dp |
| ds.sys.typeScale.titleSmall.letterSpacing | 0.1dp |
Body Large
| Token | Value |
|---|---|
| ds.sys.typeScale.bodyLarge.fontFamily | ds.ref.typeface.plainRegular |
| ds.sys.typeScale.bodyLarge.lineHeight | 24dp |
| ds.sys.typeScale.bodyLarge.fontSize | 16dp |
| ds.sys.typeScale.bodyLarge.letterSpacing | 0.5dp |
Body Medium
| Token | Value |
|---|---|
| ds.sys.typeScale.bodyMedium.fontFamily | ds.ref.typeface.plainRegular |
| ds.sys.typeScale.bodyMedium.lineHeight | 20dp |
| ds.sys.typeScale.bodyMedium.fontSize | 14dp |
| ds.sys.typeScale.bodyMedium.letterSpacing | 0.5dp |
Body Small
| Token | Value |
|---|---|
| ds.sys.typeScale.bodySmall.fontFamily | ds.ref.typeface.plainRegular |
| ds.sys.typeScale.bodySmall.lineHeight | 16dp |
| ds.sys.typeScale.bodySmall.fontSize | 12dp |
| ds.sys.typeScale.bodySmall.letterSpacing | 0.4dp |
Label Large
| Token | Value |
|---|---|
| ds.sys.typeScale.labelLarge.fontFamily | ds.ref.typeface.plainMedium |
| ds.sys.typeScale.labelLarge.lineHeight | 24dp |
| ds.sys.typeScale.labelLarge.fontSize | 16dp |
| ds.sys.typeScale.labelLarge.letterSpacing | 0.15dp |
Label Medium
| Token | Value |
|---|---|
| ds.sys.typeScale.labelMedium.fontFamily | ds.ref.typeface.plainMedium |
| ds.sys.typeScale.labelMedium.lineHeight | 16dp |
| ds.sys.typeScale.labelMedium.fontSize | 12dp |
| ds.sys.typeScale.labelMedium.letterSpacing | 0.5dp |
Label Small
| Token | Value |
|---|---|
| ds.sys.typeScale.labelSmall.fontFamily | ds.ref.typeface.plainMedium |
| ds.sys.typeScale.labelSmall.lineHeight | 16dp |
| ds.sys.typeScale.labelSmall.fontSize | 12dp |
| ds.sys.typeScale.labelSmall.letterSpacing | 0.5dp |
Color
Primary
| Token | Value |
|---|---|
| ds.sys.color.primary | ds.ref.palette.primary40 |
| ds.sys.color.onPrimary | ds.ref.palette.primary100 |
| ds.sys.color.primaryContainer | ds.ref.palette.primary99 |
| ds.sys.color.onPrimaryContainer | ds.ref.palette.primary30 |
Secondary
| Token | Value |
|---|---|
| ds.sys.color.secondary | ds.ref.palette.secondary30 |
| ds.sys.color.onSecondary | ds.ref.palette.secondary100 |
| ds.sys.color.secondaryContainer | ds.ref.palette.secondary99 |
| ds.sys.color.onSecondaryContainer | ds.ref.palette.secondary20 |
Error
| Token | Value |
|---|---|
| ds.sys.color.error | ds.ref.palette.error60 |
| ds.sys.color.onError | ds.ref.palette.error100 |
| ds.sys.color.errorContainer | ds.ref.palette.error99 |
| ds.sys.color.onErrorContainer | ds.ref.palette.error60 |
Warning
| Token | Value |
|---|---|
| ds.sys.color.warning | ds.ref.palette.warning60 |
| ds.sys.color.onWarning | ds.ref.palette.warning100 |
| ds.sys.color.warningContainer | ds.ref.palette.warning99 |
| ds.sys.color.onWarningContainer | ds.ref.palette.warning50 |
Success
| Token | Value |
|---|---|
| ds.sys.color.success | ds.ref.palette.success60 |
| ds.sys.color.onSuccess | ds.ref.palette.success100 |
| ds.sys.color.successContainer | ds.ref.palette.success99 |
| ds.sys.color.onSuccessContainer | ds.ref.palette.success50 |
Surfaces
| Token | Value |
|---|---|
| ds.sys.color.surfaceDim | ds.ref.palette.neutral87 |
| ds.sys.color.surface | ds.ref.palette.neutral99 |
| ds.sys.color.surfaceBright | ds.ref.palette.neutral100 |
| ds.sys.color.onSurface | ds.ref.palette.neutral10 |
| ds.sys.color.onSurfaceVariant | ds.ref.palette.neutralVariant30 |
| ds.sys.color.surfaceContainer | ds.ref.palette.neutral100 |
Inverse
| Token | Value |
|---|---|
| ds.sys.color.inversePrimary | ds.ref.palette.primary95 |
| ds.sys.color.inverseSurface | ds.ref.palette.neutral20 |
| ds.sys.color.inverseOnSurface | ds.ref.palette.neutral95 |
Other
| Token | Value |
|---|---|
| ds.sys.color.scrim | ds.ref.palette.neutral0 |
| ds.sys.color.shadow | ds.ref.palette.neutral0 |
| ds.sys.color.outline | ds.ref.palette.neutralVariant50 |
| ds.sys.color.outlineVariant | ds.ref.palette.neutralVariant90 |
Shapes
| Token | Value |
|---|---|
| ds.sys.shape.none | 0dp |
| ds.sys.shape.extraSmall | 4dp |
| ds.sys.shape.small | 8dp |
| ds.sys.shape.medium | 12dp |
| ds.sys.shape.large | 16dp |
| ds.sys.shape.extraLarge | 28dp |
| ds.sys.shape.full | 9999dp |
States
| Token | Value |
|---|---|
| ds.sys.state.pressedStateLayerOpacity | 0.12 |
| ds.sys.state.disabledContainerOpacity | 0.12 |
| ds.sys.state.disabledOnContainerOpacity | 0.38 |
Elevations
| Token | Value |
|---|---|
| ds.sys.elevation.level0 | 0dp |
| ds.sys.elevation.level1 | 1dp |
| ds.sys.elevation.level2 | 3dp |
| ds.sys.elevation.level3 | 6dp |
| ds.sys.elevation.level4 | 8dp |
| ds.sys.elevation.level5 | 12dp |