Design system
v0.1 · Fase 0Vitrine viva dos tokens, componentes e padrões da versão web. Se algo aqui destoa do documento, arrume a implementação — não o documento.
Tipografia
Plus Jakarta Sans para UI, títulos e KPIs; JetBrains Mono para códigos. Números usam tabular-nums.
Cor — tokens semânticos
Cream canvas, terracotta para ação, dolphin/stone para neutros, moss/amber/brick para status.
KPIs — Stat
Protagonismo do número. Sans tabular, delta à sua direita, sparkline opcional.
Botões
Hierarquia clara: uma ação primária por contexto.
Pills · status
Inputs · formulários
Cartão — variações
Card padrão
Usado para quase tudo. Fundo branco, borda hairline, sem sombra.
Conteúdo com padding 20px e cantos 20px (radius.xl).
Card destaque
Terracotta-50 de fundo. Usar apenas para marcar algo selecionado ou uma chamada para ação dentro da página.
Card recuado
Stone-50 de fundo, sem borda. Usar para seções aninhadas que devem visualmente recuar.
Avatares
Estado vazio
Empty state é momento de construir relação.
Seu primeiro pedido começa aqui.
Registre a próxima venda e veja como o Vellon organiza clientes, produção e entregas em um só fluxo.
Padrão de lista · exemplo composto
Tudo combinado — é assim que uma tela real vai se parecer.