style guide.

Typography

Real size
Variable
Min size @
320px viewport
Max size @
1360px viewport

Merriweather H1

var(--h1)
2.03rem
3.42rem

Merriweather H2

var(--h2)
1.80rem
2.85.rem

Merriweather H3

var(--h3)
1.60rem
2.38rem

Merriweather H4

var(--h4)
1.42rem
1.98rem
Merriweather H5
var(--h5)
1.27rem
1.65rem
Merriweather H6
var(--h6)
1.13rem
1.38rem
text-xl - Open Sans
var(--xl-text)
1.1rem
1.4rem
text-l - Open Sans
var(--l-text)
1rem
1.2rem
text-m - Open Sans
var(--m-text)
1rem
1rem
text-s - Open Sans
var(--s-text)
0.85rem
0.85rem
.c-uppercase
.c-lowercase
.c-underline
.c-bold
.c-italic

Aa

calc(var(--h1) * 3)

Aa

calc(var(--h1) * 2)

Aa

calc(var(--h1) * 1.5)

Colors

#0026ff
.c-heading-accent
#0f0f0f
.c-heading-dark
#ffffff
.c-heading-light
#0026ff
.c-text-accent
#686868
.c-text-dark
rgba(255,255,255,0.8)
.c-text-light
#e86a92
.youth accent
#dd6e42
.adult accent

Backgrounds

#0026ff
.c-bg-accent
#e8e9ff
.c-bg-accent-alt
#f9f9f9
.c-bg-light
#ffffff
.c-bg-light-alt
#11141e
.c-bg-dark
#181c2d
.c-bg-dark-alt

Spacing

Real size
Variable
Min space size
Max space size
XXL size
var(--xxl-space)
52px
130px
XL size
var(--xl-space)
32px
80px
L size
var(--l-space)
20px
50px
M size
var(--m-space)
12px
30px
S size
var(--s-space)
8px
20px
XS size
var(--xs-space)
4px
10px

Cards

The world is beautiful

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more

The world is beautiful

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more

The world is beautiful

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more

Icon Pack