Design tokens

All 221 tokens of the Smart Data design system: colour, typography, spacing and layout, shape, depth and motion.

About
Colour
Typography
Spacing and layout
Shape, depth and motion

One source for web and brand

All 221 tokens from the Smart Data design system, exactly as stored in the brand brain. Click a token name to copy it. Values that point at another token show what they resolve to.

Tokens as CSS Tokens as JSON

Colour

Primitive · brand15 tokens

#322045

#1E1329

#D097E7

#C686D9

#DFB8EF

#FE6E4E

#E85A3A

#FE7253

#83230E

#19181A

#28352B

#BCCCC1

#E7ECE4

#FFFFFF

#FAF9F3

Primitive · purple ramp10 tokens

#1E1329

#281A38

#322045

#422C55

#5B3D7B

#712191

#9A6FC0

#D097E7

#E4DCE8

#F2EDF6

Primitive · neutral ramp10 tokens

#19181A

#2A2A2C

#373739

#545058

#777179

#A6A1AB

#D2CDE6

#E4E2DF

#EFEEEC

#F7F6F4

Semantic · surface8 tokens

var(--sds-paper)#FFFFFF

var(--sds-off-white)#E7ECE4

var(--sds-paper)#FFFFFF

var(--sds-mauve)#322045

var(--sds-mauve-ink)#1E1329

var(--sds-sunset)#FE6E4E

var(--sds-off-white)#E7ECE4

rgba(25, 24, 26, 0.55)

Semantic · text9 tokens

var(--sds-off-black)#19181A

var(--sds-grey-600)#545058

var(--sds-grey-500)#777179

var(--sds-mauve)#322045

var(--sds-paper)#FFFFFF

rgba(255,255,255,0.72)

var(--sds-sunset)#FE6E4E

var(--sds-paper)#FFFFFF

var(--sds-sunset)#FE6E4E

Semantic · border5 tokens

var(--sds-grey-200)#E4E2DF

var(--sds-grey-300)#D2CDE6

rgba(255,255,255,0.14)

var(--sds-sunset)#FE6E4E

var(--sds-light-mauve)#D097E7

Semantic · interaction18 tokens

var(--sds-sunset)#FE6E4E

var(--sds-sunset-hi)#E85A3A

var(--sds-rust)#83230E

var(--sds-mauve)#322045

var(--sds-purple-600)#422C55

var(--sds-sunset-hi)#E85A3A

var(--sds-sunset)#FE6E4E

var(--sds-coral-hi)#FE7253

var(--sds-light-mauve)#D097E7

var(--sds-light-mauve-lo)#DFB8EF

var(--sds-light-mauve-hi)#C686D9

var(--sds-mauve)#322045

var(--sds-bone)#FAF9F3

var(--sds-off-white)#E7ECE4

#897991

var(--sds-purple-500)#5B3D7B

rgba(255,255,255,0.08)

rgba(25,24,26,0.04)

Semantic · status8 tokens

#2E7D5B

#E6F1EC

#C77A12

#FBEFD9

#B23A1B

#FBE6DF

var(--sds-purple-400)#712191

var(--sds-purple-50)#F2EDF6

Dataviz3 tokens

var(--sds-sunset)#FE6E4E

rgba(255,255,255,0.55)

rgba(255,255,255,0.18)

Typography

Families3 tokens

Aa Gg"Space Grotesk", "Helvetica Neue", Arial, sans-serif

Aa Gg"DM Sans", "Helvetica Neue", Arial, sans-serif

Aa GgArial, "Helvetica Neue", sans-serif

Weights5 tokens

Aa300

Aa400

Aa500

Aa600

Aa700

Size17 tokens

Aa128px

Aa72px

Aa60px

Aa48px

Aa32px

Aa26px

Aa20px

Aa18px

Aa16px

Aa14px

Aa12px

Aa15px

Aa14px

Aa13px

Lineheight20 tokens

136px

78px

68px

56px

38px

32px

26px

30px

28px

24px

20px

16px

14px

15px

14px

18px

1.05

1.25

1.5

Letterspacing9 tokens

-2px

0px

2px

1px

Spacing and layout

Spacing23 tokens

0px

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

112px

128px

var(--space-3)12px

var(--space-4)16px

var(--space-6)24px

var(--space-8)32px

var(--space-6)24px

var(--space-20)80px

var(--space-28)112px

var(--space-16)64px

Layout · containers13 tokens

1280px

1440px

720px

80px

20px

1180px

12

var(--space-6)24px

640px

768px

1024px

1280px

1440px

Shape, depth and motion

Radius11 tokens

0px

4px

6px

8px

12px

20px

28px

999px

var(--radius-sm)6px

var(--radius-lg)12px

var(--radius-md)8px

Border3 tokens

1px

1.5px

1px

Shadow9 tokens

0 1px 2px rgba(25, 24, 26, 0.06)

0 1px 3px rgba(25, 24, 26, 0.08), 0 1px 2px rgba(25, 24, 26, 0.04)

0 4px 12px rgba(50, 32, 69, 0.10), 0 2px 4px rgba(50, 32, 69, 0.06)

0 12px 28px rgba(50, 32, 69, 0.14), 0 4px 8px rgba(50, 32, 69, 0.06)

0 24px 56px rgba(30, 19, 41, 0.22)

0 0 0 3px rgba(208, 151, 231, 0.45)

0 8px 28px rgba(254, 110, 78, 0.32)

var(--shadow-md)0 4px 12px rgba(50, 32, 69, 0.10), 0 2px 4px rgba(50, 32, 69, 0.06)

var(--shadow-lg)0 12px 28px rgba(50, 32, 69, 0.14), 0 4px 8px rgba(50, 32, 69, 0.06)

Opacity4 tokens

0.4

0.64

0.55

0.25

Motion9 tokens

80ms

150ms

220ms

360ms

560ms

cubic-bezier(0.2, 0.0, 0.2, 1)

cubic-bezier(0.16, 1, 0.3, 1)

cubic-bezier(0.4, 0.0, 1, 1)

cubic-bezier(0.34, 1.56, 0.64, 1)

Zindex9 tokens

0

10

100

200

400

600