TopChange

Overview

TopChange is a peer-to-peer currency exchange platform that transforms financial transactions into a seamless, trustworthy experience. The design system embodies 'Energetic Minimalism'—a movement that pairs high-saturation accent colors with restrained, sophisticated neutrals to create urgency without chaos. The brand serves globally distributed users seeking fast, transparent currency exchange, and the UI evokes confidence through the interplay of deep navy gradients (background: linear-gradient(135deg, #0a1738 0%, #1e45a6 100%)) and a vivid magenta primary (#ea0061) that commands attention on every call-to-action. The emotional response is one of modern security: users feel they're in control of a powerful, cutting-edge financial tool.

The voice is direct, reassuring, and action-oriented. TopChange speaks in short, declarative sentences that emphasize speed and trust: 'Your Trust, Our Priority.' 'Secure Your Peace of Mind, One Transaction at a Time.' The vocabulary avoids jargon while maintaining technical credibility—words like 'direct,' 'fast,' 'cheap' are paired with 'secure' and 'transparent.' Brand personality is youthful but professional, optimistic but grounded. Example sentence in TopChange's voice: 'Exchange currency in seconds, not days—your funds, your control, your peace of mind.'

Colors

TopChange's color palette is built on a foundation of deep, cool neutrals anchored by a striking magenta accent. The primary color (#ea0061) is the brand's signature—it appears on all CTAs, active states, and key interactive elements, creating visual momentum and urgency. Secondary blue (#285cdd) supports the primary in data visualization, secondary buttons, and informational hierarchies, while tertiary green (#62bb94) is reserved for success states and positive confirmations. The surface stack progresses from the darkest navy (#0a1738, surface-container-lowest) through mid-tone purples (#1e45a6, surface-container) to lighter grays (#3b3b59, surface-container-highest), enabling subtle depth without sacrificing contrast. On-surface text (#f7f7fa) maintains WCAG AAA compliance against all da

Typography

The type system pairs Vazirmatn (Persian-optimized sans-serif, weights 100–900) for headlines and UI labels with roboto_GC (Roboto, weights 200–500) for body text and English numerals. This dual-font strategy honors the site's RTL (right-to-left) language support while maintaining Latin legibility. Display (60px, weight 700, line-height 68px, letter-spacing -0.04em) is reserved for hero headlines and major section titles, commanding attention through size and negative letter-spacing that tightens the visual rhythm. Headline-lg (40px, weight 600, line-height 48px) anchors subsections and modal titles. Body-md (16px, weight 400, line-height 24px) is the workhorse for form labels, card content, and navigation text. Label-md (14px, weight 500, line-height 20px) is applied to buttons and badges

Layout

TopChange uses a 12-column fluid grid with a max-width of 1305px, centered on desktop and full-width on mobile with 24px horizontal gutters (--spacing-xl). The page rhythm is governed by a semantic spacing scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major content blocks, and xl (64px) for hero-to-content transitions. The hero section spans full-width with a gradient background (linear-gradient(135deg, #0a1738 0%, #1e45a6 100%)) and uses lg spacing (40px) for vertical breathing room between headline, subheadline, and CTA. Cards and containers use md padding (24px) internally and are separated by lg spacing (40px) vertically. The sticky navigation bar (min-height: 66px, position: sticky, top: 0) uses xxl-11 padding

Elevation & Depth

Depth in TopChange is achieved through a layered shadow and transparency system that avoids pure black shadows. Level 1 (Base): The background is a dynamic gradient (linear-gradient(135deg, #0a1738 0%, #1e45a6 100%)) with no shadow. Level 2 (Standard Card): Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at rgba(255, 255, 255, 0.1) and background rgba(255, 255, 255, 0.05), creating a frosted-glass effect. Level 3 (Elevated/Modals): Modals and popovers use box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) with background rgba(255, 255, 255, 0.08) and a 1px border at rgba(255, 255

Shapes

TopChange employs 'Technical Roundness'—a shape philosophy that balances approachability with precision. Buttons and pills use the full radius (55px, border-radius: 55px), creating a friendly, modern silhouette that signals action and forward momentum. Cards and containers use lg radius (1rem / 16px) for a softer, more contained feel. Input fields and smaller interactive elements use DEFAULT radius (0.5rem / 8px) for a neutral, functional appearance. The rationale: full-radius buttons (55px) are the brand's signature shape, appearing on every CTA and creating instant visual recognition. Lg rad

Components

Action Elements Buttons are the primary interaction mechanism and use the full-radius shape (55px) to signal importance. Primary buttons (button-primary) use background: {colors.primary} (#ea0061), textColor: {colors.on-primary} (#ffffff), padding: 12px 32px, height: 48px, and fontWeight: 500. On hover, the background shifts to {colors.inverse-primary} (#c90054) with a colored shadow (box-shadow: 0 4px 15px rgba(234, 0, 97, 0.4)) to create tactile feedback. Secondary buttons (button-secondary) use a transparent background with a 2px border at {colors.primary} and the same padding/height, allowing users to choose between commitment (primary) and exploration (secondary). Ghost buttons (button-ghost) have no background or border, using only text color ({colors.on-surface}) and a subtle ho

Do's and Don'ts

**Do**

• Do use the primary magenta (#ea0061) exclusively on CTAs, focus rings, and active states—it's the brand's signature accent and must never be diluted or overused.
• Do maintain the deep navy-to-purple gradient (linear-gradient(135deg, #0a1738 0%, #1e45a6 100%)) as the hero background to establish immediate brand recognition and emotional tone.
• Do apply lg spacing (40px) between major content sections to create generous white-space and reduce cognitive load for users scanning complex financial data.
• Do use Vazirmatn for all headlines and UI labels to honor the RTL language support and maintain visual hierarchy across Persian and English content.
• Do layer transparency (rgba(255, 255, 255, 0.05–0.12)) over dark backgrounds instead of adding pure black shadows to maintain the ethereal, modern aesthetic.

**Don't**

• Don't use the primary magenta (#ea0061) on non-interactive elements or backgrounds—it must remain reserved for CTAs and active states to preserve its visual impact.
• Don't apply shadows darker than rgba(0, 0, 0, 0.5) or blur-radius greater than 44px, as this breaks the frosted-glass aesthetic and creates visual heaviness.
• Don't mix Roboto and Vazirmatn in headlines—use Vazirmatn exclusively for all display and headline text to maintain language-specific typographic integrity.
• Don't reduce button padding below 12px or height below 44px; TopChange's buttons must remain large and tappable to accommodate mobile users and convey confidence.
• Don't use the secondary blue (#285cdd) or tertiary green (#62bb94) as primary accents—they are supporting colors only and must never compete with the magenta primary for visual dominance.