style guide.

Typography

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

Here's a H1 heading

var(--h1)
1.375rem
2.5rem

Here's a h2 heading

var(--h2)
1.325rem
2rem

Here's a H3 heading

var(--h3)
1.3rem
1.75rem

Here's a H4 heading

var(--h4)
1.275rem
1.5rem
Here's a H5 heading
var(--h5)
1.25rem
1.65rem
Here's a H6 heading
var(--h6)
1rem
1rem
.c-text-xl - 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.
var(--xl-text)
1.1rem
1.4rem
.c-text-l - 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.
var(--l-text)
1rem
1.2rem
.c-text-m - 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.
var(--m-text)
1rem
1rem
.c-text-s - 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.
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

#c79a47
.c-heading-accent
#30302d
.c-heading-dark
#ddd9bf
.c-heading-light
#c79a47
.c-text-accent
#30302d
.c-text-dark
#fafafa
.c-text-light

Backgrounds

#c79a47
.c-bg-accent
#ddd9bf
.c-bg-accent-alt
#ffffff
.c-bg-light
#fafafa
.c-bg-light-alt
#30302d
.c-bg-dark
#212938
.c-bg-dark-alt

Spacing

Real size
Variable
Min space size
Max space size
XXL size
var(--xxl-space)
96px
192px
XL size
var(--xl-space)
48px
96px
L size
var(--l-space)
24px
48px
M size
var(--m-space)
12px
24px
S size
var(--s-space)
8px
20px
XS size
var(--xs-space)
4px
8px

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