Tudo o que está abaixo está rodando de verdade — não é imagem. Cada bloco é o componente real, com o código real, do jeito que aparece na loja.
Sobre claro ou sobre amarelo · 1x de área de respiro
guidelines/logoCinco traços, cada um com o seu limite
guidelines/personalityDireta, humana, confiante — sem hype de propaganda
guidelines/voiceReconhecimento e energia — sinal, nunca papel de parede
#FFD400Tinta #111418 · Grafite #272B30 · Off-white #F5F3EE
guidelines/colors-neutralsTinta sobre amarelo · Tinta sobre off-white · Branco sobre tinta
guidelines/colors-combosNunca só cor — sempre com ícone e texto junto
guidelines/colors-statusdisplay-xl 64 · display-lg 48 · pesos 600–700
tokens/typographyheading-xl 36 · heading-lg 28 · heading-md 22
guidelines/type-headingsbody-lg 18 · body-md 16 · body-sm 14 · label 12
guidelines/type-bodyNumeral tabular; moeda menor que o valor
guidelines/type-price4 / 8 / 12 colunas · máx. 1280px · de 360 a 1440
guidelines/grid4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px
tokens/spacing4 técnico · 8 controle · 12 card · 16 destaque · pílula
tokens/radiusBorda na maioria dos cards; sombra só para flutuante e modal
tokens/elevation120 micro · 200 padrão · 320 expansão — passe o mouse nas barras
tokens/motionAs unidades do catálogo e as suas partes
components/productHierarquia na tinta; amarelo reservado para a chamada principal
components/actionsCabeçalho fixo, trilha de localização, rodapé escuro
components/navigationEtiquetas permanentes, estados em texto, chips de filtro
components/formsTom por ícone e título; diálogos de reserva, consulta e filtro
components/feedbackContorno Lucide, traço de 1,75px numa grade de 24px
components/foundationsClique e navegue. É o sistema inteiro montado, com o catálogo real.