macroflow-template.webflow.io

Style Guide

Edit the following Elements directly in this Style Guide. All changes will be reflected across the Library.

Typography

Font

Lora

Heading 1

Class Name:

Heading H1

Heading 2

Class Name:

Heading H2

Heading 3

Class Name:

Heading H3

Heading 4

Class Name:

Heading H4

Heading 5

Class Name:

Heading H5

Heading 6

Class Name:

Heading H6

Text Small (14px)

Class Name:

Text Small Light

Class Name:

Text Small Regular

Class Name:

Text Small Medium

Class Name:

Text Small Bold

Text Normal (16px)

Class Name:

Text Normal Light

Class Name:

Text Normal Regular

Class Name:

Text Normal Medium

Class Name:

Text Normal Bold

Text Large (18px)

Class Name:

Text Large Light

Class Name:

Text Large Regular

Class Name:

Text Large Medium

Class Name:

Text Large Bold

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Bold text

Emphasis

^Superscript

_Subscript

Links

Class Name:

Link

Component:

Breadcrumbs

Neutral Colors

Aa

Neutral 50

#F6F5F5

Aa

Neutral 100

#e7e6e6

Aa

Neutral 200

#d2cfd0

Aa

Neutral 300

#b3adae

Aa

Neutral 400

#8c8485

Aa

Neutral 500

#71696a

Aa

Neutral 600

#605a5b

Aa

Neutral 700

#524c4d

Aa

Neutral 800

#474343

Aa

Neutral 900

#3e3b3b

Primary Colors

Aa

Primary Main

#5653e0

Aa

Primary Light

#eeeefd

System Colors

Aa

Red 100

#febebe

Aa

Red 200

#f38787

Aa

Red 300

#e05353

Aa

Red 400

#dd4040

Aa

Green 100

#c3ffc1

Aa

Green 200

#83ea82

Aa

Green 300

#45b542

Aa

Green 400

#298727

Aa

Orange 100

#ffe3ca

Aa

Orange 200

#f9b77b

Aa

Orange 300

#f59d4c

Aa

Orange 400

#e77812

Shadows

Drop Shadow Small

Drop Shadow Medium

Drop Shadow Large

Drop Shadow Extra Large

Buttons

Button Primary Small

Button Primary Regular

Button Primary Large

Button Secondary Small

Button Secondary Regular

Button Secondary Large

Button Outline Small

Button Outline Regular

Button Outline Large

Button Clear Small

Button Clear Regular

Button Clear Large

Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Class Name:

Input Field

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Class Name:

Input Field / Text Area

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Class Name:

Input Field / Select

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Component Name:

Input Field + Button

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Class Names:

Checkbox Field, Checkbox Label, Checkbox

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Class Names:

Radio Field, Radio Label, Radio

Icons

Class Name:

Social Icons Wrapper, Social Icon Container, Social Icon