Style Guide

Brand Primary Palette

PRIMARY BRAND COLOURS
Black BG
#101010
White Smoke
#0F0F0F
White Light Smoke
#F6F6F6
White
#FFFFFF

Typography Palette

HEADING & PARAGRAPH
Black
#1E1E1E
Grey
#818A8A
White
#FFFFFF
Orange
#FFAC00

Typography Styles

Looking for something else? Visit type-scale.com

Global Headings

PRIMARY BRAND COLOURS

Aa Bb Cc Dd Ee

Aa Bb Cc Dd Ee
Heading 1
58px

Aa Bb Cc Dd Ee

Aa Bb Cc Dd Ee
Heading 2
44px

Aa Bb Cc Dd Ee

Aa Bb Cc Dd Ee
Heading 3
33px

Aa Bb Cc Dd Ee

Aa Bb Cc Dd Ee
Heading 4
25px
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Heading 5
19px
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Heading 6
14px
Heading Large
18px
Heading Default
Heading Default
14px
SUBHEADING LARGE
Subheading Large
18px
Subheading Small
Subheading Small
12px

Paragraph

STYLES

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
14px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
12px

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and 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 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!

A rich text element

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.

Rich Text

Links

STYLES
Text Link
Link Large
18px
Text Link
Link Normal
14px
Text Link
All Links
14px
Text Link
Link Small
13px
Text Link
Link Small
12px

Additional Type

STYLES

This line rendered as bold text.

Bold

This line rendered as bold text.

Semi Bold

This line rendered as bold text.

Medium

This line rendered as bold text.

Normal

This line rendered as bold text.

Semi Bold

This line rendered as italicized text.

Italic

This line of text is meant to be treated as deleted text.

Strikethrough

This line of text is meant to be treated as deleted text.

Underline

You can use the mark tag to highlight text.

Highlight
This is some text inside of a div block.
Gold Span
  • Example of a dot point list item
  • Example of a dot point list item
  • Example of a dot point list item
Dot Point Lists

Buttons Styles

Buttons

STYLES
Scroll Down
Scroll Button
14px
Button
16px
Button Gold Hover White
16px
Button Gold Hover Black
16px
Button White
16px
Button Dark
16px
Button Ghost
16px
Button Small Button
14px
Button Small Button Button Gold Hover White
14px
Button Small Button Button Gold Hover Black
14px
Button Small Button Button White
14px
Button Small Button Button Dark
14px
Button Small Button Ghost
16px
Start Saving
Button Ghost Gold
14px
Buttons Slider

Cards Styles

Card
Big Card
Small Card