Colors

Replace the image on the right, with one exported from Sketch (or some other design tool). Click on one of the Webflow Swatches below > Click on the "edit" pencil icon to edit the swatch within webflow, and use the eye-dropper tool to grab the color from the image on the right.

Brand

Webflow Swatches
Primary
Secondary
Secondary ALT
Neutral
Transfer Image from Sketch

System Colors

Error
Info
Warning
Success
Background Color Classes
is--bg-primary-100
is--bg-primary-90
is--bg-primary-80
is--bg-primary-70
is--bg-primary-60
is--bg-primary-50
is--bg-primary-40
is--bg-primary-30
is--bg-primary-20
is--bg-primary-10
is--bg-secondary-100
is--bg-secondary-90
is--bg-secondary-80
is--bg-secondary-70
is--bg-secondary-60
is--bg-secondary-50
is--bg-secondary-40
is--bg-secondary-30
is--bg-secondary-20
is--bg-secondary-10
is--bg-secondary-alt-100
is--bg-secondary-alt-90
is--bg-secondary-alt-80
is--bg-secondary-alt-70
is--bg-secondary-alt-60
is--bg-secondary-alt-50
is--bg-secondary-alt-40
is--bg-secondary-alt-30
is--bg-secondary-alt-20
is--bg-secondary-alt-10
is--bg-neutral-100
is--bg-neutral-90
is--bg-neutral-80
is--bg-neutral-70
is--bg-neutral-60
is--bg-neutral-50
is--bg-neutral-40
is--bg-neutral-30
is--bg-neutral-20
is--bg-neutral-10
Text Colors
is--t-primary-10
is--t-primary-20
is--t-primary-30
is--t-primary-40
is--t-primary-50
is--t-primary-60
is--t-primary-70
is--t-primary-80
is--t-primary-90
is--t-primary-100
is--t-secondary-10
is--t-secondary-20
is--t-secondary-30
is--t-secondary-40
is--t-secondary-50
is--t-secondary-60
is--t-secondary-70
is--t-secondary-80
is--t-secondary-90
is--t-secondary-100
is--t-secondary-alt-10
is--t-secondary-alt-20
is--t-secondary-alt-30
is--t-secondary-alt-40
is--t-secondary-alt-50
is--t-secondary-alt-60
is--t-secondary-alt-70
is--t-secondary-alt-80
is--t-secondary-alt-90
is--t-secondary-alt-100
is--t-neutral-10
is--t-neutral-20
is--t-neutral-30
is--t-neutral-40
is--t-neutral-50
is--t-neutral-60
is--t-neutral-70
is--t-neutral-80
is--t-neutral-90
is--t-neutral-100
is--t-success-10
Success-20
is--t-success-30
is--t-success-40
is--t-success-50
is--t-success-60
is--t-success-70
is--t-success-80
is--t-success-90
is--t-success-100
is--t-info-10
is--t-info-20
is--t-info-30
is--t-info-40
is--t-info-50
is--t-info-60
is--t-info-70
is--t-info-80
is--t-info-90
is--t-info-100
is--t-warning-10
is--t-warning-20
is--t-warning-30
is--t-warning-40
is--t-warning-50
is--t-warning-60
is--t-warning-70
is--t-warning-80
is--t-warning-90
is--t-warning-100
is--t-eror-10
is--t-error-20
is--t-error-30
is--t-error-40
is--t-error-50
is--t-error-60
is--t-error-70
is--t-error-80
is--t-error-90
is--t-error-100

Typography

Headings

Heading

Heading

Heading

Heading

Heading
Heading

Display

Display

Display

Display

Display
Display
Body Text

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 cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

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 cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

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 cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Icons

You can view all the icons available for free on Font Awesome. You'll want to copy/paste the unicode glyph near the top of the icon page.

Font Awesome Solid
icon
is--solid
default - 14px
is--medium - 18px
is--large - 24px
is--xlarge - 32px
Font Awesome Brands
icon
is--brands

Buttons & Links