Spade

Overview

Spade is a fintech data platform that transforms unstructured transaction records into verified, actionable intelligence through AI-driven processing. The design system embodies "Data Clarity Minimalism"—a philosophy that prioritizes information hierarchy, technical precision, and nature-inspired color language to make complex financial data feel approachable and trustworthy. The aesthetic combines clean typography (naNSuperX for display, Polar for body) with a carefully curated palette rooted in forest and sage tones (#3f7308 moss primary, #18280e forest accents, #f4faed sage backgrounds), creating a visual identity that feels both authoritative and human. The brand voice is direct, confident, and data-literate: "Spade takes messy transaction data and turns it into structured, verified records." Every interface element serves the core mission of making financial data legible and actionable.

Colors

The color system is anchored by a moss-green primary (#3f7308) used exclusively for interactive elements, CTAs, and focus states—this is the signature accent that signals agency and trust in financial contexts. The surface stack progresses from pure white (#ffffff) through sage gradations (#f4faed, #f0fae6, #d8e5ca) to create visual depth without introducing darkness; this progression supports both light-mode clarity and subtle layering for card hierarchies. Secondary colors include lagoon (#4fa68f) for supporting actions and data highlights, and sun (#ebe46a) for tertiary emphasis or status indicators. The on-surface text is forest-dark (#090f05, not pure black) to reduce eye strain on bright backgrounds. Error states use red (#e40014) with high contrast against white. All surfaces mainta

Typography

The type system uses a two-font strategy: naNSuperX (a geometric, high-contrast display face) for headlines and hero content, and Polar (a humanist sans-serif) for body and UI text, with PolarMono for data labels and code-like content. Display (84px, weight 560) commands attention in hero sections with tight -0.04em letter-spacing; Headline-lg (48px, 560) breaks major sections; Headline-md (32px, 560) introduces subsections. Body-lg (18px, 400) and Body-md (16px, 400) maintain 1.5x line-height (24–28px) for comfortable reading in data-dense contexts. Label-md (14px, 600) and Label-sm (12px, 520 in mono) are used for UI labels, badges, and transaction metadata. Apply text-shadow 0 1px 2px rgba(9, 15, 5, 0.08) on small labels (label-sm) when placed over busy backgrounds or data visualization

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a gutter of 24px between columns and 40px (lg spacing) for section separation. The page rhythm alternates between full-width hero sections (with 48px horizontal padding on desktop) and contained card grids (typically 2–3 columns on desktop, 1 on mobile). White-space is generous: lg spacing (40px) separates major sections, md spacing (24px) separates cards and components, and sm spacing (12px) separates inline elements. Container max-widths are set to 1024px for text-heavy sections and 872px for form-focused areas to optimize reading line-length. The spacing scale is semantic: use xs (4px) for micro-interactions and icon padding, sm (12px) for component internal padding, md (24px) for card padding and section ma

Elevation & Depth

Depth is achieved through a three-tier shadow system and subtle background layering, avoiding dark overlays. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Elevated Card): 0 3px 8px rgba(9, 15, 5, 0.15) with 1px border in outline-variant (#d1d5dc), used for standard cards and input fields; this shadow has a 3px blur and 8px spread to create a soft, diffused effect. Level 3 (Modal/Overlay): 0 8px 24px rgba(9, 15, 5, 0.12) with a 24px spread for maximum separation, used for modals and floating panels. Hover states elevate cards from Level 2

Shapes

The shape philosophy is "Technical Approachability"—rounded corners are minimal and functional, never decorative. The rounded scale uses 0.25rem (4px) for small elements like badges and icon buttons, 0.5rem (8px) as the DEFAULT for standard buttons and inputs (this is the most-used radius, balancing softness with technical precision), 0.75rem (12px) for cards and larger containers, and 1.5rem (24px) for hero sections and full-width containers. Full (9999px) is used only for pill-shaped badges and toggle buttons. The rationale: 4–8px radii feel modern and approachable without sacrificing the te

Components

Action Elements Buttons use a 48px height (including 12px vertical padding) with 24px horizontal padding to meet touch targets and maintain visual balance. Primary buttons (#3f7308 moss on white) use a 1px solid border in the same color to define the button edge crisply; on hover, the background darkens to primary-fixed-dim (#3f7308 at 80% opacity) with a 200ms transition. Secondary buttons are transparent with a 1px border in primary (#3f7308) and moss text; on hover, the background fills with surface-container-high (#d8e5ca). Ghost buttons have no border or background, only text in on-surface-variant (#6a7282); on hover, they gain a surface-container background. All buttons use label-md typography (14px, 600) and apply a 1px outline-offset on focus (outline: 2px solid primary, outlin

Do's and Don'ts

**Do**

• Do use moss primary (#3f7308) exclusively for interactive elements, CTAs, and focus states—never for body text or large backgrounds.
• Do maintain 48px minimum touch targets for all buttons and interactive elements; use 12px vertical and 24px horizontal padding as the standard.
• Do apply the sage surface stack (#f4faed, #d8e5ca) for container backgrounds to create visual hierarchy without introducing darkness.
• Do use naNSuperX for display and headline text (48px+) to convey authority; reserve Polar for body and UI text.
• Do apply 0 3px 8px rgba(9, 15, 5, 0.15) shadow to cards and elevated surfaces; elevate to 0 8px 24px on hover or active states.
• Do use 1px borders in outline-variant (#d1d5dc) to define card and input boundaries; never use borders thicker than 1px except for focus states.

**Don't**

• Don't use primary (#3f7308) for body text, backgrounds, or large surface areas—it's reserved for interactive elements only.
• Don't apply dark overlays, glassmorphism, or backdrop-filter effects; clarity and legibility are non-negotiable in a fintech context.
• Don't use border-radius larger than 1.5rem (24px) except for pill-shaped badges; excessive rounding undermines technical credibility.
• Don't mix font families within a single component; use naNSuperX for headlines and Polar for body—never combine them in a single text block.
• Don't apply shadows larger than 0 8px 24px or use multiple layered shadows; the three-tier system is sufficient for all depth needs.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use forest (#090f05) for text and white (#ffffff) for surfaces to reduce eye strain.