Style Guide
Typography
Rich Text
Colors
Buttons
Home PageStyle Guide

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

Monica Schneider

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.

Image caption goes here.

UX Professionals Recommendation

Praesent porta nisl non justo semper egestas. Aliquam accumsan, mauris et scelerisque faucibus, ligula dui vestibulum diam, id tempus ante diam at quam. Mauris vulputate ac justo pharetra eleifend.

Tips and Recommendations

Quisque elementum purus quis augue efficitur, ut malesuada quam varius. Fusce convallis placerat lorem hendrerit faucibus. Curabitur lobortis metus turpis, a sagittis metus viverra at. Nullam efficitur egestas justo vitae placerat.

Nunc vestibulum, enim et pulvinar tincidunt, purus nisl maximus arcu

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac nibh in justo scelerisque maximus. Maecenas convallis libero elit, ut mattis nibh dapibus quis.

Darker Version - 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.

Image caption goes here.

UX Professionals Recommendation

Praesent porta nisl non justo semper egestas. Aliquam accumsan, mauris et scelerisque faucibus, ligula dui vestibulum diam, id tempus ante diam at quam. Mauris vulputate ac justo pharetra eleifend.

Tips and Recommendations

Quisque elementum purus quis augue efficitur, ut malesuada quam varius. Fusce convallis placerat lorem hendrerit faucibus. Curabitur lobortis metus turpis, a sagittis metus viverra at. Nullam efficitur egestas justo vitae placerat.

Nunc vestibulum, enim et pulvinar tincidunt, purus nisl maximus arcu

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac nibh in justo scelerisque maximus. Maecenas convallis libero elit, ut mattis nibh dapibus quis.

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 Main 10

Background Main 20

Background Main 40

Background Main 60

Background Main 80

Background Main 99

Background Secondary 10

Background Secondary 20

Background Secondary 40

Background Secondary 60

Background Secondary 80

Background Secondary 99

Text Main 99

Text Main 80

Text Main 60

Text Main 40

Text Main 20

Text Main 10

Text Secondary 99

Text Secondary 80

Text Secondary 60

Text Secondary 40

Text Secondary 20

Text Secondary 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

Portfolio

Button Secondary

Download CV

Button Tertiary

Read More