style guide.

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

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

Typography

Here's a H1 heading

Here's a h2 heading

Here's a H3 heading

Here's a H4 heading

Here's a H5 heading

Here's a H6 heading

Aa

Aa

Aa

Colors

Backgrounds

Spacing

Cards

The world is beautiful

The world is beautiful

The world is beautiful

Icon Pack

Gestão Financeira de Marketing: Como Organizar e Priorizar Investimentos

Liderança: Como Ser Líder de Equipes de Marketing e De Outros Líderes

Gestão de Equipe: Como se Comunicar, Elevar o Nível do Time e Garantir Resultados

Responsabilidades e Entregas do Head: Principais Desafios e Como Organizá-los

Gestão de Marketing: Estratégias e Monitoramento