02 — PrimaryStyle v2.2
Typography
Three different fonts, each for a different purpose.
01 · Primary typeface
Montserrat
The default for everything. Titles, content and more.
Get it from Google Fonts- Extra Light · 200 The quick brown fox jumps over the lazy dog
- Light · 300 The quick brown fox jumps over the lazy dog
- Regular · 400 The quick brown fox jumps over the lazy dog
- Regular Italic · 400 The quick brown fox jumps over the lazy dog
- Medium · 500 The quick brown fox jumps over the lazy dog
- Semi-Bold · 600 The quick brown fox jumps over the lazy dog
- Bold · 700 The quick brown fox jumps over the lazy dog
- Extra Bold · 800 The quick brown fox jumps over the lazy dog
- Black · 900 The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 áéíóú ÁÉÍÓÚ
!?.,;:’“”()[]{}<>/\|@#&*+-=_€£$%
02 · Code
JetBrains Mono
For code samples, terminals, or anything where clarity is key.
Get it from Google Fonts- Thin · 100 The quick brown fox jumps over the lazy dog
- Extra Light · 200 The quick brown fox jumps over the lazy dog
- Light · 300 The quick brown fox jumps over the lazy dog
- Regular · 400 The quick brown fox jumps over the lazy dog
- Regular Italic · 400 The quick brown fox jumps over the lazy dog
- Medium · 500 The quick brown fox jumps over the lazy dog
- Semi-Bold · 600 The quick brown fox jumps over the lazy dog
- Bold · 700 The quick brown fox jumps over the lazy dog
- Extra Bold · 800 The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 áéíóú ÁÉÍÓÚ
!?.,;:’“”()[]{}<>/\|@#&*+-=_€£$%
- Regular · 400 The quick brown fox jumps over the lazy dog
- Bold · 700 The quick brown fox jumps over the lazy dog
- Regular Italic · 400 The quick brown fox jumps over the lazy dog
- Bold Italic · 700 The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 áéíóú ÁÉÍÓÚ
!?.,;:’“”()[]{}<>/\|@#&*+-=_€£$%
Title lockup
Inspired by NASA's new brand identity. A heavy-weight first word, with a lighter-weighted second.
PrimaryStyle
Type scale
The sizes used on the web, from display to captions.
Display
Montserrat Black · 96px
The quick brown fox jumps over the lazy dog
Heading 1
Montserrat Bold · 60px
The quick brown fox jumps over the lazy dog
Heading 2
Montserrat Bold · 36px
The quick brown fox jumps over the lazy dog
Heading 3
Montserrat Semi-Bold · 24px
The quick brown fox jumps over the lazy dog
Body
Montserrat Regular · 18px
The quick brown fox jumps over the lazy dog
Caption
Montserrat Regular · 14px · Neutral-400
The quick brown fox jumps over the lazy dog
Code
JetBrains Mono Regular · 14px
The quick brown fox jumps over the lazy dog