Finex was building multiple product surfaces simultaneously: a landing page, a mobile app, a web dashboard, and marketing materials. Without a unified design foundation, each surface risked looking like it came from a different company.

The challenge was to create a brand identity and component system that works across all of these contexts while feeling premium enough for a financial product where trust is everything.

Designed the Finex logo and brand mark

Built the comprehensive UI component library in Figma

Established the visual design system (color, typography, spacing, elevation)

Created high-fidelity mockups showing the system in context

Produced production-ready files for the development team

The Finex brand mark needed to communicate three things: movement (money in transit), connectivity (global reach), and security (your money is safe).

I explored over a dozen directions before landing on the final mark. The chosen design uses a geometric form that suggests both a shield (security) and a forward arrow (speed, progress). The green color palette reinforces financial growth and stability, a deliberate contrast to the blue that dominates most fintech branding.

The logo works at all sizes: as a full wordmark on the landing page, as a compact app icon on mobile, and as a favicon in browser tabs.

Building a component system for a fintech product is different from a typical SaaS tool. Financial interfaces have specific needs:

Data density: Dashboards show transaction tables, balance summaries, and exchange rate charts. Components need to handle dense information without feeling cluttered.

State complexity: A single transaction card can be in 6+ states (pending, processing, completed, failed, refunded, disputed). Every component needs clear visual differentiation for each state.

Accessibility: Financial data must be readable by everyone. Color alone can't carry meaning; I paired every color indicator with an icon or text label.

The component library covers:

Buttons (primary, secondary, ghost, destructive) with loading and disabled states

Input fields (text, number, currency, search) with validation states

Cards (transaction, balance, exchange rate, notification)

Data tables with sorting, filtering, and pagination

Charts (line, bar, donut) for financial data visualization

Navigation (top bar, bottom tab bar, sidebar)

Modal sheets and dialogs

Status badges and progress indicators

Every component uses auto layout and variant properties in Figma, so designers can swap states and sizes without breaking the layout.

The design system defines the rules that keep every Finex surface consistent:

Color: A green-primary palette with neutral grays for backgrounds and text. Semantic colors (success, warning, error, info) are defined separately from brand colors so they remain consistent even if the brand palette evolves.

Typography: A scale of 7 sizes with defined line heights and letter spacing. Headings use a semi-bold weight for authority; body text uses regular weight for readability. Number-heavy screens use tabular figures so columns align properly.

Spacing: An 8px base grid with a defined spacing scale (4, 8, 12, 16, 24, 32, 48, 64). This keeps layouts rhythmic and predictable across all surfaces.

Elevation: 4 shadow levels for layering (flat, raised, floating, overlay). Used consistently to indicate interactive hierarchy: flat for background elements, raised for cards, floating for dropdowns, overlay for modals.

Finex logo and brand mark (multiple formats and sizes)

Complete component library with variants and auto layout (50+ components)

Visual design system documentation (color, typography, spacing, elevation)

High-fidelity mockups showing the system applied across product surfaces

Production-ready Figma files with developer annotations

This design foundation powers the entire Finex product family. The component system and visual language established here were used across the landing page, mobile app, and dashboard, ensuring a consistent experience at every touchpoint.