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

Sunrise Gradient

Stackit Primary Gradient

Light Grey

#b92c97

Magenta

#b92c97

#ff6382

Light Pink

#ff6382

#fdc07d

Orange Fade

#fdc07d

#ffffff

White

#ffffff

#1c1c1c

Black

#1c1c1c

#f79009

Warning

#f79009

#f04438

Error

#f04438

#12b76a

Success

#12b76a

Gradient Purple Swirl

#D7C6FA

Lavender

#D7C6FA

#fcffff

Whitesmoke

#fcffff

#29e2d7

Mint

#29e2d7

#1C1C1C

Onyx

#1C1C1C

#313131

Dark Engine

#313131

#ee46bc

Flamingo

#ee46bc

#ff6c71

Watermelon

#ff6c71

#d0d5dd

Grey

#d0d5dd

#5d1beb

Stackit Purple

#5d1beb

Typography

Headings

Heading H1

Graphik Semi Bold

64px / 4rem

Sample heading text

Heading H2

Graphik Semi Bold

52px / 3.75rem

Sample heading text

Heading H3

Graphik Semi Bold

48px / 3rem

Sample heading text

Heading H4

Graphik Semi Bold

40px / 2.25rem

Sample heading text

Heading H5

Graphik Semi Bold

24px / 1.875rem

Sample heading text

Heading H6

Graphik Semi Bold

20px / 1.5rem

Sample heading text

Body

Body Large

Graphik

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

Graphik

16px / 1rem

Body Small

Graphik

14px / 0.875rem

Text single

Text Size Large

Graphik Regular

Graphik Medium

Graphik Semi Bold

20px / 1.25rem

Lorem ipsum dolor sit amet consectetur

Text Size Medium

Graphik Regular

Graphik Medium

Graphik Semi Bold

18px / 1.125rem

Lorem ipsum dolor sit amet consectetur

Text Size Regular

Graphik Regular

Graphik Medium

Graphik Semi Bold

16px / 1rem

Lorem ipsum dolor sit amet consectetur

Text Size Small

Graphik Regular

Graphik Medium

Graphik 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.