Ewally · Blu Design System · Material 3 · Fintech
Building the foundation
for fintech at scale.
A Material 3-based design system I designed and documented to unify Ewally’s mobile and web product experiences.
Design System
Type
Blu for Ewally
Fintech
Domain
Financial services
Material 3
Base
M3 component arch.
Web + Mobile
Surfaces
Dual-platform
⚡
Built for scale
Token-first architecture
🔗
Shared foundations
Colors, type, spacing
📦
Component library
+ docs & usage guidance
📱
Live in products
Wallet · Platform · Credit
01 — The Challenge
A fintech product without a shared language.
Ewally was growing across multiple financial experiences, but the product needed stronger visual consistency, reusable patterns and a shared design foundation for future evolution.
Before · Fragmented
✕
Each surface had its own visual approach
✕
No shared components or tokens
✕
Design decisions repeated per screen
✕
Inconsistent typography and spacing
✕
No documentation for future contributors
After · Blu Design System
✓
Token-based color, type, spacing system
✓
Reusable component library (web + mobile)
✓
Documentation every team could use
✓
Light and dark theme support
✓
Scalable foundation for new products
02 — The System in One Glance
Built on three pillars.
01
Efficiency
Create faster with repeatable patterns and reusable building blocks across every product surface.
02
Agility
Support multiple flows and teams with a flexible system that adapts without fragmenting.
03
Quality
Improve consistency, reduce visual friction and raise the UI standard across the ecosystem.
03 — Foundations
From visual debt to a shared foundation.
Color, typography, spacing and tokens, documented to be reused, not reinvented.
Color Guidance · Blu Design System
Primary · Blue
Secondary · Violet
Error · Red
Neutral
M3 tonal palette · 8 tones per role · Total / Light / Dark theme support
A scalable color structure for product clarity
Spacing · 4pt base grid
4
8
12
16
24
32
48
64
borderRadius.small: 4px
borderRadius.medium: 8px
borderRadius.large: 12px
borderRadius.full: 999px
Foundations documented for reuse across flows
Design Tokens · Foundations documented for reuse
color.primary
#1A56DB
color.on-primary
#FFFFFF
color.primary-container
#D9E2FF
color.secondary
#7B3AED
color.error
#DC2626
color.surface
#F9FAFB
color.on-surface
#111827
elevation.level-2
shadow-md
Tokens supporting consistency at scale
Typography · Rubik
Display Large
Rubik Regular 57/64 · −0.25
Display Medium
Rubik Regular 45/52 · 0
Headline Large
Rubik Bold 32/40 · 0
Title Large
Rubik Bold 22/28 · 0
Body Large
Rubik Regular 16/24 · +0.5
Label Medium
Rubik Medium 12/16 · +0.5
Type hierarchy designed for fintech readability
06 — The System in Production
The system applied to product
Blu became the visual and functional foundation for real Ewally products, not a style guide on a shelf, but a live shared system.
📱
Digital wallet with Pix
A mobile experience for everyday financial actions — send, receive, pay bills, track transactions.
Live · iOS + Android
💼
Internal financial platform
A structured interface for internal and operational use cases — dual-theme, data-rich, role-based.
Live · Web
🔜
Microcredit experience
An additional financial flow now being developed on the same system foundations.
In development
04 — Components
Reusable components, not one-off screens.
The system was designed to move from isolated UI to a reusable component logic across web and mobile experiences.
Guia de Componentes · Component Library
Button States
Button
Button
Button
Disabled
Filled tonal
Tonal
Text Field States
Placeholder
Placeholder
Filled
João da Silva
Error
João123
Apenas letras
Disabled
Desativado
Elevated Card
Surface +1 elevation. Use for distinct content areas.
Action
Dismiss
Bottom Sheet
Modal dialog from bottom. For confirmations and quick actions.
Confirmar
Chips · Badges
Filter chip
Assist chip
● Active
1
2
3
4
05 — Documentation
Documented to be used.
A system only scales when teams can understand and apply it consistently.
Blu Design System
Component Usage Guidelines
Each component ships with usage context, do/don't examples, state coverage, and accessibility requirements. Not just what it looks like — but when and how to use it.
States
Variants
Accessibility
Examples
Blu Design System
Design Token Reference
Color roles, elevation values, radius tokens and type scale — all named semantically so design and engineering share the same vocabulary.
Color roles
Elevation
Typography
Spacing
Blu Design System
Naming & Structure
Component names follow Material 3 conventions, extended with Ewally-specific variants. Predictable structure makes the system learnable in hours, not days.
M3 conventions
Ewally variants
Figma + code parity
Blu Design System
Pattern Library
Beyond individual components: composed patterns for common fintech flows — form sequences, transaction states, empty states and data tables — ready to assemble.
Composed patterns
Flow templates
Fintech-specific
08 — Case documentation
System walkthrough
Interview version · 6 slides
09 — What the System Unified
What the system unified.
The system unified visual language, interaction patterns and documentation, helping different product surfaces feel like part of the same fintech ecosystem.
01
Product consistency
Every surface — wallet, platform, future credit — speaks the same visual language.
02
UI reuse
Components assembled, not reinvented. Design and development moved faster as a result.
03
Faster decision-making
Shared tokens and patterns reduced the number of micro-decisions per screen.
04
Stronger user trust
Consistency across surfaces builds the subconscious credibility fintech products need.
Ecosystem · One system, multiple surfaces
Blu
Blu Design System
📱
Digital Wallet
💼
Fin. Platform
🔜
Microcredit
Try the MVP
Interactive prototype.
10 — What Building a System Taught Me
What building a system taught me.
Building a system is not only about components. It is about creating the conditions for products to grow with more speed, clarity and consistency.
→
Systems need product grounding, abstract patterns only work when they're tied to real use cases.
→
Documentation matters, a component no one understands is a component no one uses.
→
Reuse only works when patterns stay flexible, rigid systems create workarounds.
11 — A System Is Most Valuable When It Becomes Product
Where the system goes next.
This design system became the foundation for multiple Ewally product experiences.
🔜
Microcredit experience
A new experience being built on the same foundations.
In development