01

Velo Website Case Study

UI Design Claude Code Design System SaaS 2026
Velo platform — full overview
Overview

The Concept

Velo was conceptualized to redefine the visual standard for global payment infrastructures. The primary goal was to design an interface from the ground up that balances the heavy complexity of international compliance and tax management with a frictionless, high-converting user experience. By leveraging a sophisticated dark mode contrasted with warm, dynamic gradients, authority, trust, and a premium feel for an international audience.

From the initial wireframes to the interactive prototype, the process focused on building a scalable, component-driven design system. The experience is brought to life through fluid scroll interactions, such as the dynamic checkout cards. Every detail was deliberately structured to prove that a high-end interface can seamlessly align with technical performance and drive real business growth.

1 Week delivery
120+ Components
3 Core flows
−34% Task time
Interaction

Dynamic Checkout Experience

Cards pull up on scroll, each panel reveals in sequence through the checkout system.

Design System

Component-Driven Design

Every element starts from a single source of truth, a token-based system with a strict palette, typography scale, and a component library built for consistency from one screen to a hundred.

01 — Color Palette

Dark backgrounds create depth. Warm gradients draw the eye to what matters: actions and data.

Base #0B0B0C
Surface #1A1A1D
Elevated #25252A
Accent #FF6B00 → #FF9A3C
Text / UI #FFF · #B8B8BD
02 — Typography

A single typeface, Inter, at different weights creates a clear visual hierarchy, even non-designers feel it instantly.

Hero Velo 56px · 800
Heading Dashboard 32px · 700
Body Payment confirmed successfully. 16px · 400
Label Transaction ID 12px · 400
03 — Space & Motion

An 8-point grid keeps everything aligned. Smooth easing makes interactions feel premium, not abrupt.

8px
16px
24px
32px
48px
6px
Sharp
12px
Cards
24px
Modals

Pills
Easing
cubic-bezier(0.4, 0, 0.2, 1)