Style Guide

Typography

Typeface
System-ui
‍This is the p font used on the site

Typeface
Raleway
This is the secondary font used on the site

Primary Font

fontExtra

fontExtra +Light

fontExtra +semibold

fontExtra +BOLD

Example:
fontExtra
Bold

fontExtra +White

fontExtra +Light +White

fontExtra +Semibold +White

fontExtra +Bold +White

Example:
fontExtra
Bold
White
Secondary Font

fontExtra

fontExtra +secondary +Light

fontExtra+secondary +semibold

fontExtra +secondary +BOLD

fontExtra +secondary +White

fontExtra +secondary+Light +White

fontExtra +secondary +Semibold +White

fontExtra +secondary +Bold +White

Primary Font

fontBig

fontBig+Light

fontBig+semibold

fontBig+BOLD

fontBig+White

fontBig+Light+White

fontBig+Semibold+White

fontBig+Bold+White

Secondary Font

fontBig

fontBig +secondary +Light

fontBig +secondary +semibold

fontBig +secondary +BOLD

fontBig +secondary +White

fontBig +secondary +Light+White

fontBig +secondary +Semibold+White

fontBig +secondary +Bold+White

Primary Font

fontMedium

fontMedium+Light

fontMedium+Semibold

fontMedium+Bold

fontMedium+White

fontMedium+Light+white

fontMedium+Semibold+white

fontMedium+Bold+white

Secondary Font

fontMedium

fontMedium +secondary +Light

fontMedium +secondary +Semibold

fontMedium +secondary +Bold

fontMedium +secondary +White

fontMedium +secondary +Light+white

fontMedium +secondary +Semibold+white

fontMedium +secondary +Bold+white

Primary Font

fontSmall

fontSmall+light

fontSmall+Semibold

fontSmall+Bold

fontSmall+white

fontSmall+light+white

fontSmall+Semibold+white

Secondary Font

fontSmall

fontSmall +secondary +light

fontSmall +secondary +Semibold

fontSmall +secondary +Bold

fontSmall +secondary +white

fontSmall +secondary +light+white

fontSmall +secondary +Semibold+white

fontSmall +secondary +bold+white

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!

  • Text
  • Next line

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.

LIST

  • When ever you have a list of points to make
  • It's best to use a list element
  • The SEO for your site will benefit
Color(S)
Black
Cyan
Green
Dark green
Yellow
Buttons
Buttons
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
FORMS
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Layout Elements
Popups
Made by Biniam