Real Exchange

Overview

Real Exchange is a fintech platform designed for professionals conducting real estate and currency transactions with institutional-grade precision. The brand embodies 'Professional Minimalism'—a design philosophy that strips away unnecessary ornamentation while maintaining warmth and accessibility. The interface prioritizes clarity and trust through a restrained color palette anchored by a confident corporate blue (#216ba5), paired with a vibrant orange accent (#ff6803) that signals opportunity and action. The emotional response is one of competence: users feel they are engaging with a serious financial tool, yet the soft rounded corners (border-radius: 0.3rem to 1.5rem) and generous whitespace (24px gutters, 40px section spacing) prevent the experience from feeling cold or intimidating. The brand voice is direct, professional, and reassuring—never jargon-heavy, always outcome-focused. Example sentence in brand voice: 'Your exchange rate is locked in. Settlement completes in 2 hours.'

Colors

The color system is built on a foundation of neutral grays (#f0f0f0 surface, #333333 on-surface, #aeaeae outline) that provide a clean, professional canvas. Primary (#216ba5) is the signature corporate blue used exclusively for primary CTAs (LOGIN button, active states, focus rings), selected states in date pickers, and key interactive elements—it conveys trust and authority without aggression. Secondary (#ff6803) is a warm, energetic orange reserved for accent text ('Click Here!' links, 'New User' labels, holiday highlights in calendars), creating visual interest and guiding attention to secondary actions. Tertiary (#3dcc4a) is a success green used sparingly for positive confirmations and highlighted date ranges. The surface stack progresses from #f8f8f8 (surface-container-lowest, used fo

Typography

The type system uses Helvetica Neue as the primary typeface, chosen for its institutional credibility and excellent legibility at small sizes (12px label-sm through 60px display). The hierarchy is built on weight contrast rather than dramatic size jumps: display (60px, 700 weight) anchors hero sections, headline-lg (40px, 600 weight) structures major sections, and body-md (16px, 400 weight) carries transaction details and form labels. Letter-spacing is tightened on display and headline levels (-0.04em to -0.01em) to reinforce authority, while body text receives +0.02em spacing for improved scannability in dense financial data. All labels use 600 weight (label-md: 14px, label-sm: 12px) to ensure form instructions and button text command attention. Apply text-shadow: 0 1px 2px rgba(0, 0, 0,

Layout

The layout follows a 12-column grid with a max-width of 1280px, enabling responsive scaling from mobile (single column) to desktop (multi-column layouts). The spacing scale is semantic: 24px (md) is the standard gutter between sections and card padding, 40px (lg) separates major content blocks (login form from app store badges), and 12px (sm) is used for internal component spacing (input padding, button label margins). The login form itself is centered in a 400px container, leaving breathing room on all sides. Whitespace is treated as a design material—the 24px padding inside input fields (13.5px vertical, 16px horizontal per computed styles) and the 24px card padding create a rhythm that feels spacious without wasting screen real estate. The date picker uses a compact 0.3rem border-radius

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics real-world light and material hierarchy. Level 1 (Base/Surface): no shadow; flat, grounded elements like input fields and the page background. Level 2 (Standard Cards/Modals): 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, date pickers, and form containers—this shadow is subtle enough to feel integrated with the page, yet distinct enough to signal interactivity. Level 3 (Elevated/Hover States): 0 8px 24px rgba(0, 0, 0, 0.2) applied on button hover and card hover states, creating a lifting effect that signals user interaction. Fo

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are used consistently to soften the institutional feel of a financial platform, yet never so rounded as to appear playful or casual. Buttons use border-radius: 9999px (full) to create pill-shaped CTAs that feel modern and clickable; this is the most distinctive shape in the system and is reserved exclusively for primary and secondary action buttons. Input fields and cards use 0.3rem (4.8px) or 0.5rem (8px) for subtle rounding that maintains a professional edge while avoiding sharp corners. Date picker cells and calendar navigatio

Components

Action Elements Buttons are the primary interaction mechanism and use two distinct styles. The primary button (LOGIN) applies {colors.primary} (#216ba5) background with {colors.on-primary} (white) text, 16px horizontal padding, 48px height, and border-radius: 9999px. On hover, the background shifts to {colors.inverse-primary} (#2a87d0) with a transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) and box-shadow elevation increases from md to lg (0 8px 24px rgba(0, 0, 0, 0.2)). Secondary buttons (Sign Up) use transparent background with a 2px solid border in {colors.primary}, matching the primary button's padding and height. Links like 'Click Here!' and 'Contact Us' use {colors.secondary} (#ff6803) text with a 1px bottom border; on hover, both text and border shift to #cf5300 with the same

Do's and Don'ts

**Do**

• Do use {colors.primary} (#216ba5) exclusively for primary CTAs and focus states—it is the brand's signature and must remain reserved for the most important actions.
• Do apply 24px (md spacing) as the default padding inside cards and form containers; this creates the professional, spacious feel that defines the brand.
• Do use border-radius: 9999px (full) only for buttons; this distinctive shape signals interactivity and prevents visual confusion with other rounded elements.
• Do transition all interactive states (hover, focus, active) over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) to maintain the brand's smooth, professional motion.
• Do apply the 0 3px 8px rgba(0, 0, 0, 0.15) shadow to all cards and modals; this is the system's standard depth cue and must be consistent across the platform.

**Don't**

• Don't use {colors.secondary} (#ff6803) for primary actions or large UI surfaces—it is an accent color reserved for secondary links, labels, and highlights to maintain visual hierarchy.
• Don't apply border-radius greater than 0.75rem to input fields or standard cards; excessive rounding dilutes the professional aesthetic and conflicts with the button shape language.
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2) on any element; this is the maximum elevation and using it on non-interactive surfaces flattens the hierarchy.
• Don't mix typefaces; Helvetica Neue is the sole typeface family across all text, including labels, body copy, and display text—system fonts or serif alternatives break brand consistency.
• Don't apply color to text smaller than 14px (label-md) without also applying text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) when placed over busy backgrounds; small text loses legibility without this treatment.