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
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 |
Base black
|
#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 |
Base blue
|
#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 |
Base crimson
|
#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 |
Base gold
|
#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 |
Base green
|
#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 |
Base orange
|
#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 |
Base purple
|
#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 |