Typography

Real size

Variable

Min size @
320px viewport

Max size @
1360px viewport

Here's a H1 heading

var(--h1)

2.03rem

3.42rem

Here's a h2 heading

var(--h2)

1.80rem

2.85.rem

Here's a H3 heading

var(--h3)

1.60rem

2.38rem

Here's a H4 heading

var(--h4)

1.42rem

1.98rem

Here's a H5 heading

var(--h5)

1.27rem

1.65rem

Here's a H6 heading

var(--h6)

1.13rem

1.38rem

.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

.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

.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

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

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