Placeholder

Style Guide

Brand Primary Palette

PRIMARY BRAND COLOURS
Pink
#101010
Light pink
#101010
Black
#F6F6F6
Dark grey
#FFFFFF
Light grey
#FFFFFF
White Smoke
#0F0F0F
White Smoke
#0F0F0F
White Smoke
#0F0F0F
White Smoke
#0F0F0F

Typography Styles

Looking for something else? Visit type-scale.com

Global Headings

PRIMARY BRAND COLOURS

Aa Bb Cc Dd Ee

Heading 1
58px

Aa Bb Cc Dd Ee

Heading 2
44px

Aa Bb Cc Dd Ee

Heading 3
33px

Aa Bb Cc Dd Ee

Heading 4
25px
Aa Bb Cc Dd Ee
Heading 5
19px
Aa Bb Cc Dd Ee
Heading 6
14px
Heading Large
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
18px

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
16px

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 Ghost
16px
Button Small Button
14px
Button Small Button Button Dark
14px
Button Small Button Ghost
16px

Cards Styles

Card
Big Card