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.

Fonts

01

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

  1. Webflow is an innovative tool
  2. Webflow is an innovative tool
  3. Webflow is an innovative tool
  4. Webflow is an innovative tool
  5. 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

Colors

02

Beige También

#FFDAA7

Dark Night

#1A1A1A

Dark 100

#000000

White broken

#F7E7D1

Cookie

04

Form

05

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

GRid system

Container

Elements

Container

Row

Elements

Row

Col

Elements

Col
Col
Col
Col

Desktop

Grid

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-6
col-lg-12

Tablet

Grid

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-6
col-md-12
md-no-margin

Landscape

Grid

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-6
col-sm-12
sm-no-margin

Mobile

Grid

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-6
col-xs-12
xs-no-margin

Margin 1/2 col

Grid

col
col
col
col

Align start

Grid

Align start

Align center

Grid

Align center

Align end

Grid

Align end

Align stretch

Grid

Align stretch

Justify start

Grid

Justify start

Justify center

Grid

Justify center

Justify end

Grid

Justify end

Justify between

Grid

Justify between
Justify between

Justify around

Grid

Justify around
Justify around

Display

Grid

md--hide
sm--hide
xs--hide