Pão de Açúcar // Design System [Landing Pages] v.01/2025
Pão de Açúcar // Design System [Landing Pages] v.01/2025
Montserrat é a fonte oficial da comunicação da marca. Usando a escala modular em minor third, onde cada passo é 1,2 vezes o anterior, a hierarquia tipográfica é definida com base unitária de 16px (1 rem) para uma escala harmoniosa e responsiva. Essa combinação assegura que todos os elementos textuais mantenham uma proporção visual equilibrada, facilitando a manutenção e a consistência para uma legibilidade fluída entre dispositivos.
Font family: Montserrat
Open Font License
Google fonts
abcdefghijklmnopqrstuvxwyz
ABCDEFGHIJKLMNOPQRSTUVXWYZ
0123456789
abcdefghijklmnopqrstuvxwyz
ABCDEFGHIJKLMNOPQRSTUVXWYZ
0123456789
viewport min-width: 40em
Display
Line height: 120%
Letter spacing: 0
Base font: 16px = 1rem
css rem:
h1 class display: 4.25rem
Heading
Line height: 120%
Letter spacing: 0
Base font: 16px = 1rem
css rem:
h1 - 3rem
h2: 2.5rem
h3: 2.125rem
h4: 1.75rem
h5: 1.5rem
h6: 1.25rem
viewport max-width: 39.9375em
Nesta sessão "Small", as dimensões apresentadas estão forçadas através de CSS para simular no desktop o tamanho original quando visualizadas em uma viewport pequena (celular). Para visualizar as especificações de dimensões aplicadas automaticamente para a viewport small, você pode simplesmente inspecionar a página atual e simular a viewport de um celular. Ao fazer isso, você verá que as dimensões responsivas do "Medium / Large (sessão acima)" serão aplicadas automaticamente em tamanhos de viewport small (abaixo).
Display
Line height: 120%
Letter spacing: 0
Base font: 16px = 1rem
css rem:
h1 class display: 2rem
Heading
Line height: 120%
Letter spacing: 0
Base font: 16px = 1rem
css rem:
h1 - 1.75rem
h2: 1.625rem
h3: 1.5rem
h4: 1.375rem
h5: 1.25rem
h6: 1.125rem
Texto
Line height: 150%
Letter spacing: 0
Base font: 16px = 1rem
css rem:
padrão <p>: 1rem
<small>: .875rem
.caption: .75rem
.micro: .625rem
Padrão / 16px / Regular
Lorem ipsum dolor sit amet, ipsum elit.
Padrão / 16px / Bold
Lorem ipsum dolor sit amet, ipsum elit.
Padrão / 16px / Emphasis
Lorem ipsum dolor sit amet, ipsum elit.
Padrão / 16px / Emphasis Bold
Lorem ipsum dolor sit amet, elit.
Small / 14px / Regular
Lorem ipsum dolor sit amet, ipsum elit.
Small / 14px / Bold
Lorem ipsum dolor sit amet, ipsum elit.
Small / 14px / Emphasis
Lorem ipsum dolor sit amet, ipsum elit.
Small / 14px / Emphasis Bold
Lorem ipsum dolor sit amet, ipsum elit.
Caption / 12px / Regular
Lorem ipsum dolor sit amet, ipsum elit.
Caption / 12px / Bold
Lorem ipsum dolor sit amet, ipsum elit.
Caption / 12px / Emphasis
Lorem ipsum dolor sit amet, ipsum elit.
Caption / 12px / Emphasis Bold
Lorem ipsum dolor sit amet, ipsum elit.
Micro / 10px / Regular
Lorem ipsum dolor sit amet, ipsum elit.
Micro / 10px / Bold
Lorem ipsum dolor sit amet, ipsum elit.
Micro / 10px / Emphasis
Lorem ipsum dolor sit amet, ipsum elit.
Micro / 10px / Emphasis Bold
Lorem ipsum dolor sit amet, ipsum elit.
Texto botão
Line height: 100%
Letter spacing: 0
Weight: Figma 642 / css 645
Base font: 16px = 1rem
css rem:
.button.large: 1.125rem
.button: 1rem
.button.small: .875rem
.button.tiny: .75rem
Padrão / 16px / SemiBold
Clique aqui
Small / 14px / SemiBold
Clique aqui
Tiny / 12px / SemiBold
Clique aqui
Para especificações gerais de botões, clique aqui.