Style Guide
Colors
The color scheme aims to be simple without too many variations.
| Preview | Hex | Variable |
|
|
#3D3D3D | $color-style-guide-dark-gray |
|
|
#8b8b8b | $color-style-guide-gray |
|
|
#eceeed | $color-style-guide-light-gray |
|
|
#FFFFFF | $color-style-guide-white |
|
|
#f3f0eb | $color-style-guide-beige |
|
|
#7e8c88 | $color-style-guide-gunsmoke |
|
|
#758386 | $color-style-guide-slate |
|
|
#6394be | $color-style-guide-blue |
|
|
#37464f | $color-style-guide-dark-blue |
Typography
We use Libre Baskerville as a primary typeface and GothamBook as the secondary typeface. Listed below are all default styles for headings.
| Preview | Font Size / Line Height |
Heading 1 |
42px / 48px |
Heading 2 |
28px / 34px |
Heading 3 |
12px / 24px |
Heading 4 |
22px / 26px |
Heading 5 |
22px / 32px |
Heading 6 |
16px / 26px |
Paragraph
| Preview | Font Size / Line Height |
|
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. |
14px / 25px |
Text Links