Serendie Design System

AboutGet StartedFoundationsComponents
design system
AboutGet StartedFoundationsComponents
© Mitsubishi Electric Corporation

リファレンストークン

リファレンストークンは、カラーコードなど生の値を参照するトークンであり、このトークンをプロダクトのUI内で使用することは例外的です。

更新 2024/11/1

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

color

sd.reference.color.scale.white.1000
white/1000
#FFFFFF
sd.reference.color.scale.black.1000
black/1000
#000000
sd.reference.color.scale.transparency.5
transparency/5
#0000000D
sd.reference.color.scale.transparency.20
transparency/20
#00000033
sd.reference.color.scale.transparency.60
transparency/60
#FFFFFF99
sd.reference.color.scale.gray.100
gray/100
#EFEEEB
sd.reference.color.scale.gray.200
gray/200
#D9D8D3
sd.reference.color.scale.gray.300
gray/300
#C8C7C2
sd.reference.color.scale.gray.400
gray/400
#AFAEAA
sd.reference.color.scale.gray.500
gray/500
#8C8B87
sd.reference.color.scale.gray.600
gray/600
#696966
sd.reference.color.scale.gray.700
gray/700
#525250
sd.reference.color.scale.gray.800
gray/800
#3F3F3D
sd.reference.color.scale.gray.900
gray/900
#31312F
sd.reference.color.scale.gray.1000
gray/1000
#232322
sd.reference.color.scale.red.100
red/100
#FCEBEA
sd.reference.color.scale.red.200
red/200
#FCD6D3
sd.reference.color.scale.red.300
red/300
#FDB9B4
sd.reference.color.scale.red.400
red/400
#FF8F8F
sd.reference.color.scale.red.500
red/500
#F84258
sd.reference.color.scale.red.600
red/600
#CE0037
sd.reference.color.scale.red.700
red/700
#A4002A
sd.reference.color.scale.red.800
red/800
#81001F
sd.reference.color.scale.red.900
red/900
#650417
sd.reference.color.scale.red.1000
red/1000
#49060E
sd.reference.color.scale.chestnut.100
chestnut/100
#FAECE6
sd.reference.color.scale.chestnut.200
chestnut/200
#F7D8C9
sd.reference.color.scale.chestnut.300
chestnut/300
#F7C6B0
sd.reference.color.scale.chestnut.400
chestnut/400
#F49567
sd.reference.color.scale.chestnut.500
chestnut/500
#E26324
sd.reference.color.scale.chestnut.600
chestnut/600
#AB4919
sd.reference.color.scale.chestnut.700
chestnut/700
#803510
sd.reference.color.scale.chestnut.800
chestnut/800
#692C0D
sd.reference.color.scale.chestnut.900
chestnut/900
#50230D
sd.reference.color.scale.chestnut.1000
chestnut/1000
#371B0B
sd.reference.color.scale.beige.100
beige/100
#F7EDE2
sd.reference.color.scale.beige.200
beige/200
#F2DBC0
sd.reference.color.scale.beige.300
beige/300
#EDC18A
sd.reference.color.scale.beige.400
beige/400
#DAA358
sd.reference.color.scale.beige.500
beige/500
#AF8245
sd.reference.color.scale.beige.600
beige/600
#846132
sd.reference.color.scale.beige.700
beige/700
#684C26
sd.reference.color.scale.beige.800
beige/800
#503A1C
sd.reference.color.scale.beige.900
beige/900
#3E2D17
sd.reference.color.scale.beige.1000
beige/1000
#2B2013
sd.reference.color.scale.yellow.100
yellow/100
#FEEDBE
sd.reference.color.scale.yellow.200
yellow/200
#FFE885
sd.reference.color.scale.yellow.300
yellow/300
#FFE600
sd.reference.color.scale.yellow.400
yellow/400
#EDD202
sd.reference.color.scale.yellow.500
yellow/500
#AC9301
sd.reference.color.scale.yellow.600
yellow/600
#857100
sd.reference.color.scale.yellow.700
yellow/700
#5F5100
sd.reference.color.scale.yellow.800
yellow/800
#4A3E00
sd.reference.color.scale.yellow.900
yellow/900
#3A3000
sd.reference.color.scale.yellow.1000
yellow/1000
#292200
sd.reference.color.scale.green.100
green/100
#CAF9E6
sd.reference.color.scale.green.200
green/200
#AEEAD5
sd.reference.color.scale.green.300
green/300
#98E1C8
sd.reference.color.scale.green.400
green/400
#6ED0AE
sd.reference.color.scale.green.500
green/500
#40A683
sd.reference.color.scale.green.600
green/600
#2C755C
sd.reference.color.scale.green.700
green/700
#266751
sd.reference.color.scale.green.800
green/800
#184737
sd.reference.color.scale.green.900
green/900
#12372B
sd.reference.color.scale.green.1000
green/1000
#0D271E
sd.reference.color.scale.skyBlue.100
skyBlue/100
#D9F6FC
sd.reference.color.scale.skyBlue.200
skyBlue/200
#C3EFF4
sd.reference.color.scale.skyBlue.300
skyBlue/300
#9CE6EC
sd.reference.color.scale.skyBlue.400
skyBlue/400
#64CCD3
sd.reference.color.scale.skyBlue.500
skyBlue/500
#00A3AF
sd.reference.color.scale.skyBlue.600
skyBlue/600
#00757E
sd.reference.color.scale.skyBlue.700
skyBlue/700
#015C63
sd.reference.color.scale.skyBlue.800
skyBlue/800
#01474C
sd.reference.color.scale.skyBlue.900
skyBlue/900
#02373C
sd.reference.color.scale.skyBlue.1000
skyBlue/1000
#04272A
sd.reference.color.scale.blue.100
blue/100
#EFF2FC
sd.reference.color.scale.blue.200
blue/200
#D7DEFB
sd.reference.color.scale.blue.300
blue/300
#BFCEFC
sd.reference.color.scale.blue.400
blue/400
#8FAEFE
sd.reference.color.scale.blue.500
blue/500
#428CFE
sd.reference.color.scale.blue.600
blue/600
#0A69CF
sd.reference.color.scale.blue.700
blue/700
#0650A0
sd.reference.color.scale.blue.800
blue/800
#043F81
sd.reference.color.scale.blue.900
blue/900
#073165
sd.reference.color.scale.blue.1000
blue/1000
#081E3F
sd.reference.color.scale.purple.100
purple/100
#F4ECF6
sd.reference.color.scale.purple.200
purple/200
#EADAEE
sd.reference.color.scale.purple.300
purple/300
#DCBDE4
sd.reference.color.scale.purple.400
purple/400
#CC9FD9
sd.reference.color.scale.purple.500
purple/500
#AA61C2
sd.reference.color.scale.purple.600
purple/600
#914DA9
sd.reference.color.scale.purple.700
purple/700
#733B85
sd.reference.color.scale.purple.800
purple/800
#592D68
sd.reference.color.scale.purple.900
purple/900
#462352
sd.reference.color.scale.purple.1000
purple/1000
#32183A
sd.reference.color.scale.pink.100
pink/100
#F9EBF0
sd.reference.color.scale.pink.200
pink/200
#F6D7E0
sd.reference.color.scale.pink.300
pink/300
#F5C1D1
sd.reference.color.scale.pink.400
pink/400
#F190B4
sd.reference.color.scale.pink.500
pink/500
#EB4F8E
sd.reference.color.scale.pink.600
pink/600
#B9336B
sd.reference.color.scale.pink.700
pink/700
#932653
sd.reference.color.scale.pink.800
pink/800
#711D41
sd.reference.color.scale.pink.900
pink/900
#591734
sd.reference.color.scale.pink.1000
pink/1000
#401026

