UX reference: golden path
Product decision (2026-06-04): a best-in-class business banking app is the flow/UX reference for Velon Finance products. its dashboard and screen structure are the golden path that orients product, design and frontend.
The division of responsibility is strict:
- The reference app informs flow and UX only. information architecture, screen structure, interaction patterns.
- This design system stays the source of truth for brand, tokens and components.
The brand stays exclusively Velon, never copy the reference app’s visual identity. Velon is monochromatic: Navy
#1B3A6Banchor with Azul Ação#1E5BA8for interaction, Velon Sans as the UI typeface (our OFL font built on Inter; VELON Display for brand moments only), tokens from@velon-finance/tokens.
The full mapping (7 annotated screens, Velon-branded SVG mockups, data mapping to the
Treeal PIX API) lives in the BrainCaffeine vault:
20-Areas/Product/golden-path-referencia-ux.md.
Application shell
Every screen shares a 2-column shell:
- Left sidebar (Navy
#1B3A6B). organization selector on top (multi-tenant), then navigation groups: Home / Tasks; operational (Accounts, Transactions, Cards, Users, Payments, Invoicing, Reimbursements); reorderable bookmarks. - Topbar. global search, primary “Move money” action, Private Mode toggle (hides amounts), settings, notifications, avatar.
- Floating AI assistant button (keyboard shortcut
/) present on every screen.
Reference screens
| Screen | Golden path role |
|---|---|
| Home / Dashboard | Customizable widgets: balance, accounts, money movement, transactions |
| Insights ⭐ | AI-generated trends in natural language + cashflow KPIs. the differentiator |
| Assistant (AI) | Chat assistant over the same data engine as Insights |
| Accounts | Consolidated balance, transfer rules, account list |
| Transactions | Saved views, filters, inline-editable category, attachments, export |
| Cards | Physical/virtual cards per holder, spend per month |
| Payments | Bill Pay / Recipients tabs, scheduled payments, bill upload with review |
UX principles to adopt
- Consistent shell (sidebar + topbar + floating assistant) on every screen.
- Insights and AI at the center, not as an add-on. natural-language narrative over the data, with feedback (👍/👎) and a bridge into the chat.
- Density with clarity. monetary values in Velon Sans with tabular figures, semantic
success/danger (
#1F9D6B/#D7544C), generous whitespace (VELON Manual da Marca v1.0 proportions). - Everything navigable and filterable. rows as links, “View all” preserving filters, saved views, export.
- Automatic categorization + inline editing of transactions.
- AI honesty. always flag generated content (“may include inaccuracies”).
- Dashboard customization via widgets.
- Private Mode for public use / screen sharing.
Widget → component mapping
The domain components in @velon-finance/ui already cover the core of the golden path:
| Reference widget | Component |
|---|---|
| Home balance widget | BalanceCard (+ MoneyAmount) |
| All monetary values (hide toggle, tone) | MoneyAmount |
| Quick actions (Send / Transfer / …) | QuickActionButton |
| Status in Payments / Transactions | StatusBadge |
| ”Move money” modals | DialogV2 |
Gaps to close
Tracked on the README roadmap:
- Domain extras.
TransactionRow(transactions table rows),FlagIcon,CodeInput. - Missing primitives the reference screens need.
Tabs(Insights/Payments sub-tabs),Table(every list screen),Sonner/Toast,Drawer,Form. - App shell template. sidebar + topbar + assistant slot as a documented pattern (see Patterns).