UI Kit

We have a super buttoned up design system, because it's what all the cool kids do. It also helps us build design at scale. Take a look...

Overview

Color

Indigo Radial Gradient

#12b76a

Success

#12b76a

#f04438

Error

#f04438

#f79009

Warning

#f79009

#ecfaff

Light Blue

#ecfaff

#f8f8f8

Web Gray

#f8f8f8

#1b1c3e

Web Indigo

#1b1c3e

#54647a

Medium Gray

#54647a

#f18f20

Carrot Orange

#f18f20

#ea4b24

Flame Red

#ea4b24

#fefefe

White

#fefefe

#0b66b2

Persian Blue

#0b66b2

#2098d5

Electric Blue

#2098d5

#2c2d55

Indigo

#2c2d55

Typography

Headings

Heading H1

Satoshi Regular

64px / 4rem

Sample heading text

Heading H2

Satoshi Regular

52px / 3.75rem

Sample heading text

Heading H3

Satoshi Regular

48px / 3rem

Sample heading text

Heading H4

Satoshi Regular

40px / 2.25rem

Sample heading text

Heading H5

Satoshi Regular

24px / 1.875rem

Sample heading text

Heading H6

Satoshi Regular

20px / 1.5rem

Sample heading text

Body

Body Large

Satoshi

20px / 1.25rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursu.

Body Default

Satoshi

16px / 1rem

Body Small

Satoshi

14px / 0.875rem

Text single

Text Size Large

Satoshi Regular

Satoshi Medium

Satoshi Semi Bold

20px / 1.25rem

Lorem ipsum dolor sit amet consectetur

Text Size Medium

Satoshi Regular

Satoshi Medium

Satoshi Semi Bold

18px / 1.125rem

Lorem ipsum dolor sit amet consectetur

Text Size Regular

Satoshi Regular

Satoshi Medium

Satoshi Semi Bold

16px / 1rem

Lorem ipsum dolor sit amet consectetur

Text Size Small

Satoshi Regular

Satoshi Medium

Satoshi Semi Bold

14px / 0.875rem

Lorem ipsum dolor sit amet consectetur

Rich Text

Heading 1 | Heading 1 Bold

Heading 2 | Heading 2 Bold

Heading 3 | Heading 3 Bold

Heading 4 | Heading 4 Bold

Heading 5 | Heading 5 Bold

Important: call out with a block quote element within rich text to let someone know about something important

Note: use a note by selecting H6 within the Webflow rich text editor and it will look like this super cool note here!

Paragraph text

Bold text

Italic text

Link‍

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Buttons

Button primary

Button Small

Button Default

Button Large

Button Small

Button Default

Button Large

Button secondary

Button Small

Button Default

Button Large

Button Small

Button Default

Button Large

Links

Link Small

Link Default

Link Large

Link Small

Link Default

Link Large

Badges

Small

Medium

Large

Label

Form Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Cards

CABL01

Backgrounds

Text Color

Shadows

shadow-xxsmall

Shadow xxs in Figma.

shadow-xsmall

Shadow xs in Figma.

shadow-small

Shadow sm in Figma.

shadow-medium

Shadow md in Figma.

shadow-large

Shadow xl in Figma.

shadow-xlarge

Shadow 2xl in Figma.

shadow-xxlarge

Shadow 3xl in Figma.