Tazapay

Overview

Tazapay is a fintech infrastructure platform designed for global money movement—enabling businesses to accept, hold, convert, and payout across 100+ markets through a single, unified API. The design system embodies 'Professional Clarity'—a fintech aesthetic that prioritizes trust, accessibility, and data-driven decision-making. The visual language combines a deep navy primary (#0b3747) with a vibrant teal secondary (#1fa7d9), creating a confident yet approachable interface that reassures users handling high-value transactions. The UI avoids unnecessary ornamentation; every pixel serves a functional purpose. The emotional response is one of competence and reliability: users feel they are in control of complex global operations, not overwhelmed by them.

The brand voice is precise, professional, and human. Tazapay speaks to business operators and finance teams with clarity and respect—never condescending, never breathless. Vocabulary patterns emphasize simplicity over jargon: 'Accept, hold, convert, and payout' rather than 'multi-rail settlement orchestration.' The tone is confident but not arrogant; solutions-oriented but not pushy. Example sentence in brand voice: 'Send money to 173 countries. No local entities. No multiple integrations. One API.'

Colors

The color system is built on a foundation of trust and clarity. Primary (#0b3747, a deep navy-teal) is the signature brand color, used exclusively for CTAs, active states, and primary navigation. It conveys stability and financial authority. Secondary (#1fa7d9, a bright cyan-teal) is the accent color for highlights, success states, and supporting interactive elements—it adds energy and draws attention to key workflows without overwhelming the interface. Tertiary (#97a6ba, a muted slate-blue) is used for secondary text, disabled states, and supporting UI elements. The surface stack is anchored in white (#ffffff) for the main canvas, with a carefully calibrated gray scale for containers and depth: surface-container-low (#e2e8f0), surface-container (#cbd5e1), and surface-container-high (#d1d5

Typography

The type system uses Inter as the primary font family (loaded from Google Fonts), with Macan as the display-tier override for maximum visual impact on hero headlines. The hierarchy is built on six core levels: display (64px, 600 weight, -0.02em tracking) for hero headlines like 'Global money movement, made simple'; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for subsection headers; title-lg (20px, 600 weight) for card titles and form labels; body-lg (18px, 400 weight) for introductory paragraphs and descriptions; body-md (16px, 400 weight) for body copy and list items; label-md (14px, 600 weight, 0.01em tracking) for button text, form labels, and UI labels; and label-sm (12px, 500 weight, 0.02em tracking) for helper text, error messages, and legal copy

Layout

The page layout uses a 12-column fluid grid with a max-width container of 1200px, centered on the viewport. The spacing scale is semantic and consistent: unit (8px) is the base increment; xs (4px) is used for micro-spacing between inline elements; sm (12px) for compact component padding; md (24px) for standard section gutters and card padding; lg (40px) for major section separation; and xl (64px) for hero-to-content transitions. The gutter (24px) is applied to all container sides on desktop, reducing to 16px on tablet and 12px on mobile via media queries. White-space is generous but purposeful—sections are separated by lg spacing (40px) to create visual breathing room and signal distinct content blocks. Cards and containers use md padding (24px) internally, with md spacing (24px) between c

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy drop-shadows common in older fintech designs. The elevation scale has three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separation of inline elements like badges; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals that need clear visual lift; and lg (0 3px 3px -1.5px rgba(54, 65, 82, 0.05), 0 6px 6px -3px rgba(54, 65, 82, 0.05), 0 12px 12px -6px rgba(54, 65, 82, 0.05)) for floating elements like tooltips and popovers. Shadows use a cool, slightly desaturated black (rgba(54, 65, 82, ...)) rather than pure b

Shapes

The shape philosophy is 'Functional Precision'—border-radius values are chosen to balance approachability with professional restraint. Buttons use full (50px) border-radius to create pill-shaped CTAs that feel modern and inviting without sacrificing clarity. Cards and containers use md (12px) radius for a subtle, professional appearance that avoids the harsh corners of flat design while remaining distinct from the rounded buttons. Input fields and form elements use DEFAULT (8px) radius for a clean, utilitarian look that signals 'functional form' rather than 'decorative container.' Smaller UI e

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses a solid navy background (#0b3747) with white text, full border-radius (50px), and padding of 12px 32px for a 48px total height. On hover, the background shifts to primary-fixed-dim (#164e63) and the element translates up by 1px (transform: translateY(-1px)) to signal interactivity. On active (click), the button scales to 0.98 to provide tactile feedback. All button transitions use 0.15s ease timing for snappy, responsive feel. The button-secondary variant uses a transparent background with a 1px border (color: #d1d5db) and navy text; on hover, the border becomes navy and the background shifts to surface-container-low (#e2e8f0). Disabled buttons reduce opacity to 0.6 and set cursor: not-a

Do's and Don'ts

**Do**

• Do use primary navy (#0b3747) exclusively for CTAs, active states, and primary navigation—it is the brand's signature color and should never be diluted or overused on secondary elements.
• Do apply the full button border-radius (50px) to all primary CTAs to create visual distinction and signal 'tap me' to users.
• Do use the secondary teal (#1fa7d9) sparingly for highlights, success states, and supporting interactive elements—it should feel like an accent, not a competing primary.
• Do maintain 24px gutter spacing on all container sides on desktop, reducing proportionally on smaller screens, to ensure consistent visual rhythm and readability.
• Do apply the focus ring (0 0 0 3px rgba(15, 58, 74, 0.1)) to all interactive elements for keyboard navigation accessibility—never remove the outline.
• Do use the elevation scale (sm, md, lg) consistently: sm for inline elements, md for cards and modals, lg for floating elements—never invent new shadow values.

**Don't**

• Don't use primary navy (#0b3747) for body text, backgrounds, or non-interactive elements—it should be reserved for CTAs and active states to maintain visual hierarchy.
• Don't apply border-radius greater than full (50px) or less than sm (4px) to any component—the defined scale exists to maintain visual consistency.
• Don't mix font families within a single component—use Inter for all UI text and Macan only for display-tier headlines (64px+).
• Don't remove or hide the focus ring on inputs and buttons, even if it feels 'ugly'—keyboard users depend on it for navigation, and WCAG compliance requires it.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds—use on-primary (#ffffff) or on-secondary (#ffffff) from the token system.
• Don't create custom shadow values—use only sm, md, or lg from the elevation scale to maintain visual consistency across the product.