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

Alexander Saad

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!

  1. Vestibulum in urna acectus;
  2. Parius aliquam idet leo;
  3. Donec fringilla ligula vitae.

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.

Advice from professionals in the field

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ac sodales augue. Vivamus ex sapien, sagittis at molestie at, lobortis id lacus. Morbi massa enim, ornare vitae faucibus ac, ornare et tellus. Etiam dapibus erat id justo facilisis tincidunt nec at tortor.

Vivamus vitae nisi eu lacus blandit accumsan. Vestibulum ut quam a diam volutpat elementum.
Conclusions from the article

Quisque dapibus nunc eu tempus vestibulum. Cras eros nisl, sodales at mollis egestas, gravida eget diam. Duis at metus vitae metus pharetra iaculis. Nam vel lacus sollicitudin, tristique libero ut, varius diam. Quisque feugiat, orci sed finibus ultrices, nunc diam lobortis turpis, ac pretium nibh purus pulvinar velit.

  • Tempor semper feugiat volutpat;
  • Egestas ut risus. Pellentesque;
  • Posuere turpis ut tellus tincidunt;
  • Felis tempor lobortis eget quis magna.

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

Portfolio

Button Secondary

Download CV

Button Tertiary

Read More