Sistema de design
Tudo nesta página vem de packages/tokens e packages/ui. Troque a cor no token e esta página muda junto, inclusive os números de contraste, que são calculados aqui e não escritos na mão.
Cor
A coluna de razão usa a fórmula de contraste da WCAG 2.1. Reprovado significa que aquela combinação não pode existir no produto.
| Amostra | Par | Uso | Razão | Situação |
|---|---|---|---|---|
| 26 cm | giz sobre noite | texto de corpo | 15.94 | AAA |
| 26 cm | fumaca sobre noite | texto de apoio | 5.61 | AA |
| 26 cm | ceu sobre noite | marca, etiqueta e link | 8.60 | AAA |
| 26 cm | breuAzul sobre ceu | texto do botão de ação | 8.86 | AAA |
| 26 cm | giz sobre ardosia | texto de corpo dentro da ficha | 14.42 | AAA |
| 26 cm | fumaca sobre ardosia | texto de apoio dentro da ficha | 5.07 | AA |
| 26 cm | fioForte sobre ardosiaClara | borda de campo, medida na elevada | 3.05 | AA grande |
| 26 cm | fio sobre noite | linha divisória, sem função | 1.32 | reprova |
| 26 cm | brasa sobre noite | erro | 6.71 | AA |
| 26 cm | ambar sobre noite | atenção | 9.83 | AAA |
| 26 cm | ceu sobre giz | azul de marca sobre claro, proibido | 1.85 | reprova |
Tipografia
Piazzolla no display, Instrument Sans na interface. Razão 1,333 nos títulos e 1,25 no corpo. Numeral tabular em toda medida e todo preço.
Serve 4 pessoas display 4, 3,875 rem
Serve 4 pessoas display 3, 2,666 rem
Serve 4 pessoas display 2, 2 rem
Serve 4 pessoas display 1, 1,5 rem
Risoto de cogumelos, 32 cm de travessa, R$ 98,00 corpo lg, 1,5625 rem
Risoto de cogumelos, 32 cm de travessa, R$ 98,00 corpo md, 1,25 rem
Risoto de cogumelos, 32 cm de travessa, R$ 98,00 corpo base, 1 rem
Risoto de cogumelos, 32 cm de travessa, R$ 98,00 corpo xs, 0,8 rem
A régua
O componente só pode ser usado onde o objeto acima dele está em escala controlada. Em lista e cartão pequeno a medida vai como número, nunca como desenho.
Prato individual, 26 cm.
Travessa para a mesa, 42 cm, na mesma escala do prato acima.
Botão
Campo e seletor
Meça a boca do prato com uma régua, de borda a borda, em centímetros.
A largura precisa estar entre 6 e 60 cm. Meça a boca do prato de borda a borda.
Cartão
Bolinho de bacalhau
12 cm, serve 2
R$ 42,00
Aviso
Sem prato publicado ainda
Fotografe o primeiro prato e o cardápio sai do zero em uma tarde.
Taça no fundo da foto
A taça atrás do prato confunde a reconstrução. Tire a foto com a mesa limpa.
A escala não fechou
O modelo saiu com 21,4 cm e você declarou 26 cm. Confira a medida e gere de novo. Esta tentativa não consumiu cota.
Prato publicado
Já está no ar no cardápio. As plaquinhas das mesas continuam valendo.
Modal e aviso flutuante
Esqueleto
Ocupa a forma exata do que vai chegar, então a página não pula quando o conteúdo entra.