Style guide

Unleash creativity

Clone the style guide

Our style guide helps simplify the building process for your website. It serves as a centralized reference for design elements such as typography, color palettes, icons, columns system and more. With a style guide in place, it’s easier to ensure that design elements are cohesive and align with the overall branding strategy.

Unleash creativity

01

Fonts

H1

Neue Haas Grotesk

Heading

H2

Neue Haas Grotesk

Heading

H3

Neue Haas Grotesk

Heading

H4

Neue Haas Grotesk

Heading

H5

Neue Haas Grotesk

Heading

H6

Neue Haas Grotesk

Heading

p

Neue Haas Grotesk

Jim, you’re 6’11 and you weigh 90 pounds. Gumby has a better body than you. Boom, roasted. Dwight, you’re a kiss ass. Boom, roasted. Pam, you failed art school. Boom, roasted. Meredith, you’ve slept with so many guys, you’re starting to look like one. Boom, roasted. Kevin, I can’t decide between a fat joke and a dumb joke. Boom, roasted. Creed, your teeth called, your breath stinks. Boom, roasted.

Ordered list

Neue Haas Grotesk

Webflow is an innovative tool
Webflow is an innovative tool
Webflow is an innovative tool
Webflow is an innovative tool
Webflow is an innovative tool

Ordered list

Neue Haas Grotesk

Webflow is an innovative tool
Webflow is an innovative tool
Webflow is an innovative tool
Webflow is an innovative tool
Webflow is an innovative tool

02

Colors

Beige También

#FFDAA7

Dark Night

#1A1A1A

Dark 100

#000000

White broken

#F7E7D1

03

Buttons

Let's talk

This is a link

04

Cookies

05

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

GRid system

Elements

Container

Elements

Row

Elements

Col

Grid

Desktop

col-lg-1

col-lg-11

col-lg-2

col-lg-10

col-lg-3

col-lg-9

col-lg-4

col-lg-8

col-lg-5

col-lg-7

col-lg-6

col-lg-12

Grid

Tablet

col-md-1

col-md-11

col-md-2

col-md-10

col-md-3

col-md-9

col-md-4

col-md-8

col-md-5

col-md-7

col-md-6

col-md-12

md-no-margin

Grid

Landscape

col-sm-1

col-sm-11

col-sm-2

col-sm-10

col-sm-3

col-sm-9

col-sm-4

col-sm-8

col-sm-5

col-sm-7

col-sm-6

col-sm-12

sm-no-margin

Grid

Mobile

col-xs-1

col-xs-11

col-xs-2

col-xs-10

col-xs-3

col-xs-9

col-xs-4

col-xs-8

col-xs-5

col-xs-7

col-xs-6

col-xs-12

xs-no-margin

Grid

Margin 1/2 col

col

Align start

Grid

Align start

Grid

Align center

Grid

Align end

Grid

Align stretch

Justify start

Grid

Justify start

Grid

Justify center

Grid

Justify end

Grid

Justify between

Grid

Justify around

Grid

Display

md--hide

sm--hide

xs--hide