Style Guide

Last Updated: May 14,2023

This is a h1 Title.

This is a h2 Title.

This is a h3 Title.

This is a h4 Title.

This is a h5 Title.
This is a h6 Title.

Paragraph

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 Quote

Curabitur et condimentum turpis tincidunt sed tellus. Ut maecenas mauris tortor nibh in aliquam pellentesque ac purus. Vestibulum, nulla eget urna viverra cursus quisque hac lorem. Quis tellus, laoreet pretium neque. Iaculis arcu eget.

Unordered List

Ordered List

  1. Here is a simple example.
  2. Here is a simple example.
  3. Here is a simple example.
  4. Here is a simple example.

Link

Link name

Image with caption

Dome | Dome - Architecture Studio Webflow CMS Template
Image with a 3:2 aspect ratio

Image aspect ratios

Dome | Dome - Architecture Studio Webflow CMS Template
Image with a 1:1 aspect ratio
Dome | Dome - Architecture Studio Webflow CMS Template
Image with a 4:3 aspect ratio
Dome | Dome - Architecture Studio Webflow CMS Template
Image with a 3:2 aspect ratio
Dome | Dome - Architecture Studio Webflow CMS Template
Image with a 8:5 aspect ratio
Dome | Dome - Architecture Studio Webflow CMS Template
Image with a 16:9 aspect ratio
Dome | Dome - Architecture Studio Webflow CMS Template
Image with a 21:9 aspect ratio

Rich text element h1 Title.

This is a h2 Title.

This is a h3 Title.

This is a h4 Title.

This is a h5 Title.
This is a h6 Title.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

House | Dome - Architecture Studio Webflow CMS emplate
Caption
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  • Here is a simple example.
  • Here is a simple example.
  • Here is a simple example.
  • Here is a simple example.
  1. Here is a simple example.
  2. Here is a simple example.
  3. Here is a simple example.
  4. Here is a simple example.

This is a link

Colors

The different weights of greys and colours used throughout the website.

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Accent
Accent Tint
Background 1
Black
Gray 1
Gray 2
Gray 3
Gray 4
Gray 5
Gray 6
White

Shadows

Global Text Styles

Text Centered

Text Centered On Mobile

Text Accent

Text Secondary

No Margin Top

No Margins

No Paddings

No Paddings Top

Text White

Buttons

These are all the buttons that are used in this project. Editing them will reflect the changes on all the other buttons of the project too.

Label
Button Large
Label
Button Large Light
Label
Button Large Text
Label
Menu CTA
Label
Menu CTA Light
Label
Menu CTA Text

Icons

Twitter Logo | Dome - Architecture Studio Webflow CMS TemplateInstagram Logo | Dome - Architecture Studio Webflow CMS TemplateYoutube Logo | Dome - Architecture Studio Webflow CMS TemplateFacebook Logo | Dome - Architecture Studio Webflow CMS TemplateArrow Left | Dome - Architecture Studio Webflow CMS TemplateArrow Right | Dome - Architecture Studio Webflow CMS Template

Forms

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

Tabs