Style Guide

This style guide presents the colors, fonts, and interactive elements used in the Duotint template.

Colors

These are the colors used in the design. The first four are intended to be customized by you; you can adjust them simply by changing the color of one of two squares on the homepage (in the “Designer” view), or, alternatively, by using Global Swatch feature.

Color 01 Light

#B0EED8 - Template's main accented color - Light Version

Color 02 Light

#90E4C6 - Accented color in illustrations - Light Version

Color 01 Dark

#058E98 - Template's main accented color - Dark Version

Color 02 Dark

#1FDEBF - Accented color in illustrations - Dark Version

White

#FFFFFF

Light Gray

#F6F6F6

Dark Gray

#2E2E2E

Background Dark

#2F3545

Darker Dark

#272D3E

Button Dark

#1F2637

Typography

Headings, paragraphs and other common text elements. If you edit the styles here, they will change across the website.

H1 Heading 1 - Aa Bb Cc

Poppins Light 36px / 1.35em

H2 Heading 2 - Aa Bb Cc

Poppins Light 33px / 1.4em

H3 Heading 3 - Aa Bb Cc

Poppins Light 28px / 1.5em

H4 Heading 4 - Aa Bb Cc

Poppins Light 24px / 1.5em

H5 Heading 5 - Aa Bb Cc

Poppins Normal 21px / 1.4em

H6 Heading 6 - Aa Bb Cc

Poppins Medium 14px / 1.4em

Paragraph - Poppins Normal 16px / 2.1em

Paragraph Small - Poppins Normal 14px / 1.9em

Paragraph Extra Small - Poppins Medium 12px / 1.8em

Small Text Expanded - Poppins Medium 14px / 1.5em

Buttons

If you edit the button style here, it will change across the website.

Let's Start a Project
Button Light Version

#2E2E2E

Let's Start a Project
Button Dark Version

#1F2637

Ordered And Unordered List

If you edit the lists style here, it will change across the website.

  • This is an unordered item
  • This is an unordered item
  • This is an unordered item
  1. This is an ordered item
  2. This is an ordered item
  3. This is an ordered item

Block Quote

If you edit the block quote style here, it will change across the website.

This is a block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet.

Rich Text

If you edit the rich text here, it will change across the website.

What’s a Rich Text element?

The rich text element allows you to create and format:

  • headings,
  • paragraphs,
  • blockquotes,
  • images
  • video

... All in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with:

  1. Static content
  2. 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!

Sample project
Figure Caption

How to customize formatting for each rich text

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.

This is a block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

If you like the Duotint template, you may find it on the Webflow Marketplace
Buy Now