Style Guide
Typography
Rich Text
Colors
Buttons

Style Guide

This style guide page contains styles and components used through the website. You can change any style from this page and it will be updated throughout the site.

Typography

The different text sizes used throughout the site.

H1

Dylest

H2

A Spectacular Heading

H3

A Spectacular Heading

H4

A Spectacular Heading

H5

A Spectacular Heading

Paragraph XX Big

Whereas recognition of the inherent dignity.

Paragraph Extra Big

Whereas recognition of the inherent dignity.

Paragraph Big

Whereas recognition of the inherent dignity.

Paragraph Medium

Whereas recognition of the inherent dignity.

Paragraph Small

Whereas recognition of the inherent dignity.

Paragraph Extra Small

Whereas recognition of the inherent dignity.

Rich Text

The different text sizes used throughout the site.

Main Title - H1

What’s a Rich Text element? - H2

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 - h3

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 - h4

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.

Caption of the image.

Colors

The website was built with a swatch color system.

Any alteration of this main swatch will reflect in the entire website. You can modify the background color and text color as two separate objects.

Background Black 10

Background Black 25

Background Black 50

Background Black 75

Background Black 90

Background Black 100

Text Black 100

Text Black 90

Text Black 75

Text Black 50

Text Black 25

Text Black 10

Buttons

Buttons are clickable elements used to trigger actions. They convey a call to action to the user and allow the user to interact with the page in a number of ways.

The button label indicates what action will be taken when the user interacts with it. They are subdivided by variants and each one has a particular function and ways to use it.

Button Primary

Button Text

Button Secondary

Button Text