Webflow Style Guide

Browse the UI elements available on the Educationic X Webflow Template. Educationic X is a premium e-Learning Webflow Template created for online schools and academies. It was designed & developed by the Webflow Experts at BRIX Agency.

Buy Template

Colors

Primary Colors

Primary 1

#96FAD9

Primary 2

#D9666f

Secondary Colors

Secondary 1

#688EA6

Secondary 2

#f2cd5c

Secondary 3

#FAAA96

Secondary 4

#FCD7B7

Secondary 5

#57AD90

Secondary 6

#A7DDDF

Secondary 7

#B3FFE5

Secondary 8

#A8B4FF

Neutral Colors

Neutral 800

#0F437F

Neutral 700

#1E3D60

Neutral 600

#62778F

Neutral 500

#8096B0

Neutral 400

#BECAD7

Neutral 300

#E7EAEE

Neutral 200

#F9FAFB

Neutral 100

#FFFFFF

Typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 58px/1.300em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 38px/1.289em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 24px/1.500em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 20px/1.500em

Heading H5 - Aa Bb Cc Dd

Heading 5 - 18px/1.444em

Heading H6 - Aa Bb Cc Dd

Heading 6 - 16px/1.500em

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.

Paragraph Small - 15px/1.600em

Paragraph Default - 18px/1.667em

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

Paragraph Large - 24px/1.583em

Link - Lorem ipsum dolor sit amet

Links

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text

“Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Diam phasellus vestibulum lorem sed risus ultricies. Magna sit amet purus gravida quis blandit. Arcu cursus vitae congue mauris.“

Block Quote