リファレンストークン

リファレンストークンは、カラーコードなど生の値を参照するトークンであり、このトークンをプロダクトの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.bl2

transparency/bl2

#00000005

sd.reference.color.scale.transparency.bl5

transparency/bl5

#0000000D

sd.reference.color.scale.transparency.bl20

transparency/bl20

#00000033

sd.reference.color.scale.transparency.wh60

transparency/wh60

#FFFFFF99

sd.reference.color.scale.gray.100

gray/100

#F0F0F0

sd.reference.color.scale.gray.200

gray/200

#E4E4E3

sd.reference.color.scale.gray.300

gray/300

#D1D0CD

sd.reference.color.scale.gray.400

gray/400

#B1B0AE

sd.reference.color.scale.gray.500

gray/500

#8C8B87

sd.reference.color.scale.gray.600

gray/600

#6F6F6F

sd.reference.color.scale.gray.700

gray/700

#575757

sd.reference.color.scale.gray.800

gray/800

#424242

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

#FFDCDA

sd.reference.color.scale.red.300

red/300

#FFC0BB

sd.reference.color.scale.red.400

red/400

#FF8F8F

sd.reference.color.scale.red.500

red/500

#F64157

sd.reference.color.scale.red.600

red/600

#D00138

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

#600114

sd.reference.color.scale.red.1000

red/1000

#400109

sd.reference.color.scale.chestnut.100

chestnut/100

#FAECE6

sd.reference.color.scale.chestnut.200

chestnut/200

#FDDDCE

sd.reference.color.scale.chestnut.300

chestnut/300

#FCC4AB

sd.reference.color.scale.chestnut.400

chestnut/400

#F49972

sd.reference.color.scale.chestnut.500

chestnut/500

#DC6733

sd.reference.color.scale.chestnut.600

chestnut/600

#B54E1B

sd.reference.color.scale.chestnut.700

chestnut/700

#8F3D15

sd.reference.color.scale.chestnut.800

chestnut/800

#702D0D

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

#FDF5EC

sd.reference.color.scale.beige.200

beige/200

#F6E0C6

sd.reference.color.scale.beige.300

beige/300

#F0CC9E

sd.reference.color.scale.beige.400

beige/400

#DEB074

sd.reference.color.scale.beige.500

beige/500

#AE8144

sd.reference.color.scale.beige.600

beige/600

#8D6735

sd.reference.color.scale.beige.700

beige/700

#70522A

sd.reference.color.scale.beige.800

beige/800

#573F1D

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

#FAF4E3

sd.reference.color.scale.yellow.200

yellow/200

#FCE998

sd.reference.color.scale.yellow.300

yellow/300

#EDD857

sd.reference.color.scale.yellow.400

yellow/400

#DEC400

sd.reference.color.scale.yellow.500

yellow/500

#A78E00

sd.reference.color.scale.yellow.600

yellow/600

#816E00

sd.reference.color.scale.yellow.700

yellow/700

#645600

sd.reference.color.scale.yellow.800

yellow/800

#514400

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

#DBF5EA

sd.reference.color.scale.green.200

green/200

#BCEEDD

sd.reference.color.scale.green.300

green/300

#90E4C7

sd.reference.color.scale.green.400

green/400

#46D2A2

sd.reference.color.scale.green.500

green/500

#2EAB80

sd.reference.color.scale.green.600

green/600

#2C7C60

sd.reference.color.scale.green.700

green/700

#146348

sd.reference.color.scale.green.800

green/800

#174A38

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

#C2EAEF

sd.reference.color.scale.skyBlue.300

skyBlue/300

#8DDDE3

sd.reference.color.scale.skyBlue.400

skyBlue/400

#4ACBD4

sd.reference.color.scale.skyBlue.500

skyBlue/500

#00A0AC

sd.reference.color.scale.skyBlue.600

skyBlue/600

#007882

sd.reference.color.scale.skyBlue.700

skyBlue/700

#006066

sd.reference.color.scale.skyBlue.800

skyBlue/800

#004A4F

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

#DDE3FF

sd.reference.color.scale.blue.300

blue/300

#C0CFFD

sd.reference.color.scale.blue.400

blue/400

#8FAEFE

sd.reference.color.scale.blue.500

blue/500

#3B86F9

sd.reference.color.scale.blue.600

blue/600

#056AD8

sd.reference.color.scale.blue.700

blue/700

#0353AA

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

#EEDEF2

sd.reference.color.scale.purple.300

purple/300

#E1C7E7

sd.reference.color.scale.purple.400

purple/400

#CC9FD9

sd.reference.color.scale.purple.500

purple/500

#B36CCD

sd.reference.color.scale.purple.600

purple/600

#9751B0

sd.reference.color.scale.purple.700

purple/700

#7C3694

sd.reference.color.scale.purple.800

purple/800

#5F2B70

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

#FFF4F8

sd.reference.color.scale.pink.200

pink/200

#F9DCE5

sd.reference.color.scale.pink.300

pink/300

#F3C4D3

sd.reference.color.scale.pink.400

pink/400

#F691B6

sd.reference.color.scale.pink.500

pink/500

#E2568F

sd.reference.color.scale.pink.600

pink/600

#B9346C

sd.reference.color.scale.pink.700

pink/700

#9B2657

sd.reference.color.scale.pink.800

pink/800

#761A42

sd.reference.color.scale.pink.900

pink/900

#591734

sd.reference.color.scale.pink.1000

pink/1000

#3E0F24

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