dimension

sd.reference.dimension.scale.0
0px
sd.reference.dimension.scale.1
1px
sd.reference.dimension.scale.2
2px
sd.reference.dimension.scale.3
4px
sd.reference.dimension.scale.4
8px
sd.reference.dimension.scale.5
12px
sd.reference.dimension.scale.6
16px
sd.reference.dimension.scale.7
20px
sd.reference.dimension.scale.8
24px
sd.reference.dimension.scale.9
28px
sd.reference.dimension.scale.10
32px
sd.reference.dimension.scale.11
36px
sd.reference.dimension.scale.12
40px
sd.reference.dimension.scale.13
48px
sd.reference.dimension.scale.14
56px
sd.reference.dimension.scale.15
64px
sd.reference.dimension.scale.16
72px
sd.reference.dimension.scale.17
80px
sd.reference.dimension.scale.18
96px
sd.reference.dimension.breakpoint.small
640px
sd.reference.dimension.breakpoint.medium
768px
sd.reference.dimension.breakpoint.large
1024px
sd.reference.dimension.breakpoint.extraLarge
1280px
sd.reference.typography.scale.expanded.fourExtraSmall
10px
sd.reference.typography.scale.expanded.threeExtraSmall
11px
sd.reference.typography.scale.expanded.twoExtraSmall
12px
sd.reference.typography.scale.expanded.extraSmall
13px
sd.reference.typography.scale.expanded.small
14px
sd.reference.typography.scale.expanded.medium
16px
sd.reference.typography.scale.expanded.large
18px
sd.reference.typography.scale.expanded.extraLarge
21px
sd.reference.typography.scale.expanded.twoExtraLarge
26px
sd.reference.typography.scale.expanded.threeExtraLarge
32px
sd.reference.typography.scale.expanded.fourExtraLarge
43px
sd.reference.typography.scale.expanded.fiveExtraLarge
64px
sd.reference.typography.scale.compact.twoExtraSmall
10px
sd.reference.typography.scale.compact.extraSmall
11px
sd.reference.typography.scale.compact.small
12px
sd.reference.typography.scale.compact.medium
14px
sd.reference.typography.scale.compact.large
16px
sd.reference.typography.scale.compact.extraLarge
19px
sd.reference.typography.scale.compact.twoExtraLarge
22px
sd.reference.typography.scale.compact.threeExtraLarge
28px
sd.reference.typography.scale.compact.fourExtraLarge
37px
sd.reference.typography.scale.compact.fiveExtraLarge
56px

number

sd.reference.elevation.opacity.scale.0
0
sd.reference.elevation.opacity.scale.1
0.1
sd.reference.elevation.opacity.scale.2
0.2
sd.reference.elevation.opacity.scale.3
0.3
sd.reference.elevation.opacity.scale.4
0.4
sd.reference.elevation.opacity.scale.5
0.5
sd.reference.elevation.opacity.scale.6
0.6
sd.reference.elevation.opacity.scale.7
0.7
sd.reference.elevation.opacity.scale.8
0.8
sd.reference.elevation.opacity.scale.9
0.9
sd.reference.elevation.opacity.scale.10
1
sd.reference.typography.lineHeight.none
1
sd.reference.typography.lineHeight.tight
1.4
sd.reference.typography.lineHeight.normal
1.6
sd.reference.typography.lineHeight.relaxed
1.8

fontFamily

sd.reference.typography.fontFamily.primary
Roboto
sd.reference.typography.fontFamily.monospace
Noto Sans Mono

fontWeight

sd.reference.typography.fontWeight.regular
400
sd.reference.typography.fontWeight.bold
700