The Blueprint
A Webflow Build Bible
Category
Brand Styles
Created by
Bram Brouwer
© 0000
ARR

Brand Styles

colors

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

Black
HEX
#000000
.
bg-color-
black
.
text-color-
black
White
HEX
#000000
.
bg-color-
white
.
text-color-
white
Blue
HEX
#000000
.
bg-color-
blue
.
text-color-
blue
Blue
HEX
#000000
.
bg-color-
grey
.
text-color-
grey

Themes

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

theme-dark
theme-light
theme-blue
theme-grey

HTML Headings

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading Styles

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

Heading XXL

Heading XL

Heading L

Heading M

Heading S

Heading XS

Text Size

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

.
paragraph
-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

.
text-size-
24px

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.

.
text-size-
48px

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.

.
text-size-
16px

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.

.
text-size-
14px

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.

.
text-size-
12px

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.

.
text-size-
10px

Buttons

icon-button
.
is-skew
icon-button
.
is-vertical
icon-button
.
is-horizontal

Icons

Brands & Platforms

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

svg-
check
svg-
arrow
svg-
chevron
svg-
chevron
svg-
instagram
svg-
linkedin

Rich Text

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Captions
.
rich-text-
regular

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

.
rich-text-
large

Form

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

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