Design System

All tokens, components, and patterns in one place for review.

Colors

Color Palette

Sailor
950
#1B2436
900
#283852
800
#293D5B
700
#314B73
600
#3B5D8E
500
#4D76AA
400
#7093C0
300
#A2B9D7
200
#CDD9EA
100
#E9EDF5
50
#F4F6FB
Clay
900
#91624D
800
#A17966
700
#C1A598
600
#D7C4BA
500
#F2EBE6
400
#F8F1EC
300
#FCF7F3
200
#FEFBF8
100
#FDFBFA
Coral
900
#A0141A
800
#C1141C
700
#E51D26
600
#F83B43
500
#FF5E65
400
#FFA0A4
300
#FFC7C9
200
#FFE1E2
100
#FFF1F2
Neutral
900
#28272A
800
#413F46
700
#54525B
600
#73717A
500
#ABA9B2
400
#D5D4D8
300
#E5E4E7
200
#F4F4F5
100
#FAFAFA
Typography

Type Scale

Display XL
96px
The quick brown fox
Display
72px
The quick brown fox
Heading LG
56px
The quick brown fox
Heading
40px
The quick brown fox
Heading SM
32px
The quick brown fox
Subhead
24px
The quick brown fox
Body LG
18px
The quick brown fox
Body
16px
The quick brown fox
Body SM
14px
The quick brown fox
Caption
12px
The quick brown fox
BW Gradual (Display)
Instrument Sans (Body)
Buttons

Button Variants

Primary CTAOutlineFree sign upLogin
Cards

Card Patterns

Suppliers
Grow your business

Clay-300 background with rounded corners.

Buyers
Faster sourcing

White card with border and tile shadow.

Statement
Dark card

Sailor-800 for dark sections.

Inputs

Form Elements

Radii & Shadows

Border Radius & Shadows

sm
md
lg
xl
2xl
pill
tile
lift
glow
Links

Link Styles

Coral link with underlineCoral link no underlineSailor link with underline
Components

Section Components

See the full homepage for all live component examples including: