Style guide

Style Guide for Zylivo Template

Explore the nuanced realm of typography, uncovering the ideal harmony between readability and style

Breadcrumb ShapeBreadcrumb Shape
01. Colors02. Typography03. Buttons04. Input Field05. Icons

Colors

Primary Color
#3f54d3
Secondary Color
#05041d
Neutral One
#F8F4FF
Neutral Two
#f4a718

Typography

Fonts

Font Family: Lexend

Heading 1

H1 - 72px/90px - 600 - Lexend

Heading 2

H2 - 40px/52px - 500 - Lexend

Heading 3

H3 - 24px/36px - 500 - Lexend

Heading 4

H4 - 22px/32px - 500 - Lexend
Heading 5
H5 - 20px/30px - 500 - Lexend
Heading 6
H6 - 18px/28px - 500 - Lexend

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.

Paragraph Small 18px/30px - 300 - Lexend

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.

Paragraph Large 20px/32px - 300 - Lexend

List

  • Lorem Ipsum is simply dummy text of print.
Paragraph Large 20px/32px - 400 - Lexend

Section Heading

Subtitle

Section Title

Zylivo - Creative Design Agency Website Template

Subtitle

Section Title

Zylivo - Creative Design Agency Website Template

Subtitle

Section Title

Zylivo - Creative Design Agency Website Template

Buttons

Primary
Primary Button 20px/32px - 400 - Lexend
Secondary
Secondary Button 20px/26px - 400 - Lexend
Button with icon
Button With Icon 20px/26px - 400 - Lexend
Learn More
Link Button 20px/30px - 400 - Lexend

Input Field

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icons

Scroll To Top Image