Filosofia

Filosofia

Construído sobre três V

Todo produto Velon existe para entregar três valores: Verdade (transparência total, sem letras miúdas), Vantagem (benefício real e mensurável) e Valor (valor duradouro, não receita de curto prazo). A marca os chama de três V (Manual da Marca §1.4); este design system é como eles chegam à tela.

Consistência e qualidade não são o objetivo. Elas são como os três V se entregam, de forma confiável, em cada produto. Por isso este sistema não é uma “biblioteca de componentes” nem um “UI kit”. É o lugar onde as menores decisões sobre cor, tipografia, radius, motion, comportamento e acessibilidade são bem tomadas, de propósito, uma vez, para que cada tela diga a verdade, entregue uma vantagem e construa valor.

  • Verdade → clareza. Valores legíveis, estados honestos, sem dark patterns. A pessoa entende exatamente com o que está concordando.
  • Vantagem → eficiência. Caminhos curtos, baixa fricção; cada tela avança em direção ao resultado.
  • Valor → consistência. Acessível, coerente, feito para escalar. Decisões tomadas uma vez valem para todos os produtos.

Atomic design, na prática

Adotamos integralmente a metodologia Atomic Design do Brad Frost. Ela mapeia com clareza a forma como a Velon é construída:

  • Átomos. os primitivos indivisíveis de UI. Button, Input, Label, Badge, Avatar, Switch. Sozinhos, não têm significado de negócio.
  • Moléculas. pequenas composições de átomos que ganham significado. Card (borda + radius + shadow + conteúdo), Alert (ícone + título + corpo), FormField (label + input + erro).
  • Organismos. composições maiores. Dialog, Sheet, DropdownMenu, Sidebar, BalanceCard, TransactionRow. São padrões reconhecíveis do produto.
  • Templates. esqueletos de página. App shell, layout de billing, layout de checkout público.
  • Páginas. instâncias preenchidas. /app/wallet, /admin/merchants/:id, /charges/:id.

A promessa: se você corrige um bug no nível do átomo, toda tela que o usa recebe a correção de graça. Se você lança um novo átomo on-brand, toda composição futura já começa on-brand.

O que isso significa na prática

  1. Atômico antes de composto. Nenhuma UI nova é construída num app antes de seus átomos existirem aqui. Se o átomo está faltando, nós o adicionamos aqui primeiro e depois o usamos. (Vantagem e Valor)
  2. Fidelidade à marca é inegociável. Azul Ação é #1E5BA8, não blue-600. A escala tipográfica é fixa. O border-radius é 8 (botões/inputs) / 12 (cards), nunca improvisado. (Verdade)
  3. Acessibilidade é padrão, não opção. Contraste WCAG AA em cada par texto/fundo. Navegável por teclado. Compatível com leitores de tela. Não é um checklist. os componentes já saem assim. (Verdade e Valor)
  4. Semântico em vez de literal. Os componentes consomem bg-card, text-foreground, border-border. eles invertem em dark mode automaticamente. Não recorrem a bg-white diretamente. (Valor)
  5. O código é a fonte da verdade. Os tokens vivem em TypeScript, gerados para CSS variables e utilitários Tailwind. O PDF da Marca é a especificação; o código é o que vai para produção. (Verdade)

Por que isso importa especificamente para a Velon

A Velon movimenta dinheiro. O custo de uma pequena falha de UX se acumula: a pessoa clica no botão errado numa tela de transferência e a confiança já foi quebrada. O custo de uma pequena falha de marca se acumula: cada pixel fora da marca é uma lacuna de credibilidade com lojistas, reguladores, parceiros. Uma UI com qualidade atômica é uma das formas mais baratas de confiança que podemos comprar.

Os três V são sentidos no átomo. Por isso construímos os átomos com cuidado e deixamos todo o resto herdar Verdade, Vantagem e Valor.

Cor