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.

Avoid purely aesthetic customizations

Rivet utilities should be used to fine-tune page layouts or create interface elements the built-in components don't cover. Utilities should not be used to make changes that are purely aesthetic in nature. For more information, visit the Extending Rivet page.

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`
	#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`
	#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`
	#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`
	#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`
	#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`
	#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`
	#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`