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

Neutral
Aa
Black
Aa
Neutral Dark
Aa
Neutral
Aa
Neutral Light
Aa
White

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

Display

Use Display Headings to replace semantic heading styles.

Display 6XL
6XL Display Heading
Display 5XL
5XL Display Heading
Display 4XL
4XL Display Heading
Display 3XL
3XL Display Heading
Display 2XL
2XL Display Heading
Display XL
XL Display Heading
Display L
L Display Heading
Display M
M Display Heading
Display S
S Display Heading
Display XS
XS Display Heading

Fluid

Use Fluid Headings to replace semantic heading styles. Fluid typography is a responsive typography technique where the text scales automatically with the screen size.

Fluid XL
XL Fluid
Fluid L
L Fluid
Fluid M
M Fluid
Fluid S
S Fluid

Heading

Use Headings to guide people and search engines through your content.

Learn more about how to use headings in Webflow.

H1

H1 Heading

H2

H2 Heading

H3

H3 Heading

H4

H4 Heading

H5
H5 Heading
H6
H6 Heading

Body

Use Paragraphs to add, style, and format inline text.

Learn more about how to use paragraphs in Webflow.

Body 2XL

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.

Body XL

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.

Body L

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.

Body M

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.

Body S

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.

Body XS

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.

Quote

Use Block Quote to use quotations such as excerpts from books or articles.

Learn more about how to use block quote in Webflow.

Block Quote
"Block Quote"

List

Use Lists to create numbered or bulleted lists of content.

Learn more about how to use lists in Webflow.

Ordered
  1. List item
  2. List item
  3. List item
Unordered
  • List item
  • List item
  • List item

Tag

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

Primary
Tag
Secondary

Tag

Link

Use Links to create text links and link blocks.

Learn more about how to use link settings and link block in weblow.

Link
Nav Link
Social Link

Button

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
Button
Secondary
Button
Button
Menu
Close
Menu
Menu Invert
Close
Menu
Action
Start a project
No Label
Custom Cursor
View
Project
Hover Me !

Icon

The icon sizes used throughout this template.

Icon XL
Icon L
Icon M
Icon S

Form

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

Learn more about how to use form in Weblow.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

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

Rich Text

Use Rich Text to create long-form content.

Learn more about how to use rich text in Webflow.

Rich text element overview

A Rich text element is the perfect element for creating long-form content like blog posts, about pages, biographies, etc. Instead of adding individual heading, paragraph, list, or image elements, you can double-click into a Rich text element to create and format text, custom code, and media elements.

Placeholder image
Placeholder Image — Credit LS Graphics
You can add a Rich text element by dragging it from the Add panel to the Designer canvas.

You can add the following elements within Rich text elements:

  • Paragraphs
  • Headings (H1-H6)
  • Images
  • Image captions
  • Image alt attributes
  • Custom code
  • Block quotes
  • Unordered lists (bulleted)
  • Ordered lists (numbered)
  • Videos (Youtube, Vimeo)
  • Rich media (Google maps, SoundCloud, Imgur, Giphy, Codepen, and more)

‍

You can also add additional formatting to text elements:

  • Links (URL, page, email, etc.)
  • Bold text
  • Italic text
  • Superscript text
  • Subscript text
  • Code
Learn
More