Nielsen Design System

Design Tokens

Design tokens are an abstract, human-centered way to store variables. We use tokens instead of hard-coded values because they provide consistency and are easier for humans to reference.

View in Figma

View MAF Storybook

Color Tokens

Color	Value	Token
	#FFFFFF	white
	#FAFAFA	gray-0
	#F1F2F3	gray-100
	#DDDEE4	gray-200
	#BABDC9	gray-300
	#989DAE	gray-400
	#787D91	gray-500
	#65697B	gray-600
	#484C5B	gray-700
	#363945	gray-800
	#22252F	gray-900
	#181921	gray-1000
	#FBFAFF	blurple-0
	#F1F0FE	blurple-100
	#DCD9FD	blurple-200
	#C2BCFB	blurple-300
	#958CF8	blurple-400
	#6A46FE	blurple-500
	#4B31AF	blurple-600
	#332277	blurple-700
	#291B5F	blurple-800
	#190F43	blurple-900
	#130B32	blurple-1000
	#F7FDFD	aqua-0
	#EBF9F9	aqua-100
	#D0F1F1	aqua-200
	#A0E3E3	aqua-300
	#72D5D5	aqua-400
	#32BAB9	aqua-500
	#03A0A0	aqua-600
	#027878	aqua-700
	#005252	aqua-800
	#013C3C	aqua-900
	#002424	aqua-1000
	#FEF6FD	eggplant-0
	#FCEDFA	eggplant-100
	#F4CDED	eggplant-200
	#E99BDC	eggplant-300
	#DE68CA	eggplant-400
	#BC1AA1	eggplant-500
	#9D0784	eggplant-600
	#760563	eggplant-700
	#610552	eggplant-800
	#4E0441	eggplant-900
	#300328	eggplant-1000
	#F5FAFE	blue-0
	#E2F1FD	blue-100
	#C5E4FB	blue-200
	#8CC9F8	blue-300
	#54AEF3	blue-400
	#1E95EF	blue-500
	#0D7DD3	blue-600
	#0B67AD	blue-700
	#095086	blue-800
	#063960	blue-900
	#002142	blue-1000
	#F6FEFA	green-0
	#E5FBF0	green-100
	#C9F8E2	green-200
	#87E8BB	green-300
	#4BD293	green-400
	#24BC75	green-500
	#29A36A	green-600
	#218355	green-700
	#186240	green-800
	#054D2B	green-900
	#03301B	green-1000
	#FFF5F7	red-0
	#FDE2E6	red-100
	#FBBCC4	red-200
	#F28E9D	red-300
	#ED5A70	red-400
	#D30D4C	red-500
	#AD0B3E	red-600
	#860931	red-700
	#600623	red-800
	#4D051C	red-900
	#300311	red-1000
	#FFF8F0	orange-0
	#FFF1E1	orange-100
	#FEE2C3	orange-200
	#FAC689	orange-300
	#F8A94F	orange-400
	#FA8C0F	orange-500
	#D77709	orange-600
	#A05703	orange-700
	#764105	orange-800
	#4D2B05	orange-900
	#301B03	orange-1000
	#FFFCF0	yellow-0
	#FFFAE0	yellow-100
	#FFF5C2	yellow-200
	#FFEB85	yellow-300
	#FFE047	yellow-400
	#FFD500	yellow-500
	#E0BB00	yellow-600
	#B89F00	yellow-700
	#7A6A00	yellow-800
	#524700	yellow-900
	#292300	yellow-1000

Typography Tokens

Font Family

Token	Font Size
font-family	"Inter", "Noto Sans", sans-serif

Font Weight

*Note:* In Figma this is Medium weight. It's sized down to 400 on the web because of browser antialiasing.

Token	Font Weight
weight-100*	400
weight-200	600
weight-300	700

Token	Value
size-0	11px
size-100	12px
size-200	13px
size-300	14px
size-400	15px
size-500	16px
size-600	18px
size-700	20px
size-800	24px
size-900	32px
size-1000	48px

Line Height

Token	Line Height
lh-0	1
lh-100	12px
lh-200	16px
lh-300	20px
lh-400	24px
lh-500	28px
lh-600	32px
lh-700	48px
lh-800	56px

Letter Spacing

Token	Value
ls-0	calc(11 * -0.01)px
ls-100	calc(12 * -0.01)px
ls-200	calc(13 * -0.01)px
ls-300	calc(14 * -0.015)px
ls-400	calc(15 * -0.015)px
ls-500	calc(16 * -0.015)px
ls-600	calc(18 * -0.015)px
ls-700	calc(20 * -0.015)px
ls-800	calc(24 * -0.02)px
ls-900	calc(32 * -0.02)px
ls-1000	calc(48 * -0.02)px

Spacing Tokens

Spacing

Token	Value (pixels)	Value (rems)
space-0	0px	0rem
space-100	2px	0.125rem
space-200	4px	0.25rem
space-300	8px	0.5rem
space-400	12px	0.75rem
space-500	16px	1rem
space-600	20px	1.25rem
space-700	24px	1.5rem
space-800	32px	2rem
space-900	48px	3rem
space-1000	64px	4rem

Layout

Token	Value (pixels)	Value (rems)
layout-0	192px	12rem
layout-100	224px	14rem
layout-200	256px	16rem
layout-300	320px	20rem
layout-400	384px	24rem
layout-500	512px	32rem
layout-600	768px	48rem
layout-700	1024px	64rem
layout-800	1280px	80rem
layout-900	1600px	100rem
layout-1000	1920px	120rem

UI Tokens

Borders

Token	Value
border-0	0px
border-100	2px
border-200	4px

Radii

Token	Value
radii-0	0px
radii-100	4px
radii-200	6px
radii-300	8px
radii-400	12px
radii-500	16px
radii-600	32px

Elevation

Token	Value
elevation-absolute-bottom	-999
elevation-absolute-top	999
elevation-0	0
elevation-100	100
elevation-150	150
elevation-200	200
elevation-250	250
elevation-300	300
elevation-350	350
elevation-400	400
elevation-450	450

Shadows

Token	Value
shadow-0	0 0 0 rgba(17, 18, 24, 0)
shadow-100	0 0 12px rgba(17, 18, 24, 0.08)
shadow-200	0 0 8px rgba(17, 18, 24, 0.16)
shadow-300	0 0 12px 2px rgba(17, 18, 24, 0.20)
shadow-400	0 0 8px 2px rgba(17, 18, 24, 0.64)
shadow-500	0 0 12px 4px rgba(17, 18, 24, 0.80)
shadow-600	0 0 16px 12px rgba(17, 18, 24, 0.96)
shadow-active-light-primary	0px 0px 0px 6px rgba(149, 140, 248, 0.16)
shadow-active-light-neutral	0px 0px 0px 6px rgba(120, 125, 145, 0.16)
shadow-active-light-danger	0px 0px 0px 6px rgba(230, 59, 49, 0.24)
shadow-active-dark-primary	0px 0px 0px 6px rgba(99, 70, 254, 0.16)
shadow-active-dark-neutral	0px 0px 0px 6px rgba(120, 125, 145, 0.32)
shadow-active-dark-danger	0px 0px 0px 6px rgba(230, 59, 49, 0.16)

Table of Contents

Colors Typography Spacing UI