Clay - Webflow Template

Style Guide

This Style Guide offers comprehensive instructions on various design elements, ranging from color schemes and typography to button styles and text sizes, pre-built utility classes, and a wide range of UI elements for a consistent design experience.

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

Color

Use colors to customise this template to match your brand identity.

Learn more about how to manage color swatches & variables in Webflow.

Background
Black
White
Primary
Secondary
Alternative
Text
Aa
Black
Aa
White
Aa
Primary
Aa
Secondary
Aa
Alternate

Typeface

Upload custom fonts to customise this template to match your brand identity.

Learn more about how to add Google Fonts or use cutom fonts in Webflow.

Primary
Bdogrotesk
Aa

HTML Headings

Use HTML tags to define default Heading styles and guide people and search engines through your content.

Learn more about how to use headings in Webflow.

H1

Lorem ipsum

H2

Lorem ipsum

H3

Lorem ipsum

H4

Lorem ipsum

H5
Lorem ipsum
H6
Lorem ipsum

Heading Classes

Use Heading classes when typography style doesn't match the default HTML tag.

heading style h1
Lorem ipsum
heading style h2
Lorem ipsum
heading style h3
Lorem ipsum
heading style h4
Lorem ipsum
heading style h5
Lorem ipsum
heading style h6
Lorem ipsum

Other HTML Tags

HTML tags define default text styles.

Paragraphs

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.

Block Quotes
"Lorem ipsum"
Unordered Lists
  • Lorem ipsum

  • Lorem ipsum

  • Lorem ipsum

Ordered Lists
  1. Lorem ipsum

  2. Lorem ipsum

  3. Lorem ipsum

Text Sizes

Use Text sizes classes to add, style, and format inline text.

Learn more about how to use paragraphs in Webflow.

large

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.

medium

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.

regular

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.

small

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.

tiny

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.

Text Weights

Text weight classes when typography weight doesn't match the default HTML tag.

Learn more about how to use font weight in Webflow.

Extra bold - 800
Lorem ipsum
bold - 700
Lorem ipsum
semibold - 600
Lorem ipsum
medium - 500
Lorem ipsum
normal - 400
Lorem ipsum
light - 300
Lorem ipsum

Text Styles

Text style classes when typography style doesn't match the default HTML tag.

Learn more about how inline text formatting in Webflow.

italic
Lorem ipsum
strikethrough
Lorem ipsum
allcaps
Lorem ipsum
muted
Lorem ipsum
nowrap
Lorem ipsum
quote
Lorem ipsum
link
2 lines
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.
3 lines
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. 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.

Text Alignment

Text alignment classes when typography alignment doesn't match the default HTML tag.

Learn more about how inline text formatting in Webflow.

align left
Lorem ipsum
align center
Lorem ipsum
align right
Lorem ipsum

Rich text

Use Rich Text to create long-form content.

Learn more about how to use rich text in Webflow.

rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here

Buttons

Use Buttons to serve as your call to action (CTA) and links to pages, forms, assets, and more.

Learn more about how to use button in Webflow.

Primary
Button
Alternate
Button
Secondary
Button

Tag

Use Tags to organize information, guide user actions, and optimize the overall interface usability.

Primary
Tag
Secondary
Tag
Tertiary
Tag

Form

Use Form to capture information, like newsletter signups or work inquiries from potential clients.

Learn more about how to use form in Weblow.

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