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
Border radius
Example | Value | Token |
---|---|---|
.125rem | $border-radius-sm |
|
.25rem | $border-radius-md |
|
.5rem | $border-radius-lg |
|
999rem | $border-radius-circle |
Breakpoints
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
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
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
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
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
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
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
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
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
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
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
Example | Value | Token |
---|---|---|
Indiana University | .75rem / 12px |
$ts-12,
|
Indiana University | .875rem / 14px |
$ts-14,
|
Indiana University | 1rem / 16px |
$ts-16,
|
Indiana University | 1.125rem / 18px |
$ts-18,
|
Indiana University | 1.25rem / 20px |
$ts-20,
|
Indiana University | 1.4375rem / 23px |
$ts-23,
|
Indiana University | 1.625rem / 26px |
$ts-26,
|
Indiana University | 1.8125rem / 29px |
$ts-29,
|
Indiana University | 2rem / 32px |
$ts-32,
|
Indiana University | 2.25rem / 36px |
$ts-36,
|
Indiana University | 2.5625rem / 41px |
$ts-41,
|
Indiana University | 2.875rem / 46px |
$ts-46,
|
Indiana University | 3.25rem / 52px |
$ts-52,
|
Width
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
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 |