Tipografia
A Tipografia padrão do Cuida é a Satoshi. Utilizamos a Satoshi variável com recursos OpenType.
Recomendações
Para facilitar a leitura e reduzir o contraste, nunca use #000000 em fundos brancos e #FFFFFF em backgrounds escuros. Utilize as cores neutras da paleta do Cuida.
Para facilitar o processo de escaneamento da interface, recomendamos evitar a utilização de títulos, labels, botões e demais elementos da interface em caixa alta, sendo recomendado esse recurso apenas para criar diferenças na hierarquia tipográfica.
Para evitar problemas de legibilidade, não recomendamos a utilização de textos itálicos.
Para evitar problemas de legibilidade e erros de interpretação da interface, recomendamos a utilização de textos sublinhados apenas quando necessário, como recursos para realçar links.
Para facilitar o escaneamento e trabalhar a hierarquia de conteúdo, recomendamos a utilização pontual de textos em negrito.
Tokens
Os tokens de tipografia são variáveis scss cujas características estão descritos abaixo.
Token | Características | Exemplo |
|---|---|---|
heading-1 | font-size: 45px; font-weight: 700; letter-spacing: 0.15px; | Não entre em pânico |
heading-2 | font-size: 33px; font-weight: 700; letter-spacing: 0.1px; | Não entre em pânico |
heading-3 | font-size: 29px; font-weight: 650; letter-spacing: 0px; | Não entre em pânico |
subheading-1 | font-size: 25px; font-weight: 600; letter-spacing: 0.15px; | Existe uma segunda teoria que diz que isso já aconteceu. |
subheading-2 | font-size: 21px; font-weight: 600; letter-spacing: 0px; | Existe uma segunda teoria que diz que isso já aconteceu. |
subheading-3 | font-size: 17px; font-weight: 600; letter-spacing: 0px; | Existe uma segunda teoria que diz que isso já aconteceu. |
body-1 | font-size: 17px; font-weight: 430; letter-spacing: 0px; | Existe uma teoria que diz que, se um dia alguém descobrir exatamente para que serve o
Universo e por que ele está aqui, ele desaparecerá instantaneamente e será substituído por algo
ainda mais estranho e inexplicável. Existe uma segunda teoria que diz que isso já aconteceu. |
body-2 | font-size: 15px; font-weight: 430; letter-spacing: 0px; | Existe uma teoria que diz que, se um dia alguém descobrir exatamente para que serve o
Universo e por que ele está aqui, ele desaparecerá instantaneamente e será substituído por algo
ainda mais estranho e inexplicável. Existe uma segunda teoria que diz que isso já aconteceu. |
caption | font-size: 13.5px; font-weight: 470; letter-spacing: 0.1px; | Existe uma teoria que diz que, se um dia alguém descobrir exatamente para que serve o
Universo e por que ele está aqui, ele desaparecerá instantaneamente e será substituído por algo
ainda mais estranho e inexplicável. Existe uma segunda teoria que diz que isso já aconteceu. |
overline | font-size: 11.5px; font-weight: 650; letter-spacing: 0.15px; | Existe uma teoria que diz que, se um dia alguém descobrir exatamente para que serve o
Universo e por que ele está aqui, ele desaparecerá instantaneamente e será substituído por algo
ainda mais estranho e inexplicável. Existe uma segunda teoria que diz que isso já aconteceu. |
button-1 | font-size: 16px; font-weight: 750; letter-spacing: 0.2px; | |
button-2 | font-size: 14px; font-weight: 700; letter-spacing: 0.15px; | |
button-3 | font-size: 12px; font-weight: 700; letter-spacing: 0.15px; |