Skip to main content

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