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

Brand Styles

Color

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
#070A0D
.
bg-color-
black
.
text-color-
black
Alabaster
HEX
#E3DAC5
.
bg-color-
alabaster
.
text-color-
alabaster
White
HEX
#FFFFFF
.
bg-color-
white
.
text-color-
white
Blue
HEX
#6084B7
.
bg-color-
blue
.
text-color-
blue

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.

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
h1

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
h2

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
h3

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
h4
Aa
Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
h5
Aa
Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
h6

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.

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

Aa

Font size
00
Text-Weight
700
Line Height
80%
Letter Spacing
-2.5%
Text-Style
None
.
heading-style-
448px

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.

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
text-size-
48px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
text-size-
48px

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

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
text-size-
48px

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

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
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.

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
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.

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
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.

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
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. Nunc ut sem vitae risus tristique posuere.

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
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. Nunc ut sem vitae risus tristique posuere.

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
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. Nunc ut sem vitae risus tristique posuere.

Font Size
00
Text-Weight
00
Line Height
00
Letter Spacing
00
Text-Style
00
.
text-size-
48px

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.