Graphic Design + Prototyping

Design system for a fintech startup

We built a complete design system for an early-stage fintech: visual identity, color palette, UI components and interactive prototypes ready for development.

Client Fintech startup
Service Graphic Design + Prototyping
Tools Figma
Duration 6 weeks

The challenge

A new fintech needed to convey security and modernity from a user's very first contact. They had no defined visual identity and no component system their dev team could implement consistently.

The technical team needed clear specs: design tokens, documented component variants and prototypes that acted as a single source of truth. Without that, each developer made visual decisions on their own, which led to an inconsistent interface.

Our goal was to build a complete design system that solved both problems: a visual identity that inspires trust and a component kit that speeds up development.

Our approach

A fintech faces a design challenge of its own: it has to convey security (like a bank) but also accessibility and modernity (like an app). Striking that balance was our priority from day one.

We decided to build the design system before prototyping any screen. That let us define the palette, typography, components and interaction patterns as one coherent language the dev team could implement without ambiguity. Each component was designed across 3 breakpoints and documented with design tokens.

Color palette

A palette that conveys financial trust. The deep blues communicate institutional security, while the lighter tones bring modernity and accessibility.

#0F172A
#1E40AF
#3B82F6
#60A5FA
#F0F9FF
Navy (#0F172A)

Sidebar, headers, main text

Blue (#1E40AF)

Primary buttons, links, accents

Ice (#F0F9FF)

Backgrounds, surfaces, hover states

Design system components

Each component was designed with clear variants, documented interactive states and consistent spacing tokens.

Buttons

Primary Secondary Danger Disabled

Text field

maria@ejemplo.com
Helper text: valid email format

Status badges

Approved Pending Rejected In progress

Metric card

$24,500
Balance disponible

Mockup — Dashboard

The user's main panel brings the financial summary, quick actions and latest transactions into one unified view.

app.fintechpay.com/dashboard
FintechPay
Dashboard
Transferencias
Inversiones
Perfil
Hola, María
Bienvenida a tu panel financiero
$24,500
Balance
$8,200
Inversiones
+12.4%
Rendimiento
Últimas transacciones
Transferencia a Juan Pérez
Hace 2 horas
-$1,200
Aprobado
Depósito recibido
Ayer
+$3,500
Aprobado
Inversión en FCI
Hace 3 días
-$2,000
Pendiente

Mockup — Mobile onboarding

The identity verification flow was designed to minimize friction: clear steps, visible progress and direct actions.

PASO 2 DE 3
Verifica tu identidad
Subí una foto de tu DNI para validar tu cuenta.
Subí tu documento
JPG, PNG o PDF. Máximo 5MB.
Frente
Subido
Dorso
Pendiente
Continuar

Deliverable in numbers

The design system shipped as a versioned Figma library, with usage documentation for every component.

40+
Components
3
Breakpoints
12
Prototyped screens
100%
Tokens documented

Need a design system for your product?

We build design systems that unify the visual experience and speed up your team's development.

Let's Talk