Colors

These are the colors used in the design. You can easily adjust them in the Variables panel, inside Main Colors.

You may switch between Light and Dark mode on the live website to see how these colors work in both modes.

Background Inner Dark

#1d2229

Background Dark

#181d24

Text

Text Dark

#323232

Text

Text Dark 50

#323232 / A50

Text

Text Dark 15

#323232 / A15

Background White

#ffffff

Background Light

#f2f2f2

Background Light 50

#f2f2f2 / A50

Text

Text Light

#f2f2f2

Text

Text Light 50

#f2f2f2 / A50

Text

Text Light 15

#f2f2f2 / A15

Accent 01

#93e6a4

Accent 02

#cafdd4

None

#ffffff / A0

Typography

HTML Heading tags

We use a global system for headings, typography sizing, colors, and customizations. If you edit the styling of these tags, the changes will apply across the website.

If you wish to edit global Heading tags, make sure to choose correct style selector after you select a heading, it should look like this:

H1 - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 41px / 130%

H2 - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 34px / 130%

H3 - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 28px / 130%

H4 - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 23px / 130%

H5 - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 19px / 140%

H6 - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 16px / 140%

Heading Classes

Use these classes on H1, H2, H3, or any other text element to change it to a specific heading size. If you edit the styling of these classes, the changes will apply across the website.

Display 1 - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Barlow Condensed Medium 52px / 85%

Heading Xlarge - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 41px / 130%
Looks like H1

Heading Large - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 34px / 130%
Looks like H2

Heading Big - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 28px / 130%
Looks like H3

Heading Medium - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 23px / 130%
Looks like H4

Heading Small - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 19px / 140%
Looks like H5

Heading Tiny - Aa Bb Cc

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. Nunc ut sem vitae risus tristique posuere.

Satoshi Bold 16px / 140%
Looks like H6

Paragraphs

Paragraphs and other common text elements. If you edit the styling of these classes, the changes will apply across the website.

Paragraph Normal - Satoshi Normal 16px / 160%

Paragraph Small - Satoshi Normal 14px / 140%

Text Size Tiny - Satoshi Bold 12px / 140%
Text Size Small Caps - Satoshi Bold 12px / 140%
Text Size Tiny Caps - Satoshi Bold 10px / 140%

Rich Text

If you edit the styling of elements within the Rich Text, the changes will apply 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 adding and formatting them individually. Just double-click and easily create content.

Static and dynamic content editing

Pelentesque habitant morbi tristique senectus:

  1. Item 1
  2. Item 2
  3. Item 3

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.

Example of an image placed inside a Rich Text element.
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.