Ballance

Overview

Ballance is a fintech-forward spend management platform designed for high-growth teams who demand clarity and control over their financial operations. The design system embodies 'Dark-First Precision'—a modern aesthetic that pairs deep navy backgrounds (#0a0e27) with a vivid coral-red accent (#f93f28) to create maximum contrast and visual hierarchy. This approach transforms complex payment data into an intuitive, scannable interface where every interaction feels intentional and every CTA commands attention. The brand personality is confident, direct, and uncompromising: no unnecessary ornamentation, no soft edges where sharpness matters, no ambiguity in action. The voice is professional yet approachable—think 'we handle the complexity so you don't have to.' Example sentence in brand voice: 'Your team's spending is now visible in real time, down to the card and transaction.'

Colors

The color system is built on a high-contrast dark foundation with a single, commanding accent. Primary (#f93f28) is the brand's signature action color—used exclusively on primary CTAs ('REQUEST A DEMO'), critical alerts, and focus states. It must never be used for passive elements or backgrounds. Secondary (#1c78b0) supports data visualization and secondary actions, providing a cool counterpoint to the warm primary. Tertiary (#575d3c) is reserved for status indicators and supporting UI elements. The surface stack ranges from near-black (#050810 for surface-dim) to a slightly lighter navy (#282d48 for surface-container-highest), creating subtle depth without sacrificing the dark-first aesthetic. On-surface text is pure white (#ffffff) for maximum legibility on dark backgrounds; on-surface-v

Typography

The type system uses a two-tier approach: BDO Grotesk Variable (fontWeight 900–1000) for display and headline scales, and Geist Variable / Inter for body and label text. Display text (52px, weight 1000, lineHeight 60px) is reserved for hero headlines like 'Move payments without friction'—its extreme weight and tight tracking (-0.03em) create visual dominance and brand recognition. Headline-lg (40px, weight 900) is used for section titles; headline-md (28px, weight 700) for subsections. Body text uses Geist Variable at 16–18px with a 1.5 line-height ratio (24–28px) for comfortable reading on dark backgrounds. Labels and CTAs use Inter at 12–14px with increased letter-spacing (0.05–0.08em) to enhance scannability and convey precision. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small

Layout

The page grid is a 12-column fluid layout with a max-width of 1280px, centered with equal margins on desktop. The spacing scale is semantic: use lg (40px) for major section separation, md (24px) for component padding and inter-element spacing, sm (12px) for internal component spacing, and xs (4px) for micro-adjustments. The hero section uses a 24px gutter on all sides, with the main headline centered and the CTA pair (primary + secondary buttons) positioned 40px below the subheading. Cards and containers use md padding (24px) internally, with md (24px) gaps between card items in grids. Maintain consistent vertical rhythm: every section should be separated by at least lg spacing (40px), and no two elements should touch without at least sm spacing (12px) between them. The container max-width

Elevation & Depth

Depth is conveyed through subtle layering and border treatments rather than aggressive shadows. The base elevation uses no shadow; surface-container elements (cards, modals) use elevation-md (0 3px 8px rgba(0, 0, 0, 0.15)) to lift them 1–2 levels above the background. Elevated modals and popovers use elevation-lg (0 8px 24px rgba(0, 0, 0, 0.20)) for maximum separation. All interactive surfaces (buttons, inputs, cards) include a 1px border at rgba(255, 255, 255, 0.08) to define edges without relying on shadow alone. On hover, increase the border opacity to rgba(255, 255, 255, 0.12) and apply a

Shapes

The shape philosophy is 'Functional Minimalism'—sharp, precise corners that reflect the brand's no-nonsense approach to fintech. Buttons use a 2px border-radius (rounded-sm), creating a subtle softness that prevents a harsh, brutalist appearance while maintaining clarity. Cards and containers use 8px (rounded-md) for a slightly more approachable feel. Input fields use 4px (rounded-DEFAULT) to align with button styling. Modals and elevated surfaces use 12px (rounded-lg) to create visual distinction from standard cards. Full-width elements like badges and pills use 9999px (rounded-full) for maxi

Components

Action Elements Buttons are the primary conversion drivers and must be unmistakable. Primary buttons use background: {colors.primary} (#f93f28), textColor: white, padding: 17px 33px, height: 48px, rounded: 2px, and typography: label-md (14px, weight 600, letter-spacing 0.05em). On hover, shift to {colors.primary-container} (#ff6b5a) with a 150ms ease transition. On active/pressed, darken to #e63a24. Secondary buttons use a transparent white background (rgba(255, 255, 255, 0.08)) with a 1px border (rgba(255, 255, 255, 0.12)), same padding and height as primary, and on-surface text color. On hover, increase background opacity to 12% and border to 20%. Ghost buttons (used for tertiary actions like 'read the blog') have no background, no border, and on-surface text; on hover, add a subtle

Do's and Don'ts

**Do**

• Do use primary (#f93f28) exclusively on high-priority CTAs and focus states; it is the brand's signature accent and loses impact if overused.
• Do maintain the dark background (#0a0e27) as the dominant surface; it is the foundation of the brand's premium fintech aesthetic.
• Do apply 1px borders (rgba(255, 255, 255, 0.08)) to all interactive surfaces to define edges in the dark theme without relying on shadows alone.
• Do use BDO Grotesk Variable (weight 900–1000) for headlines to create visual dominance and brand recognition; never use lighter weights for display text.
• Do apply elevation-md (0 3px 8px rgba(0, 0, 0, 0.15)) on card hover to create subtle depth and signal interactivity.
• Do use semantic spacing (lg: 40px for sections, md: 24px for components, sm: 12px for internal spacing) to maintain consistent vertical rhythm.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels over photographic backgrounds to ensure legibility.

**Don't**

• Don't use primary (#f93f28) on passive elements, backgrounds, or secondary buttons; reserve it for CTAs and critical interactive states only.
• Don't apply aggressive drop-shadows (> 0.20 opacity) on cards; the dark background already provides sufficient contrast without visual noise.
• Don't use border-radius values below 2px or above 12px (except for full-width pills at 9999px); maintain the 'Functional Minimalism' aesthetic.
• Don't use font weights below 400 for body text on dark backgrounds; the reduced contrast will fail accessibility standards.
• Don't mix typefaces within a single component; use BDO Grotesk for headlines and Geist/Inter for body text consistently.
• Don't apply color overlays or gradients to the primary button; keep it solid #f93f28 for maximum clarity and impact.
• Don't use near-white text (> 95% opacity) on dark backgrounds for extended reading; use pure white (#ffffff) for headlines and on-surface text, and #c5c7cc for secondary text.