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.

Darkblue
HEX
#000000
R
00
G
00
B
00
C
00
M
00
Y
00
K
00
PMS
#000000
.
bg-color-
darkblue
.
text-color-
darkblue
Pink
HEX
#000000
R
00
G
00
B
00
C
00
M
00
Y
00
K
00
PMS
#000000
.
bg-color-
pink
.
text-color-
pink
Beige
HEX
#000000
R
00
G
00
B
00
C
00
M
00
Y
00
K
00
PMS
#000000
.
bg-color-
beige
.
text-color-
beige
White
HEX
#000000
R
00
G
00
B
00
C
00
M
00
Y
00
K
00
PMS
#000000
.
bg-color-
white
.
text-color-
white
Blue
HEX
#000000
R
00
G
00
B
00
C
00
M
00
Y
00
K
00
PMS
#000000
.
bg-color-
blue
.
text-color-
blue

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

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

.
button
.
button
.
is-outline

Icon Sizes

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

.
icon-
12px
.
icon-
16px
.
icon-
18px
.
icon-
24px
.
icon-
32px
.
icon-
40px
.
icon-
48px
.
icon-
64px

Text Strokes

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
.
text-stroke-
eerie-black
Aa
.
text-stroke-
gunmetal
Aa
.
text-stroke-
ash-grey
Aa
.
text-stroke-
platinum
Aa
.
text-stroke-
anti-flash-white
Aa
.
text-stroke-
honeydew

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.
.
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.