Serendie Design System

AboutGet StartedFoundationsComponents
design system
AboutGet StartedFoundationsComponents
© Mitsubishi Electric Corporation

システムトークン

システムトークンは、リファレンストークンを参照するトークンです。UIをとりまくコンテキストが変化した際には、その参照先を切り替えることで対応します。

更新 2024/11/1

設計リファレンストークンシステムトークン
name
reference

color

sd.system.color.impression.primary
blue/700
sd.reference.color.scale.blue.700
sd.system.color.impression.onPrimary
white/1000
sd.reference.color.scale.white.1000
sd.system.color.impression.primaryContainer
blue/700
sd.reference.color.scale.blue.700
sd.system.color.impression.onPrimaryContainer
white/1000
sd.reference.color.scale.white.1000
sd.system.color.impression.secondary
blue/300
sd.reference.color.scale.blue.300
sd.system.color.impression.onSecondary
black/1000
sd.reference.color.scale.black.1000
sd.system.color.impression.secondaryContainer
blue/300
sd.reference.color.scale.blue.300
sd.system.color.impression.onSecondaryContainer
black/1000
sd.reference.color.scale.black.1000
sd.system.color.impression.tertiary
blue/100
sd.reference.color.scale.blue.100
sd.system.color.impression.onTertiary
black/1000
sd.reference.color.scale.black.1000
sd.system.color.impression.tertiaryContainer
blue/100
sd.reference.color.scale.blue.100
sd.system.color.impression.onTertiaryContainer
black/1000
sd.reference.color.scale.black.1000
sd.system.color.impression.notice
yellow/300
sd.reference.color.scale.yellow.300
sd.system.color.impression.onNotice
black/1000
sd.reference.color.scale.black.1000
sd.system.color.impression.noticeContainer
yellow/300
sd.reference.color.scale.yellow.300
sd.system.color.impression.onNoticeContainer
black/1000
sd.reference.color.scale.black.1000
sd.system.color.impression.negative
red/600
sd.reference.color.scale.red.600
sd.system.color.impression.onNegative
white/1000
sd.reference.color.scale.white.1000
sd.system.color.impression.negativeContainer
red/200
sd.reference.color.scale.red.200
sd.system.color.impression.onNegativeContainer
black/1000
sd.reference.color.scale.black.1000
sd.system.color.impression.positive
green/500
sd.reference.color.scale.green.500
sd.system.color.impression.onPositive
white/1000
sd.reference.color.scale.white.1000
sd.system.color.impression.positiveContainer
green/500
sd.reference.color.scale.green.500
sd.system.color.impression.onPositiveContainer
white/1000
sd.reference.color.scale.white.1000
sd.system.color.component.surface
white/1000
sd.reference.color.scale.white.1000
sd.system.color.component.onSurface
black/1000
sd.reference.color.scale.black.1000
sd.system.color.component.onSurfaceVariant
gray/500
sd.reference.color.scale.gray.500
sd.system.color.component.inverseSurface
gray/1000
sd.reference.color.scale.gray.1000
sd.system.color.component.inverseOnSurface
white/1000
sd.reference.color.scale.white.1000
sd.system.color.component.outline
gray/300
sd.reference.color.scale.gray.300
sd.system.color.component.outlineVariant
gray/500
sd.reference.color.scale.gray.500
sd.system.color.component.scrim
transparency/20
sd.reference.color.scale.transparency.20
sd.system.color.interaction.disabled
gray/100
sd.reference.color.scale.gray.100
sd.system.color.interaction.disabledOnSurface
gray/400
sd.reference.color.scale.gray.400
sd.system.color.interaction.selectedSurface
blue/300
sd.reference.color.scale.blue.300
sd.system.color.interaction.hovered
transparency/20
sd.reference.color.scale.transparency.20
sd.system.color.interaction.hoveredVariant
transparency/5
sd.reference.color.scale.transparency.5
sd.system.color.interaction.hoveredOnPrimary
transparency/60
sd.reference.color.scale.transparency.60

dimension

sd.system.dimension.spacing.twoExtraSmall
sd.reference.dimension.scale.3
sd.system.dimension.spacing.extraSmall
sd.reference.dimension.scale.4
sd.system.dimension.spacing.small
sd.reference.dimension.scale.5
sd.system.dimension.spacing.medium
sd.reference.dimension.scale.6
sd.system.dimension.spacing.large
sd.reference.dimension.scale.7
sd.system.dimension.spacing.extraLarge
sd.reference.dimension.scale.8
sd.system.dimension.spacing.twoExtraLarge
sd.reference.dimension.scale.10
sd.system.dimension.spacing.threeExtraLarge
sd.reference.dimension.scale.12
sd.system.dimension.spacing.fourExtraLarge
sd.reference.dimension.scale.13
sd.system.dimension.spacing.fiveExtraLarge
sd.reference.dimension.scale.15
sd.system.dimension.spacing.sixExtraLarge
sd.reference.dimension.scale.17
sd.system.dimension.border.medium
sd.reference.dimension.scale.1
sd.system.dimension.border.thick
sd.reference.dimension.scale.2
sd.system.dimension.border.extraThick
sd.reference.dimension.scale.3
sd.system.dimension.radius.extraSmall
sd.reference.dimension.scale.2
sd.system.dimension.radius.small
sd.reference.dimension.scale.3
sd.system.dimension.radius.medium
sd.reference.dimension.scale.4
sd.system.dimension.radius.large
sd.reference.dimension.scale.5
sd.system.dimension.radius.extraLarge
sd.reference.dimension.scale.6
sd.system.dimension.radius.full
9999px
sd.system.dimension.breakpoint.compact
0px
sd.system.dimension.breakpoint.expanded
sd.reference.dimension.breakpoint.medium

