Design tokens

Reusable values for things like color, spacing, and font sizes

Overview

Tokens are the basic values used by the design system to represent color, spacing, font sizes, and other visual styles.

Design tokens can be referenced to create interfaces that appear similar to Rivet on platforms where the design system itself cannot be loaded, such as HTML email or third-party software.

Border radius

Border radius design tokens
Example	Value	Token
	.125rem	`$border-radius-sm`
	.25rem	`$border-radius-md`
	.5rem	`$border-radius-lg`
	999rem	`$border-radius-circle`

Breakpoints

Breakpoint design tokens
Example	Value	Token
`@media (min-width: 30em)`	30em	`$breakpoint-sm`
`@media (min-width: 46.25em)`	46.25em	`$breakpoint-md`
`@media (min-width: 67.5em)`	67.5em	`$breakpoint-lg`
`@media (min-width: 78.75em)`	78.75em	`$breakpoint-xl`
`@media (min-width: 87.5em)`	87.5em	`$breakpoint-xxl`

Color

IU Black

Rivet color utilities
Example	Value	Token
	#F8F9FA	`$color-black-000`
	#E2E7E9	`$color-black-100`
	#A0ABB4	`$color-black-200`
	#75838F	`$color-black-300`
	#4C5A69	`$color-black-400`
Base black	#243142	`$color-black-500`
	#182534	`$color-black-600`
	#0E1825	`$color-black-700`

IU Blue

Rivet color utilities
Example	Value	Token
	#EDFAFD	`$color-blue-000`
	#C6ECF6	`$color-blue-100`
	#94D2E7	`$color-blue-200`
	#63B1D3	`$color-blue-300`
	#328BB8	`$color-blue-400`
Base blue	#006298	`$color-blue-500`
	#004F80	`$color-blue-600`
	#00385F	`$color-blue-700`

IU Crimson

Rivet color utilities
Example	Value	Token
	#FFF7F8	`$color-crimson-000`
	#FFD6DB	`$color-crimson-100`
	#FF636A	`$color-crimson-200`
	#F23A3F	`$color-crimson-300`
	#DC231E	`$color-crimson-400`
Base crimson	#990000	`$color-crimson-500`
	#800000	`$color-crimson-600`
	#5A0C0C	`$color-crimson-700`

IU Gold

Rivet color utilities
Example	Value	Token
	#FFFCEB	`$color-gold-000`
	#FFF4C6	`$color-gold-100`
	#FFE694	`$color-gold-200`
	#FFD563	`$color-gold-300`
	#FFC132	`$color-gold-400`
Base gold	#FFAA00	`$color-gold-500`
	#A36B00	`$color-gold-600`
	#613D00	`$color-gold-700`

IU Green

Rivet color utilities
Example	Value	Token
	#F9F9F0	`$color-green-000`
	#DEE8C6	`$color-green-100`
	#A7D094	`$color-green-200`
	#63B363	`$color-green-300`
	#329345	`$color-green-400`
Base green	#056E41	`$color-green-500`
	#005C31	`$color-green-600`
	#004421	`$color-green-700`

IU Orange

Rivet color utilities
Example	Value	Token
	#FFF3F0	`$color-orange-000`
	#FFCDC0	`$color-orange-100`
	#FFA690	`$color-orange-200`
	#FF7E60	`$color-orange-300`
	#F75930	`$color-orange-400`
Base orange	#DF3603	`$color-orange-500`
	#B11C00	`$color-orange-600`
	#690A00	`$color-orange-700`

IU Purple

Rivet color utilities
Example	Value	Token
	#FBF8FB	`$color-purple-000`
	#DECADC	`$color-purple-100`
	#C09EBB	`$color-purple-200`
	#A07498	`$color-purple-300`
	#7D4C73	`$color-purple-400`
Base purple	#59264D	`$color-purple-500`
	#48183D	`$color-purple-600`
	#330D2B	`$color-purple-700`

Font

Font design tokens
Example	Value	Token
Indiana University	'BentonSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif	`$font-sans`
Indiana University	'GeorgiaPro', Georgia, 'Times New Roman', Times, serif	`$font-serif`
Indiana University	monospace	`$font-mono`
Indiana University	700	`$font-bold`
Indiana University	500	`$font-medium`
Indiana University	400	`$font-regular`

Shadow

Shadow design tokens
Example	Value	Token
	0 .1875rem .375rem rgb(36, 49, 66, .07)	`$shadow-subtle`
	0 .25rem .5rem rgb(36, 49, 66, .16)	`$shadow-standard`
	0 .25rem 1rem rgb(36, 49, 66, .2)	`$shadow-heavy`

Spacing

Spacing design tokens
Example	Value	Token
xxs spacing example	.25rem / 4px	$spacing-xxs
xs spacing example	.5rem / 8px	$spacing-xs
sm spacing example	1rem / 16px	$spacing-sm
md spacing example	1.5rem / 24px	$spacing-md
lg spacing example	2rem / 32px	$spacing-lg
xl spacing example	2.5rem / 40px	$spacing-xl
xxl spacing example	4rem / 64px	$spacing-xxl
3-xl spacing example	8rem / 128px	$spacing-3-xl
4-xl spacing example	12rem / 192px	$spacing-4-xl

Type scale

Type scale design tokens
Example	Value	Token
Indiana University	.75rem / 12px	`$ts-12, $ts-xxs`
Indiana University	.875rem / 14px	`$ts-14, $ts-xs`
Indiana University	1rem / 16px	`$ts-16, $ts-base`
Indiana University	1.125rem / 18px	`$ts-18,`
Indiana University	1.25rem / 20px	`$ts-20, $ts-sm`
Indiana University	1.4375rem / 23px	`$ts-23,`
Indiana University	1.625rem / 26px	`$ts-26, $ts-md`
Indiana University	1.8125rem / 29px	`$ts-29,`
Indiana University	2rem / 32px	`$ts-32, $ts-lg`
Indiana University	2.25rem / 36px	`$ts-36,`
Indiana University	2.5625rem / 41px	`$ts-41, $ts-xl`
Indiana University	2.875rem / 46px	`$ts-46,`
Indiana University	3.25rem / 52px	`$ts-52, $ts-xxl`

Width

Width design tokens
Example	Value	Token
xxs spacing example	4rem / 64px	$width-xxs
xs spacing example	8rem / 128px	$width-xs
sm spacing example	12rem / 192px	$width-sm
md spacing example	16rem / 256px	$width-md
lg spacing example	20rem / 320px	$width-lg
xl spacing example	24rem / 384px	$width-xl
xxl spacing example	32rem / 512px	$width-xxl
3-xl spacing example	40rem / 640px	$width-3-xl
4-xl spacing example	48rem / 768px	$width-4-xl

Z-index

Z-index design tokens
Example	Value	Token
`z-index: 0`	0	`$z-index-0`
`z-index: 100`	100	`$z-index-100`
`z-index: 200`	200	`$z-index-200`
`z-index: 300`	300	`$z-index-300`
`z-index: 400`	400	`$z-index-400`
`z-index: 500`	500	`$z-index-500`
`z-index: 600`	600	`$z-index-600`
`z-index: 700`	700	`$z-index-700`
`z-index: 800`	800	`$z-index-800`
`z-index: 900`	900	`$z-index-900`
`z-index: 1000`	1000	`$z-index-1000`