logo dark color with law firm text
Style Guide
Go to Homepage

Webflow Style Guide

Welcome to the style guide for your website. It provides guidelines for everything from color palettes and typography to text sizes, buttons, and more.

Law Firm LLC website is intended to provide guidelines and best practices for creating a professional and effective website for your law firm. It covers various aspects of web design, including typography, color, imagery, layout, and content. By following these guidelines, you can ensure that your website is consistent, visually appealing, and easy to navigate.

Colours

Primary Colours

Primary 1
#454240
Primary 2
#ab8421
Primary 3
#8a7c6a

Secondary Colours

Secondary 1
#5c4e3d
Secondary 2
#fffdfa

Other Colours

White
#faf8f5
White Smoke
#eeeeee
Gainsboro
#e5e5e5
Slate Grey
#6c757d

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
Text weights
Text Weight Bold
Text Weight Medium
Text Weight Normal
Text Weight Light
Text Weight Extra Light
Text Weight Thin

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.

This is a H2 heading

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.

This is a H3 heading

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.

This is a H4 heading

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

This is a H5 heading

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

This is a H6 heading

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

placeholder image
This is a placeholder image.

This is an ordered list -

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

This an unordered list -

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

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

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

Logos & Assets

logo white color with law firm text
Logo - Light
logo dark color with law firm text
Logo - Dark
scale icon small
Favicon - 32x32px
scale icon big
Webclip - 256x256px

Buttons & Icons

Filled Button - Primary
Filled Button - Secondary
Button - Ghost
Freepik Icons
frequently asked questions iconemail iconphotograph frame iconquote black iconhammer iconinjured person iconimmigration law iconestate building iconemployment law iconproperty law iconlaw iconfamily iconincome iconlocation pin iconemail black iconphone white iconchevron up arrow iconcross button icon
Freepik Social Icons
facebook icon blackInstagram Icon Image Blacktwitter icon blackYouTube White Icon Image Blackgoogle black iconlinkedin black icon

Webflow Elements

Text Input

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

Select

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

Text Area

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

Check Box

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

Submit

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