shadow

sd.system.elevation.shadow.level1
color:
#0000004D
offsetX:
0px
offsetY:
1px
blur:
2px
spread:
0px
sd.system.elevation.shadow.level2
color:
#00000033
offsetX:
0px
offsetY:
1px
blur:
4px
spread:
0px
sd.system.elevation.shadow.level3
color:
#00000033
offsetX:
0px
offsetY:
2px
blur:
8px
spread:
0px
sd.system.elevation.shadow.level4
color:
#00000033
offsetX:
0px
offsetY:
4px
blur:
12px
spread:
0px
sd.system.elevation.shadow.level5
color:
#00000033
offsetX:
0px
offsetY:
8px
blur:
24px
spread:
0px

number

sd.system.elevation.zIndex.deepDive
-1000
sd.system.elevation.zIndex.base
0
sd.system.elevation.zIndex.docked
10
sd.system.elevation.zIndex.dropdown
500
sd.system.elevation.zIndex.modal
1000
sd.system.elevation.zIndex.toast
2000

typography

sd.system.typography.display.small_compact
fontSize:
sd.reference.typography.scale.compact.fourExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.display.medium_compact
fontSize:
sd.reference.typography.scale.compact.fiveExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.display.small_expanded
fontSize:
sd.reference.typography.scale.expanded.fourExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.display.medium_expanded
fontSize:
sd.reference.typography.scale.expanded.fiveExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.headline.small_compact
fontSize:
sd.reference.typography.scale.compact.threeExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.headline.medium_compact
fontSize:
sd.reference.typography.scale.compact.fourExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.headline.large_compact
fontSize:
sd.reference.typography.scale.compact.fiveExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.headline.small_expanded
fontSize:
sd.reference.typography.scale.expanded.extraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.headline.medium_expanded
fontSize:
sd.reference.typography.scale.expanded.twoExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.headline.large_expanded
fontSize:
sd.reference.typography.scale.expanded.threeExtraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.title.small_compact
fontSize:
sd.reference.typography.scale.compact.large
fontWeight:
sd.reference.typography.fontWeight.bold
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.title.medium_compact
fontSize:
sd.reference.typography.scale.compact.extraLarge
fontWeight:
sd.reference.typography.fontWeight.bold
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.title.large_compact
fontSize:
sd.reference.typography.scale.compact.twoExtraLarge
fontWeight:
sd.reference.typography.fontWeight.bold
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.title.small_expanded
fontSize:
sd.reference.typography.scale.expanded.small
fontWeight:
sd.reference.typography.fontWeight.bold
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.title.medium_expanded
fontSize:
sd.reference.typography.scale.expanded.medium
fontWeight:
sd.reference.typography.fontWeight.bold
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.title.large_expanded
fontSize:
sd.reference.typography.scale.expanded.large
fontWeight:
sd.reference.typography.fontWeight.bold
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.body.extraSmall_compact
fontSize:
sd.reference.typography.scale.compact.small
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.tight
sd.system.typography.body.small_compact
fontSize:
sd.reference.typography.scale.compact.medium
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.body.medium_compact
fontSize:
sd.reference.typography.scale.compact.large
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.body.large_compact
fontSize:
sd.reference.typography.scale.compact.extraLarge
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.body.extraSmall_expanded
fontSize:
sd.reference.typography.scale.expanded.twoExtraSmall
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.tight
sd.system.typography.body.small_expanded
fontSize:
sd.reference.typography.scale.expanded.extraSmall
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.body.medium_expanded
fontSize:
sd.reference.typography.scale.expanded.small
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.body.large_expanded
fontSize:
sd.reference.typography.scale.expanded.medium
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.normal
sd.system.typography.label.small_compact
fontSize:
sd.reference.typography.scale.compact.extraSmall
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.none
sd.system.typography.label.medium_compact
fontSize:
sd.reference.typography.scale.compact.small
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.none
sd.system.typography.label.large_compact
fontSize:
sd.reference.typography.scale.compact.medium
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.none
sd.system.typography.label.extraLarge_compact
fontSize:
sd.reference.typography.scale.compact.large
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.none
sd.system.typography.label.small_expanded
fontSize:
sd.reference.typography.scale.expanded.threeExtraSmall
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.none
sd.system.typography.label.medium_expanded
fontSize:
sd.reference.typography.scale.expanded.twoExtraSmall
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.none
sd.system.typography.label.large_expanded
fontSize:
sd.reference.typography.scale.expanded.extraSmall
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.none
sd.system.typography.label.extraLarge_expanded
fontSize:
sd.reference.typography.scale.expanded.small
fontWeight:
sd.reference.typography.fontWeight.regular
fontFamily:
sd.reference.typography.fontFamily.primary
lineHeight:
sd.reference.typography.lineHeight.none