UI Kit
UI Colors
Primary colors
#8FD6BD
#154380
#0A0A0A
#FFFFFF
Secondary colors
#ABE0CE
#F3F6F9
Grayscale
#393A3D
#505154
#6D6E70
#A7A9AB
#C8C9CC
#DDDEE0
#ECECEC
#A7A9AB
#A7A9AB
Accent Colors
#F16E6E
#FFC087
#FFEE93
#ABE0CE
#53CBFF
#DCABED
Utility Colors
#F16E6E
#ABE0CE
#53CBFF
Extra Colors
#E8ECF2
#D0D9E6
Fonts
Font Family
Font Name
Font Weight
Filson Soft
Bold
700
Filson Soft
Medium
500
Filson Soft
Regular
400
Museo Sans Rounded
700
600
Museo Sans Rounded
500
400
Global Headline Styles
Dekstop
Mobile
Font: Filson Soft | Weight: Bold | Size: 64px | Line Height: 68px | Letter Spacing: -1%
Font: Filson Soft | Weight: Bold | Size: 48px | Line Height: 54px | Letter Spacing: -1%
Header Text 1
Font: Filson Soft | Weight: Bold | Size: 48px | Line Height: 56px | Letter Spacing: -1%
Header Text 1
Font: Filson Soft | Weight: Bold | Size: 36px | Line Height: 42px | Letter Spacing: -1%
Header Text 2
Font: Filson Soft | Weight: Bold | Size: 34px | Line Height: 42px | Letter Spacing: -1%
Header Text 2
FFont: Filson Soft | Weight: Bold | Size: 34px | Line Height: 42px | Letter Spacing: -1%
Header Text 3
Font: Filson Soft | Weight: Medium | Size: 34px | Line Height: 42px | Letter Spacing: -1%
Header Text 3
Font: Filson Soft | Weight: Medium | Size: 28px | Line Height: 36px | Letter Spacing: -1%
Header Text 4
Font: Filson Soft | Weight: Medium | Size: 28px | Line Height: 36px | Letter Spacing: -1%
Header Text 4
Font: Filson Soft | Weight: Medium | Size: 24px | Line Height: 32px | Letter Spacing: -1%
Header Text 5
Font: Filson Soft | Weight: Medium | Size: 24px | Line Height: 32px | Letter Spacing: -1%
Header Text 5
Font: Filson Soft | Weight: Medium | Size: 24px | Line Height: 32px | Letter Spacing: -1%
Header Text 6
Font: Filson Soft | Weight: Medium | Size: 0px | Line Height: 0px | Letter Spacing: -1%
Header Text 6
Font: Filson Soft | Weight: Medium | Size: 0px | Line Height: 0px | Letter Spacing: -1%
Body Copy Styles
Desktop + Links
Mobile + Links
Body Copy Large /
Body Copy Large LinkFont: Museo Sans Rounded | Weight: 500 | Size: 24px | Line Height: 32px | Letter Spacing: 0%
Body Copy Large /
Body Copy Large LinkFont: Museo Sans Rounded | Weight: 500 | Size: 24px | Line Height: 32px | Letter Spacing: 0%
Body Copy Medium /
Body Copy Medium LinkFont: Museo Sans Rounded | Weight: 500 | Size: 18px | Line Height: 28px | Letter Spacing: 0%
Body Copy Medium /
Body Copy Medium LinkFont: Museo Sans Rounded | Weight: 500 | Size: 18px | Line Height: 28px | Letter Spacing: 0%
Body Copy Small /
Body Copy Small LinkFont: Museo Sans Rounded | Weight: 500 | Size: 16px | Line Height: 24px | Letter Spacing: 0%
Body Copy Small /
Body Copy Small LinkFont: Museo Sans Rounded | Weight: 500 | Size: 16px | Line Height: 24px | Letter Spacing: 0%
Body Copy Extra Small /
Body Copy Extra Small LinkFont: Museo Sans Rounded | Weight: 500 | Size: 14px | Line Height: 20px | Letter Spacing: 0%
Body Copy Extra Small /
Body Copy Extra Small LinkFont: Museo Sans Rounded | Weight: 500 | Size: 14px | Line Height: 20px | Letter Spacing: 0%
Buttons + Links
Small Buttons
Small Buttons w/ Icon
Desktop Button Spacing
Desktop Small Button Spacing
Mobile Button Spacing
Nav Links
Animation Note: On hover, text link will be underlined. Off hover
will reverse the animation.
Icons
Arrows Large
Arrow Small
Utility
Icons
Badges
Pagination
the Left and Right ends of the viewport.
Desktop Stickers
Mobile Stickers
Form Elements
Default
Active
Focused
Disabled
Filter Elements
Updated in UI Kit (9/18/22)
Typography
Header Text 1
Line Height Updated to: 56px
Extra Colors
#E8ECF2
#D0D9E6
Rating Stars
Small Buttons
Small Buttons w/ Icon
Utility Icons
Icons
Badges
Quantity Selector
Desktop Stickers
Mobile Stickers