Web Design & Design System for Tipalti Fintech Platform Turning complex payment processes into a super clean, easy-on-the-eyes web interface—that’s the magic behind the Tipalti fintech platform redesign by creative agency Clay Global.
The star of the show here is the flexible modular card system paired with crisp, well-defined typography rules. Color-wise, the UI pops with warm yellow accents set against deep dark mode backgrounds or fresh, clean white canvases. Floating glass cards give real-time payment updates, cash flow charts, and intuitive status tags. Plus, a smart component grid keeps overwhelming financial data tables neatly organized so users stay focused on the task at hand.
Card padding is dialed in perfectly, giving every element plenty of breathing room. A minimal icon set combined with a custom grid style makes skimming heavy data sets a total breeze.
Switching over to mobile, the design rules adapt seamlessly to smaller screens. Total payout amounts pop with bold, oversized sans-serif typography next to eye-catching yellow circular buttons. Smooth video clips highlight money transfers between bank accounts with effortless flair.
Back on desktop, expansive dashboard cards break down complex invoice processing into simple, bite-sized steps. The design system leverages clear color coding to differentiate quick approvals, tax checks, and payment confirmations. High contrast keeps everything crisp and legible in both light and dark themes.
This project is a fantastic real-world example of how smart design helps finance teams work faster and with total confidence. The entire system seamlessly ties the main website to deep software dashboards under one cohesive design language—a fantastic reference for design teams building fintech apps or complex dashboards!
Check out the full case study at clay.global/work/tipalti.
Check out these interface videos:
Thiết kế Web và Design System cho nền tảng Fintech Tipalti
Biến những quy trình thanh toán phức tạp thành một giao diện web cực kỳ gọn gàng và dễ nhìn – đó chính là thành quả trong dự án tái thiết kế nền tảng fintech Tipalti do creative agency Clay Global thực hiện.
Điểm sáng của thiết kế nằm ở bộ card mô-đun linh hoạt kết hợp với quy tắc typography rõ ràng. Về phối màu, giao diện tạo điểm nhấn bằng sắc vàng ấm áp nổi bật trên nền dark mode sâu thẳm hoặc nền trắng sạch sẽ. Những chiếc card hiệu ứng kính lơ lửng (floating glass cards) hiển thị thông báo thanh toán theo thời gian thực, biểu đồ dòng tiền và các thẻ trạng thái rất trực quan. Bên cạnh đó, hệ thống lưới component giúp đưa hàng loạt bảng dữ liệu tài chính phức tạp vào trật tự ngăn nắp, giữ cho người dùng sự tập trung tối đa vào từng tác vụ.
Khoảng cách padding của các thẻ được tính toán vừa vặn giúp mọi element đều có khoảng trống để “thở”. Bộ icon tối giản cùng style grid tùy chỉnh hỗ trợ việc đọc và quét dữ liệu dung lượng lớn nhanh chóng hơn.
Khi chuyển sang giao diện mobile, các quy tắc thiết kế được tinh chỉnh phù hợp với màn hình nhỏ. Tổng số tiền thanh toán hiển thị bằng font sans-serif bản lớn đi kèm nút bấm tròn màu vàng bắt mắt. Các đoạn video ngắn minh họa chuyển động mượt mà khi di chuyển tiền giữa các tài khoản ngân hàng.
Trên màn hình desktop, các dashboard card bản rộng phân chia các bước xử lý hóa đơn thành từng giai đoạn đơn giản. Design system sử dụng mã màu rõ ràng để phân biệt trạng thái duyệt nhanh, kiểm tra thuế hay xác nhận thanh toán. Độ tương phản cao giúp văn bản luôn rõ ràng ở cả giao diện sáng và tối.
Dự án này là ví dụ thực tế cho thấy thiết kế thông minh có thể giúp các team tài chính làm việc nhanh chóng và tin cậy ra sao. Toàn bộ hệ thống kết nối trang web chính với các màn hình phần mềm chuyên sâu dưới một ngôn ngữ thiết kế đồng nhất. Đây là nguồn tham khảo thú vị cho các team thiết kế đang phát triển ứng dụng fintech hay giao diện dashboard.
Xem chi tiết case study tại clay.global/work/tipalti.
Tham khảo các đoạn video giao diện:
cdn.sanity.io/files/r115idoc/production/da20cc27780e1022a39cb070f9544a2e70f72f49.mp4
cdn.sanity.io/files/r115idoc/production/aa2e1a2515a545999423051dbcffd28af239bee2.mp4
cdn.sanity.io/files/r115idoc/production/3807df149ab96cb103aec5477e705f27c7394482.mp4
