DataCash

Overview

DataCash is a fintech investment platform that transforms currency deposits into data rewards through a transparent, daily-return model. The brand serves emerging-market users seeking accessible investment vehicles with tangible utility—converting financial gains directly into mobile data bundles. The aesthetic is "Data-Driven Minimalism": a deep navy canvas (#050c18) paired with a vibrant cobalt accent (#0b84d6) and warm gold accents (#d4af37), creating a premium yet approachable interface that evokes trust, clarity, and modern financial sophistication. The UI hierarchy prioritizes numerical transparency and rapid task completion, with generous whitespace and a 12-column grid that scales fluidly from mobile to desktop.

The brand voice is confident, direct, and jargon-light. DataCash speaks to users in plain language: "Deposit, monitor daily returns, and redeem data rewards" rather than "leverage algorithmic yield optimization." Tone is reassuring without being patronizing—the copy acknowledges the user's financial literacy while removing friction. Example sentence in brand voice: "Your ₦10,000 earns daily. Withdraw anytime after 5 days, or convert to 500MB of data."

Colors

The color system is built on a dark, high-contrast foundation optimized for financial clarity and extended screen time. Surface (#050c18) is the deepest navy, providing a calm, professional backdrop that reduces eye strain during portfolio monitoring. The surface stack progresses through container-low (#0a1220), container (#071a30), and container-high (#0f2847), enabling subtle depth layering without introducing visual noise. Primary (#0b84d6) is a saturated cobalt blue reserved exclusively for interactive elements—call-to-action buttons, active states, links, and focus indicators. This color is never used for passive text or backgrounds; it must always signal actionability. On-primary is pure white (#ffffff) for maximum contrast and legibility on the cobalt field. Secondary (#061225) is a

Typography

The type system pairs Montserrat (display, headlines) with Plus Jakarta Sans (body, labels), creating a hierarchy that balances authority with approachability. Montserrat at weights 700–800 commands attention in headlines and hero copy, using tight tracking (-0.04em to -0.01em) to reinforce density and confidence. Display (60px, 800 weight, -0.04em) is reserved for hero sections and major page titles. Headline-lg (40px, 700 weight, -0.02em) anchors section headers. Headline-md (28px, 700 weight, -0.01em) is used for subsection titles and card headers. Plus Jakarta Sans at 400–600 weight handles body and label text, with generous line-height (24–28px) to maintain readability on dark backgrounds. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and prominent descriptions. B

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, enabling flexible responsive scaling from 320px mobile to 1920px+ desktop. The gutter (24px) is consistent across all breakpoints, with padding scaled via the spacing scale: xs (4px) for tight micro-interactions, sm (12px) for compact form fields, md (24px) for standard section padding, lg (40px) for major section separation, and xl (64px) for hero and full-width containers. The hero section uses lg spacing (40px) for vertical rhythm, creating breathing room between the header and main content. Cards and containers use md padding (24px) internally, with md spacing (24px) between adjacent cards. Mobile layouts collapse to single-column stacking with sm gutters (12px) on screens below 768px. The container-max (

Elevation & Depth

Depth in DataCash is conveyed through subtle shadow layering and border definition rather than dramatic drop-shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small cards, md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and modals, and lg (0 12px 30px rgba(0, 0, 0, 0.12)) for hero containers and elevated modals. All elevated surfaces must include a 1px solid border at {colors.outline-variant} (#4a5a6e) to define edges against the dark background. The hero container uses lg elevation (0 12px 30px rgba(0, 0, 0, 0.12))

Shapes

The shape language is "Geometric Precision"—combining sharp, defined corners with selective rounding to balance modernity and approachability. Buttons use full rounding (border-radius: 9999px) to create pill-shaped CTAs that feel friendly and clickable. Cards and containers use xl rounding (1.5rem / 24px) for hero sections and primary containers, creating a soft-modern aesthetic. Secondary cards and stat boxes use md rounding (0.75rem / 12px) for a more structured, data-forward appearance. Form inputs use DEFAULT rounding (0.5rem / 8px) for a clean, utilitarian feel. Badges and accent elements

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#0b84d6) background with {colors.on-primary} (white) text, full rounding (9999px), and padding 12px 28px (height 44px). Apply font-weight: 600 and {typography.label-md} (14px). On hover, transition background-color to rgba(11, 132, 214, 0.9) over 150ms cubic-bezier(0.4, 0, 0.2, 1). On focus, add box-shadow: 0 0 0 3px rgba(11, 132, 214, 0.2). Button-secondary uses transparent background with {colors.on-surface} text, a 1px border at {colors.outline-variant}, and the same rounding and padding. On hover, transition to {colors.surface-container-high} background. Never apply primary color to secondary buttons; maintain clear visual hierarchy through background vs. outline distinction.

Con

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0b84d6) exclusively for interactive elements (buttons, links, focus states) to maintain clear affordance hierarchy.
• Do apply {spacing.lg} (40px) between major sections and {spacing.md} (24px) between subsections to create visual breathing room.
• Do use Montserrat 700–800 weight for headlines with -0.02em to -0.04em tracking to reinforce authority and density.
• Do include a 1px border at {colors.outline-variant} on all elevated surfaces to define edges against the dark background.
• Do transition all interactive state changes (hover, focus, active) over 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth, predictable feedback.
• Do use {rounded.full} (9999px) on primary CTAs and {rounded.xl} (24px) on hero containers to signal importance and premium positioning.
• Do maintain minimum 16px font-size for all body text and interactive labels to meet WCAG AA accessibility standards.
• Do use {colors.tertiary} (#d4af37) sparingly—only on accent badges and premium highlights—never on interactive elements or primary CTAs.

**Don't**

• Don't use pure white (#ffffff) for body text; always use {colors.on-surface} (#eaf2ff) to reduce eye strain on dark backgrounds.
• Don't apply {colors.primary} to passive elements like backgrounds, dividers, or non-interactive text; reserve it exclusively for CTAs and focus states.
• Don't use sharp corners (0px border-radius) on interactive elements; apply at least {rounded.DEFAULT} (8px) to improve touch targets and visual softness.
• Don't layer multiple shadows on a single element; use one clean shadow per elevation level (sm, md, or lg) to maintain clarity.
• Don't use font-weight below 400 for body text or below 600 for labels; maintain visual hierarchy through size and weight, not thinness.
• Don't omit borders on cards and containers; the 1px border at {colors.outline-variant} is essential for defining surfaces against the dark background.
• Don't use {colors.secondary} (#061225) or near-black text on dark backgrounds; always use {colors.on-surface} (#eaf2ff) for legibility.
• Don't apply transitions longer than 150ms on interactive elements; keep feedback snappy and responsive to user input.