Payvand

Overview

Payvand is a modern fintech platform serving Tajikistan's banking sector, built on a foundation of institutional trust and digital-first accessibility. The design system employs a 'Professional Clarity' aesthetic: a clean, light-dominant interface (background #fcfcfc, text #071437) punctuated by a vibrant primary blue (#0a7cff) that signals confidence and action. The brand personality is direct, competent, and reassuring—never casual, always precise. The UI prioritizes information hierarchy through generous whitespace (24px gutter, 40px section spacing), clear typography contrast (45px headline-lg at 700 weight for hero statements), and purposeful color accents (green #50cd89 for gains, red #f1416c for alerts). Voice example: 'Your exchange rate locked at 9.3288 USD—transfer now or save for later.'

Colors

The color system is anchored by Primary Blue (#0a7cff), used exclusively for interactive elements—buttons, links, active states, and focus indicators. This accent appears against white (#ffffff) or light surfaces to maintain 7:1 contrast ratio (WCAG AAA). Secondary Green (#50cd89) reinforces positive financial outcomes and growth indicators; it pairs with its container (#d4f5e8) for badge backgrounds. Tertiary Gold (#ffc700) highlights promotional or time-sensitive offers. Error Red (#f1416c) signals warnings, declined transactions, or critical alerts. The surface stack progresses from #fcfcfc (base) through #f9f9f9 (container-lowest) to #dcdee0 (container-highest), enabling subtle depth without introducing darkness. On-surface text (#071437) is a deep navy that reads comfortably on light

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modern professionalism. Display (60px, 700 weight, -0.04em tracking) anchors hero sections; Headline-lg (45px, 700 weight) dominates page titles and hero copy. Headline-md (32px, 600 weight) structures section breaks. Title-lg (20px, 600 weight) labels card headers and subsections. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) carry narrative content and descriptions. Label-md (14px, 600 weight, 0.01em tracking) labels buttons, form fields, and UI controls. Label-sm (13px, 500 weight, 0.02em tracking) is reserved for badges, captions, and tertiary information. All body text uses 1.5x line-height multiplier (28px for 18px text) to ensure readability in dense financial

Layout

The layout employs a 12-column responsive grid with a max-width of 1320px, centered on the viewport. Primary gutter spacing is 24px (md token), with section separation using 40px (lg token) vertically. Hero sections occupy full-width with a dark navy background (#2b2b40 or #071437 for contrast against white text), while content sections below use the light surface (#fcfcfc). Cards and containers are arranged in flexible grids: 1 column on mobile, 2 columns on tablet, 3–4 columns on desktop. Whitespace is generous—minimum 12px (sm token) between inline elements, 24px (md token) between card groups. Container max-width of 1320px prevents line-length from exceeding 80 characters on ultra-wide displays, maintaining readability. Padding inside cards is consistently 24px (md token), with interna

Elevation & Depth

Depth is achieved through a three-tier shadow system without relying on dark overlays or blur effects. Level 1 (sm elevation: 0 1px 2px rgba(0,0,0,0.06)) is applied to subtle dividers, inactive cards, and form inputs—barely perceptible but defining boundaries. Level 2 (md elevation: 0 3px 8px rgba(0,0,0,0.15)) lifts interactive elements on hover: buttons, expandable cards, and dropdown panels. Level 3 (lg elevation: 0 9px 25px rgba(132,128,177,0.28)) is reserved for modals, floating action buttons, and scroll-to-top widgets—the purple-tinted shadow (#847f80 at 28% opacity) adds warmth and visu

Shapes

The shape philosophy is 'Institutional Softness'—combining sharp, professional edges with subtle rounding to humanize the interface. Buttons use full-radius (border-radius: 9999px, or 25px on 44px-tall buttons) to signal primary actions and create a friendly, approachable CTA. Cards and containers use 0.5rem (8px) radius, balancing modernity with clarity—sharp enough to feel structured, rounded enough to avoid coldness. Input fields use 0px radius with a bottom-border treatment (1px solid #c0c0c0, transitioning to #0a7cff on focus), evoking traditional form design and reducing visual clutter.

Components

Action Elements Buttons are the primary interaction primitive. Primary buttons use #0a7cff background, white text, 44px height, 11px 20px padding, and full-radius (25px). On hover (150ms transition), background shifts to #0a5cc9 and shadow elevates to 0 3px 8px rgba(0,0,0,0.15). On active/press, background darkens to #003d99 and transform: scale(0.98) provides tactile feedback. Secondary buttons have transparent background, #0a7cff text, 1px solid #c0c0c0 border, and 44px height; on hover, background becomes #e6e6e6. Disabled buttons (opacity: 0.5, cursor: not-allowed) apply to both variants.

Containers & Surfaces Cards are the primary content container: white background (#ffffff), 8px border-radius, 24px padding, and 0 1px 2px rgba(0,0,0,0.06) shadow. On hover, background transit

Do's and Don'ts

**Do**

• Do use Primary Blue (#0a7cff) exclusively for interactive elements—buttons, links, focus states—to create a consistent, scannable interface.
• Do apply 24px (md) gutter spacing between major sections and 12px (sm) between inline elements to maintain visual rhythm and readability.
• Do use full-radius (25px) on primary CTAs and 8px radius on cards to balance approachability with professionalism.
• Do transition all interactive states over 150ms using cubic-bezier(0.4, 0, 0.2, 1) easing to feel responsive without jarring.
• Do pair headline-lg (45px, 700 weight) with body-md (16px, 400 weight) for optimal contrast and hierarchy in content sections.
• Do apply md-level shadow (0 3px 8px rgba(0,0,0,0.15)) on hover to lift interactive elements and signal affordance.

**Don't**

• Don't use secondary colors (green, gold, red) for primary CTAs—reserve them for status indicators, badges, and supporting actions.
• Don't apply shadows to input fields or form containers; use bottom-border treatment instead to reduce visual clutter.
• Don't exceed 1320px container max-width; this preserves line-length and prevents text from becoming difficult to scan.
• Don't use opacity below 0.5 for disabled states; instead, use a neutral gray background (#e6e6e6) and cursor: not-allowed.
• Don't mix border-radius values within a single component family—buttons use full-radius, cards use 8px, inputs use 0px (bottom-border only).
• Don't animate background-color transitions faster than 150ms or slower than 300ms; this range feels responsive without feeling sluggish.