Go to Homepage

Webflow Style Guide


Welcome to the style guide of our Webflow template.

This guide offers comprehensive instructions on various design elements, ranging from color schemes and typography to button styles and text sizes.

This webflow template is designed to provide you with guidelines and best practices for creating a professional and impactful website for your business.

It covers a wide range of web design aspects, including typography, color usage, imagery selection, layout considerations, and content strategies.

By adhering to these guidelines, you can maintain consistency, enhance visual appeal, and ensure seamless navigation throughout your website.

Colours

Primary Colours

Primary
#DFB187
Navy
#111B37

Secondary Colours

Dark Navy
#101D41
Light Navy
#1C2745
Light Gray
#D7D7D8
Gray
#9C9CA7

Other Colours

White
#ffffff

Typography

HTML heading tags

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6
HTML text tags

All Paragraphs (HTML-TAG)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

All Links (HTML-TAG)
All Quotes (HTML-TAG)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet

Rich Text - Blog Posts

Rich text blocks (RTBs) are different from regular paragraph and text elements. RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.

RTBs are what will be used for the primary body of your blog posts.

L

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

photograph frame icon
This is a placeholder image.

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. Swap in with your client's styles

This an unordered list -

  • Fully responsive
  • Cloneable
  • Swap in with your client's styles

Below is what block quotes will look like in your blog posts -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Logos & Assets

logo
Logo - Primary
Heading
Badge Card - Rectangular
Heading
Badge Card - Rectangular
Heading
Badge Card - Rotate
favicon
Favicon - 32x32px
webclip
Webclip - 256x256px

Buttons & Icons

Filled Button - Primary
Filled Button - Primary with Animation
Filled Button - Secondary
Cart
0
Cart Button - Icon
Learn More
Ghost Button
Freepik Icons
photograph frame iconcross button iconphone white iconlocation pin iconemail black iconstar iconquote icon
Freepik Social Icons

Webflow Elements

Text Input

Thank you for your message. We will get back to you shortly.
Oops! Something went wrong while submitting the form.

Text Area

Thank you for your message. We will get back to you shortly.
Oops! Something went wrong while submitting the form.

Select

Thank you for your message. We will get back to you shortly.
Oops! Something went wrong while submitting the form.

Submit

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