Design system
Interface
Tokens e componentes para o site, a loja e o personalizador. Os nomes dos tokens descrevem o papel: fundo, texto, ação. Assim o produto muda de mundo sem mexer nos componentes.
Os componentes juntos
Um passo do personalizador montado só com o que está nesta página. Troque o mundo e o nome.
Passo 1 de 3
Escolha seu mundo
Cores por papel
--mundie-fundo
Fundo da página.
--mundie-superficie
Cartões, seções alternadas e campos.
--mundie-borda
Bordas e divisórias.
--mundie-texto
Texto corrido.
--mundie-texto-suave
Legendas, apoio, placeholder.
--mundie-titulo
Títulos e números em destaque.
--mundie-acao
Botão principal e item ativo. Um por tela.
--mundie-acao-hover
Botão principal em hover e pressionado.
--mundie-acao-secundaria
Botão secundário, links.
--mundie-foco
Anel de foco do teclado, 3 px com 3 px de afastamento.
--mundie-sucesso
Confirmações. A marca não usa verde: o azul com ícone de check comunica.
--mundie-alerta
Avisos, sempre com ícone e texto em Tinta.
Botões
Três níveis. Um botão primário por tela: é o único lugar em que o magenta vira fundo.
| Nível | Normal | Hover | Foco | Desativado |
|---|---|---|---|---|
| Primário | ||||
| Secundário | ||||
| Terciário |
Altura de 48 px, raio pill, Rubik SemiBold 15 px. Foco sempre visível: anel magenta de 3 px afastado 3 px. Área de toque mínima de 44 px, também no terciário.
Campos
Erro em magenta com texto que diz como resolver. A marca não usa vermelho nem verde: a confirmação é azul, o aviso é laranja com texto em Tinta.
Espaço, raio, sombra e movimento
Espaço (base 4 px)
Raio
sm
8 px
md
14 px
lg
22 px
xl
32 px
pill
pill
Cantos sempre redondos, como o traço do logo. Canto vivo só em foto e imagem sangrada.
Sombra
sombra-cartao
Cartão em repouso.
sombra-flutuante
Menu, modal e cartão em hover.
Movimento
- rapido
- 160ms · Hover, troca de cor.
- medio
- 240ms · Abrir chip, trocar mundo.
- lento
- 400ms · Entrada de painel, prévia da etiqueta.
- ease-orbita
- cubic-bezier(0.5, 0, 0.2, 1) · Curva padrão: arranca devagar e assenta suave, como algo entrando em órbita.
A única animação de marca é a órbita girando devagar em volta do m. Todo movimento para quando o sistema pede menos movimento.
Arquivos para o time de produto
Nota
Os tokens saem do mesmo arquivo que monta esta página (src/content/marca/tokens.ts). Mudou lá, muda aqui e nos downloads.