Aurora Component Library

Design tokens, components, and patterns from the Aurora design system.

Colors — Brand

brand.200
#dee5ff
brand.500
#315fff
brand.700
#2751e1
brand.800
#a8bbff
brand.1000
#000d3c

Colors — Text

text.primary
#1a1a1a
text.secondary
#727272
text.tertiary
#727272
text.link
#315fff
text.inputDefault
#9f9f9f
text.reverse
#f6f6f6
text.reverseConsistent
#ffffff
text.errorStrong
#b42318
text.warningStrong
#ec4a0a

Colors — UI

ui.primary
#315fff
ui.background
#f9fafb
ui.backgroundDefault
#ffffff
ui.backgroundReverse
#282828
ui.consistentBlack
#1a1a1a
ui.consistentWhite
#ffffff
ui.border
#d4d4d4
ui.borderWeak
#e9e9e9
ui.borderSelected
#315fff
ui.tableBorder
#f6f6f6
ui.footer
#f6f6f6
ui.hoverHighlight
#3e3e3e
ui.selected
#f8f9ff
ui.icon
#595959
ui.iconBrand
#315fff
ui.error
#d92d20
ui.warning
#dc6803
ui.secure
#12b76a

Colors — Button

button.primaryFill
#315fff
button.primaryFillHover
#597eff
button.primaryText
#f6f6f6
button.secondaryText
#1a1a1a
button.secondaryStroke
#1a1a1a
button.tertiaryBg
#dee5ff
button.tertiaryBgHover
#f8f9ff
button.tertiaryText
#1a1a1a

Colors — Gray Scale

gray.100
#f6f6f6
gray.200
#e9e9e9
gray.400
#595959
gray.500
#9f9f9f
gray.600
#727272
gray.700
#595959
gray.900
#282828
gray.white
#ffffff

Colors — Semantic

success.100
#f6fef9
success.600
#32d583
success.700
#12b76a
warning.300
#fedf89
warning.400
#fec84b
warning.500
#f79009
error.100
#fef3f2
error.600
#f04438
error.700
#d92d20

Typography

Type Scale

h1The quick brown fox jumps over the lazy dog
h2The quick brown fox jumps over the lazy dog
h3The quick brown fox jumps over the lazy dog
h4The quick brown fox jumps over the lazy dog
h5The quick brown fox jumps over the lazy dog
h6The quick brown fox jumps over the lazy dog
bodyLgThe quick brown fox jumps over the lazy dog
bodyMdThe quick brown fox jumps over the lazy dog
bodySmThe quick brown fox jumps over the lazy dog
btnThe quick brown fox jumps over the lazy dog

Font Families

TokenValue
base'Roboto', sans-serif
btn'DM Sans', sans-serif
serif'PT Serif', serif

Font Weights

TokenValuePreview
black900Weight 900
bold700Weight 700
semibold600Weight 600
medium500Weight 500
regular400Weight 400

Buttons — Light Background

Standard Variants

Without Icon

Disabled

Text Variant

Buttons — Dark Background

Buttons — Full Width

Text Inputs

This field is required

Text Area

Select / Dropdown

Checkbox & Radio

Checkboxes

Radio Buttons

Toggle / Switch

Off
On
Disabled Off
Disabled On

Input with Label + Helper Text

We'll never share your email with anyone else.

Spacing Scale

0
0px
2
2px
4
4px
6
6px
8
8px
10
10px
12
12px
16
16px
20
20px
24
24px
28
28px
32
32px
36
36px
40
40px
48
48px
60
60px

Border Radius

radius.0
0px
radius.4
4px
radius.8
8px
radius.12
12px
radius.72
72px

Shadows

shadows.200
shadows.400
shadows.500
shadows.600

Overlays

navBg
navBgMobile
borderSubtle
borderSubtle2
borderLight
darkLight
darkMedium
darkStrong
whiteHigh
whiteMedium
whiteMuted
whiteFaint
whiteHover
whiteHoverStrong
placeholderDarkA
placeholderDarkB
Aurora Design System — Vast.ai