Philosophy

Philosophy

Built on three V

Every Velon product exists to deliver three values: Verdade (total transparency, no fine print), Vantagem (real, measurable benefit) and Valor (lasting value, not short-term revenue). The brand calls them the three V (Manual da Marca §1.4); this design system is how they reach the screen.

Consistency and quality aren’t the goal. They’re how the three V get delivered, reliably, in every product. That’s why this system isn’t a “component library” or a “UI kit.” It’s the place where the smallest decisions about color, type, radius, motion, behavior and accessibility get made well, on purpose, once, so every screen tells the truth, delivers an advantage, and builds value.

  • Verdade → clareza. Legible amounts, honest states, no dark patterns. The user understands exactly what they’re agreeing to.
  • Vantagem → eficiência. Short paths, low friction; every screen moves toward the result.
  • Valor → consistência. Accessible, coherent, built to scale. Decisions made once hold across every product.

Atomic design, applied

We borrow Brad Frost’s Atomic Design methodology wholesale. It maps cleanly to how Velon is built:

  • Atoms. the indivisible UI primitives. Button, Input, Label, Badge, Avatar, Switch. They have no business meaning on their own.
  • Molecules. small compositions of atoms that gain meaning. Card (border + radius + shadow + content), Alert (icon + title + body), FormField (label + input + error).
  • Organisms. larger compositions. Dialog, Sheet, DropdownMenu, Sidebar, BalanceCard, TransactionRow. They’re recognizable patterns of the product.
  • Templates. page skeletons. App shell, billing layout, public checkout layout.
  • Pages. filled instances. /app/wallet, /admin/merchants/:id, /charges/:id.

The promise: if you fix a bug at the atom level, every screen that uses it gets the fix for free. If you ship a new atom on-brand, every future composition starts on-brand.

What that means in practice

  1. Atomic before composite. No new UI gets built in an app before its atoms exist here. If the atom is missing, we add it here first, then use it. (Vantagem e Valor)
  2. Brand fidelity is non-negotiable. Azul Ação is #1E5BA8, not blue-600. Type scale is fixed. Border-radius is 8 (buttons/inputs) / 12 (cards), never improvised. (Verdade)
  3. Accessibility is a default, not an option. WCAG AA contrast on every text/background pair. Keyboard navigable. Screen-reader supported. Not a checklist. the components ship that way. (Verdade e Valor)
  4. Semantic over literal. Components consume bg-card, text-foreground, border-border. they invert in dark mode automatically. They don’t reach for bg-white directly. (Valor)
  5. Code is the source of truth. Tokens live in TypeScript, generated to CSS variables and Tailwind utilities. The Brand PDF is the spec; the code is what ships. (Verdade)

Why this matters for Velon specifically

Velon moves money. The cost of a tiny UX failure compounds: a user clicks the wrong button on a transfer screen and we’ve broken trust. The cost of a tiny brand failure compounds: every off-brand pixel is a credibility gap with merchants, regulators, partners. Atomic-quality UI is one of the cheapest forms of trust we can buy.

The three V are felt at the atom. So we build the atoms with care, and let everything else inherit Verdade, Vantagem e Valor.

Color