Espaço
Dez valores em múltiplos de 4. Dentro de um componente, os menores; entre seções, os maiores.
← Todos os cases
O sistema deste portfólio
Cada espaço, tamanho de texto e cor destas páginas vem de uma lista fechada. O build do site falha quando encontra um valor fora dela.
space-1 · 4
space-2 · 8
space-3 · 12
space-4 · 16
space-5 · 24
space-6 · 32
space-7 · 48
space-8 · 64
space-9 · 96
space-10 · 128
Tipo
Inter em três pesos e seis tamanhos, mais um título de abertura que cresce com a tela, de 40 a 72 px.
text-sm · 14
Rótulos e legendas
text-md · 16
Texto corrido
text-lg · 20
Texto de abertura
text-xl · 24
Título de bloco
text-2xl · 32
Título de seção
text-3xl · 48
Página
Cor
Neutros e um azul de destaque, que aparece só em links, foco e estado. Todos os pares de texto passam no nível AA da WCAG com folga; o menor deles é 6,34:1.
ink
18,86:1 no fundoink-2
7,73:1 no fundoaccent
7,15:1 no fundosuccess
só indicador, 4,48:1bg
fundosurface
fundo de apoioline
bordasaccent-soft
fundo de destaqueAs regras que o build confere
- Nenhuma cor escrita no CSS dos componentes: só tokens.
- Nenhum espaço ou tamanho solto: só tokens, com exceção da borda de 1 px e do anel de foco de 2 px.
- Nenhum estilo inline no HTML.
- Toda imagem com texto alternativo e todo link interno apontando para um arquivo que existe.
- Todo par de cor de texto com contraste AA, calculado a partir dos tokens.
Além disso: foco visível em tudo que é clicável, link para pular direto ao conteúdo, animações desligadas para quem pede menos movimento no sistema e layout testado a partir de 390 px de largura.