Style Guide

Black

Color #000000

Brand Red

Color #d81b21

..

Color #..

Lavender

Color #dddddd

White Smoke

Color #f7f7f8

White

Color #ffffff

Dark

Color #ffffff

Dark Silver

Color #727274

Heading Text

All H1 Headings

H1 - Satoshi  | 48px font-size / 1.2- line-height / Bold

All H2 Headings

H2 - Satoshi  | 40px font-size / 1.25- line-height / Bold

All H3 Headings

H3 - Satoshi  | 32px font-size / 1.4- line-height / Bold

All H4 Headings

H4 - Satoshi  | 26px font-size / 1.38- line-height / Bold

All H5 Headings

H5 - Satoshi | 20px font-size / 1.25- line-height / Bold

.heading-1

Header classes are needed to use the header level more flexibly. For example, SEO requires a 3rd-level heading, and a styled class can add a 4th-level heading to it

.heading-2

.heading-3

.heading-4

.heading-5

Body Text

Size

Large

.text-size--large

Medium

.text-size--medium

Small

.text-size--small

Weight

Light

.text-weight--light

Medium

.text-weight--medium

Bold

.text-weight--bold

Align

Left

.text-align--left

Center

.text-align--center

Right

.text-align--right

...

...

Color

Red

.text-color--red

Lavender

.text-color--lavender

White

.text-color--white

...

...

Other text

label

.text--label

Navigation

.text--navigation

View More

.text--cta

Style

All Caps

.text-style--all-caps

..

..

List

  • List item

  • List item

  • List item

  1. List item

  2. List item

  3. List item

Italic, bold, link

consectetur adipiscing
All Bolds Tag
Sed euismod nisi porta

Rich text

A large heading

Condimentum penatibus fermentum porttitor vestibulum feugiat sit dui. Magnis at nisl elit leo nam. Egestas semper velit mattis aenean adipiscing. Pellentesque laoreet lectus in ipsum amet molestie cum elementum. Blandit tortor, adipiscing nunc dolor aliquet. Justo, ac eu fringilla et viverra. Nec velit, sit condimentum eget vel, proin. Cras justo, vestibulum lacinia mauris arcu ac volutpat volutpat pellentesque. Ultrices facilisis elit orci elit quisque suspendisse.
Donec est volutpat ornare ultrices nunc, purus. In luctus tristique varius curabitur. Elementum sed sagittis, ultrices eget libero, pulvinar. Dictum nullam viverra cursus libero tempus urna commodo fermentum. Pharetra ut pretium, lectus fermentum cras lobortis at facilisis id.

Morbi consectetur adipiscing orci tincidunt faucibus fringilla. Feugiat purus venenatis orci odio mauris imperdiet sed at. Tellus magna vel tempus lorem sit nunc duis pellentesque interdum. Quam egestas cras turpis aliquet cras. Nullam et odio quam tempor ac. Sapien fringilla dui, urna dignissim sed. Viverra sed non mi vestibulum dictum ultrices ac. Urna tempus sagittis bibendum ultrices vitae fusce sodales.

A smaller heading

Vitae quis lectus integer duis nunc leo, tempor. Interdum pellentesque diam tortor ut nunc malesuada. Tempus nunc potenti magna cursus quisque fusce cum. Felis ut id ac accumsan, aliquam. Venenatis lectus sed id sodales posuere. Euismod aliquet nisi, sed imperdiet ac, libero in massa bibendum. Pulvinar feugiat posuere congue sociis. Feugiat quam viverra nisi condimentum non ut sagittis. In hac egestas vel urna in neque. Tortor ut habitant laoreet justo, imperdiet ac. Malesuada tristique habitasse mi phasellus at.

This is a free photo from Pexels.com

Aliquam nisi, id natoque amet venenatis lectus malesuada non velit. Nulla risus enim sit feugiat. Magna diam dui, vitae auctor maecenas id aliquam id. Senectus non, ridiculus enim praesent duis tellus facilisi non. Eu, tristique senectus vitae egestas lectus neque, consectetur sit.

  1. Beautifully Designed
  2. Fully Responsive
  3. CMS Content
  4. Smooth Interactions

Auctor aliquam volutpat massa arcu in metus. Mattis ullamcorper tortor purus fringilla aliquet eleifend vehicula. Enim, pellentesque egestas at at nulla quisque tempor nec sollicitudin. Ac, ullamcorper quis scelerisque sit. Proin mi ultrices cursus adipiscing dolor, lorem.

“I tell my students, 'When you get these jobs that you have been so brilliantly trained for, just remember that your real job is that if you are free, you need to free somebody else.”

Nisi, adipiscing dui et eget. Adipiscing velit hendrerit sed vulputate elementum. Iaculis diam semper mi et. At quis nulla rhoncus adipiscing ridiculus sed lectus aliquet id. Pretium mattis bibendum maecenas placerat mattis. Ac vel ut felis.

  • Beautifully Designed
  • Fully Responsive
  • CMS Content
  • Smooth Interactions

Aliquam nisi, id natoque amet venenatis lectus malesuada non velit. Nulla risus enim sit feugiat. Magna diam dui, vitae auctor maecenas id aliquam id. Senectus non, ridiculus enim praesent duis tellus facilisi non. Eu, tristique senectus vitae egestas lectus neque, consectetur sit.

Auctor aliquam volutpat massa arcu in metus. Mattis ullamcorper tortor purus fringilla aliquet eleifend vehicula. Enim, pellentesque egestas at at nulla quisque tempor nec sollicitudin. Ac, ullamcorper quis scelerisque sit. Proin mi ultrices cursus adipiscing dolor, lorem.

List

.section-title (.without-margin(title in hero sections)
.square (.center / .left / .center-left)
.square__line

Title structure

.section-title (.without-margin(title in hero sections)
  .square (.center / .left / .center-left)
       .square__line

Style Guide

...