Style Guide

last update 17 OCT 2022 - emeric
Headings
Inter - 700 - Bold
Paragraphs
Source Sans Pro - 400 - Normal
Other
Manrope - 400 - Normal
Inter typeface family

Inter is a variable font family carefully crafted & designed for computer screens.

Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

The Inter project is led by Rasmus Andersson, a Swedish maker–of–software living in San Francisco. To contribute, see github.com/rsms/inter

These fonts are licensed under the Open Font License. You can use them in your products & projects – print or digital, commercial or otherwise. This isn't legal advice, please consider consulting a lawyer and see the full license for all details.

https://fonts.google.com/specimen/Inter/about?query=inter

Manrope typeface family

Manrope is an open-source modern sans-serif font family, designed by Mikhail Sharanda in 2018. In 2019, Mirko Velimirovic worked with Mikhail Sharanda to convert Manrope into a variable font.

To contribute, see github.com/sharanda/manrope.

These fonts are licensed under the Open Font License. You can use them in your products & projects – print or digital, commercial or otherwise. This isn't legal advice, please consider consulting a lawyer and see the full license for all details.

https://fonts.google.com/specimen/Manrope/about?query=manrope

Source Sans Pro typeface family

Source® Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

These fonts are licensed under the Open Font License. You can use them in your products & projects – print or digital, commercial or otherwise. This isn't legal advice, please consider consulting a lawyer and see the full license for all details.

https://fonts.google.com/specimen/Source+Sans+Pro/about?query=source+sans+pro

Heading 1

64px - primarily used for single page titles - usually hero section

Heading 2

54px - secondary heading used for page sections

Heading 3

48px - used for page sub sections

Heading 4

36px - unknown usage
Heading 5
30px - unknown usage
Heading 6
24px - universal subheading, pairs with h1, h2, h3, h4
also heading for footer columns
Default

Default paragraph size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.para-small

.para-small - small paragraph size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.para-med

.para-med- medium paragraph size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.para-large

.para-large - large paragraph size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.para-xl

.para-xl - extra large paragraph size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Other Text Styles

Default LinksBold TextItalic Text - orange link

ordered List Style
  1. Pellentesque eu, pretium quis, sem
  2. Tellus eget condimentum rhoncus
  3. Sem quam semper
Unordered List Style
  • Cum sociis natoque penatibus
  • Magnis dis parturient montes, nascetur
  • Donec quam felis, ultricies nec, pellentesque
Block quote
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu.
.black
night rider
#2e2e2e
.bg-black
.orange
flamingo
#eb5745
.bg-orange
.darkblue
midnight
#201f33
.bg-darkblue
.turq
turquoise
#38DEEB
.bg-turq
.teal
java
#1e959e
.bg-java
.blue
summer sky
#2cc1ff
.bg-blue
.mist
gray azure
#5e7486
.bg-mist
.ghost
ghost white
#f3f3f9
.bg-ghost
.royal
royal blue
#1F5EF0
.bg-royal
.light-purple
light purple
#494995
.bg-light-purple
.purple
purple
#2B2B5C
.bg-purple
.bondi
bondi blue
#0993BF
.bg-bondi
.light-grey
light grey
#DFDFE3
.bg-light-grey
test color block
do not delete
#18293a Tangaroa
#8700F0 dark violet
#7f7fcc lighter purple
#4AC6A0 aqua

Primary
background gradient
Purple - #2B2B5C
Midnight - #201f33
Secondary
gradient
Flamingo - #eb5745
orange5 - #6B281F
Third - Sunset
gradient mix
Midnight - #201f33
Purple - #2B2B5C
Orange - #eb5745
.orange5
#6B281F
.orange4
#AB4032
ORANGE
#eb5745
.orange2
#FF7663
.orange1
#EE988C
.orange0
#F7BAB3
DARK BLUE
#201f33
.db5
#4D4C5C
.db4
#71707D
.db3
#8D8D97
.db2
#A4A4AC
.db1
#C5C5CA

This H3 Sample Content Section

Source Sans Pro normal pargrpah section. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Manrope supporting text section.
This is some text inside of a div block.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

lists in RTE

  • item 1
  • item 2
  • item 3
  1. OL in RTE
  2. mhmmm
  3. yup
This is a block quote in RTE

wowwwwwwwy link in RTE

Bold text - Italic text - super scriptsuper - subscript H2O

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justossdf
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justossdf

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justossdf

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justossdf

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The End