Mogenius Style Guide

Primary Palette

PRIMARY BRAND COLOURS
Steel blue
#009bc5
Dark gray
#000000

Gradient colors

HEADING & PARAGRAPH
Magenta
#e335f4
Orange Red
#ff6807

Typography Styles

Looking for something else? Visit type-scale.com

Global Headings

PRIMARY BRAND COLOURS

Aa Bb Cc Dd Ee

Heading 1
42px

Aa Bb Cc Dd Ee

Heading 2
34px

Aa Bb Cc Dd Ee

Heading 3
26px

Aa Bb Cc Dd Ee

Heading 4
22px
Aa Bb Cc Dd Ee
Heading 5
18px
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
Paragraph Normal
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.

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!

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
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.
Blue 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
Button
16px
Button Wide
16px
Button Accent
16px
Button Accent
16px
Button Accent
16px
Button Accent
16px

Cards Styles

Default card
Big Card