The Blueprint
A Webflow Build Bible
Category
Brand Styles
Created by
UNCOMMON
© 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.

Color
HEX
#FBAE34
.
bg-color-
yellow
.
text-color-
yellow
Color
HEX
#9F3D93
.
bg-color-
purple
.
text-color-
purple
Color
HEX
#0F93FF
.
bg-color-
blue
.
text-color-
blue
Color
HEX
#FFFFFF
.
bg-color-
white
.
text-color-
white
Color
HEX
#000000
.
bg-color-
black
.
text-color-
black

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
160
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
h1

Aa

Font size
120
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
h2

Aa

Font size
112
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
h3

Aa

Font size
80
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
h4
Aa
Font size
64
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
h5
Aa
Font size
48
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
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
160
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
.
heading-style-
huge

Aa

Font size
120
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
.
heading-style-
xlarge

Aa

Font size
112
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
.
heading-style-
large

Aa

Font size
80
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
.
heading-style-
medium

Aa

Font size
64
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
.
heading-style-
small

Aa

Font size
48
Text-Weight
900
Line Height
90%
Letter Spacing
-2%
Text-Style
None
.
heading-style-
xsmall

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. Duis cursus, mi quis viverra ornare.

Font Size
24
Line Height
1.4
.
text-size-
large

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
20
Line Height
1.4
.
text-size-
medium

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
18
Line Height
1.4
.
text-size-
regular
Font Size
16
Line Height
1.4
.
text-size-
small

Buttons

Button
button
.
is-horizontal
icon-button
.
is-horizontal
icon-button
.
is-horizontal
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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-
play
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
.
text-
rich-text

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.