Wallflake

Overview

Wallflake is a precision financial data platform designed for African market participants who demand real-time clarity on the Ghana Stock Exchange, US equities, and pan-African indices. The design system embodies 'Financial Minimalism with Warm Accents'—a aesthetic that rejects sterile, cold fintech interfaces in favor of a dark, high-contrast canvas (background #070b11, text #eef2f7) punctuated by a distinctive warm gold accent (#d4a843) that signals trust, wealth, and African heritage. The UI prioritizes data legibility through monospace typography for prices, generous whitespace between market cards, and a carefully calibrated color hierarchy where green (#22c55e) signals gains, red (#ef4444) signals losses, and gold anchors all interactive elements. The emotional response is one of calm authority: users feel they are holding a professional-grade tool, not a gamified trading app.

Wallflake's voice is direct, precise, and locally grounded. Sentences are short and fact-forward ('Ghana's market, live.' 'Six desks here. Twenty-two markets behind them.'). The brand avoids hype, jargon, and false urgency. Instead, it speaks to the investor's intelligence: 'Everything you need to hold a view — and hold yourself to it.' Vocabulary leans technical (index, composite, desk, tape) but remains accessible to retail investors new to African markets. The tone is confident without arrogance, helpful without condescension.

Colors

The color system is built on a deep, near-black foundation (surface #070b11, surface-dim #050709) that provides maximum contrast for financial data while reducing eye strain during extended trading sessions. The surface stack progresses through container layers (surface-container-low #0d1420, surface-container #0f1520, surface-container-high #121a28) to create subtle visual separation between cards, modals, and overlays without introducing visual noise.

Primary (#d4a843) is the warm gold accent used exclusively for call-to-action buttons ('Get Started', 'Get the app'), active navigation links, hover states on cards, and the brand logo. This color is never used for body text or backgrounds—it is reserved for moments of user decision. On-primary (#080c13) ensures 7+ contrast ratio for acces

Typography

The type system pairs Sora (a geometric, high-contrast sans-serif) for headlines and display text with DM Sans (a humanist sans-serif) for body copy and UI labels, and JetBrains Mono for financial data (prices, indices, stock codes). This three-font strategy reflects the three layers of information: brand voice (Sora headlines), instructional content (DM Sans body), and precise data (monospace). Display (60px, 800 weight, -0.04em tracking) is used for hero headlines like 'Ghana's market, live.' and commands attention through weight and negative letter-spacing. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure section breaks and card titles. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) are used for hero copy and desc

Layout

The page layout uses a fixed 12-column grid with a max-width container of 1160px, centered with 24px horizontal gutters on desktop and 12px on mobile. The spacing scale (unit: 8px, xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently: section breaks use lg spacing (40px margin-top/bottom), card padding is md (24px), and internal card gaps are sm (12px). The hero section occupies full viewport height with a two-column layout (left: headline + copy + CTAs, right: market index card), separated by 40px gap. Below the fold, sections are stacked vertically with 40px separation and a 1px border-top in rgba(255, 255, 255, 0.08). Cards in grid layouts (desk cards, exchange cards) use auto-fill with minmax(280px, 1fr) to ensure responsive reflow without media queries. The ticker

Elevation & Depth

Depth is conveyed through a three-level shadow system and subtle border treatments rather than layered backgrounds. Level 1 (Base): the body background (#070b11) with no shadow; borders are 1px solid rgba(255, 255, 255, 0.08). Level 2 (Standard Card): background #0d1420 with 1px border rgba(255, 255, 255, 0.08) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); on hover, border-color shifts to primary (#d4a843) and transform: translateY(-2px) creates lift. Level 3 (Modal/Overlay): background #121a28 with 1px border rgba(255, 255, 255, 0.14) and box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) for maxim

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are applied strategically to soften hard edges while maintaining a technical, data-forward aesthetic. Buttons and filter chips use border-radius: 10px (DEFAULT) to create a slightly rounded, approachable button form that is neither pill-shaped nor sharp. Cards and containers use 12px (md) for a more pronounced roundness that signals containment and focus. Input fields use 10px (DEFAULT) to match buttons and create visual cohesion in forms. Navigation links and small interactive elements use 8px (sm) for subtle rounding that does no

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses background: linear-gradient(135deg, #d4a843, #f0c96a) with padding 13px 22px, height 44px, border-radius 10px, and font-weight 700. On hover, opacity shifts to 0.9 and transform: translateY(-1px) creates subtle lift. The button-secondary component uses a transparent background with a 1px border in rgba(255, 255, 255, 0.14), text color #eef2f7, and the same padding/height/radius. On hover, background becomes rgba(255, 255, 255, 0.05) and border-color shifts to primary. All button transitions use 0.15s ease. Navigation links (.nav-link) use padding 8px 11px, border-radius 8px, and transition color 0.15s, background 0.15s; active links (.nav-link.active) set color to primary (#d4a843).

Cont

Do's and Don'ts

**Do**

• Do use the gold accent (#d4a843) exclusively on CTAs, active states, and hover effects—never on body text or backgrounds.
• Do apply monospace typography (JetBrains Mono) to all financial data: prices, indices, percentage changes, and stock codes.
• Do maintain 40px (lg spacing) between major sections and 24px (md spacing) inside cards to preserve whitespace and readability.
• Do use the three-tier text hierarchy: #eef2f7 for primary content, #93a0b4 for secondary labels, #5b6b82 for tertiary metadata.
• Do apply 0.15s ease transitions to all interactive elements (buttons, cards, links) for consistent, snappy feedback.
• Do use green (#22c55e) for positive market movements and red (#ef4444) for negative movements—never reverse these associations.
• Do apply border-radius 10px to buttons and filter chips, 12px to cards, and 999px to badges to create a graduated shape hierarchy.

**Don't**

• Don't use primary (#d4a843) for body text, backgrounds, or non-interactive elements—it is reserved for CTAs and active states.
• Don't apply shadows to text; instead, use color contrast and font-weight to establish hierarchy.
• Don't mix serif fonts into the type system; stick to Sora (headlines), DM Sans (body), and JetBrains Mono (data).
• Don't use border-radius values outside the defined scale (sm: 8px, DEFAULT: 10px, md: 12px, lg: 16px, xl: 20px, full: 999px).
• Don't apply transitions longer than 0.15s to interactive elements; keep feedback snappy and responsive.
• Don't use the secondary green (#22c55e) or error red (#ef4444) for anything other than market movement indicators and status badges.
• Don't reduce the container max-width below 1160px on desktop; maintain the generous layout rhythm to avoid visual clutter.