Current design specFintech

Neobank: white canvas with full-bleed vivid indigo #4114ec blocks, bold Söhne headings, fully-rounded pill buttons, and neon debit-card pops in imagery.

⚠ native app, site only

Browse Current in the interactive gallery

Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.

Marketing site

Source: current.com (live DOM, computed styles + color census), 2026-07-06; motion/effects/responsive capture 2026-07-07. Coverage: marketing site. Product (mobile banking app): site only (native app; no web dashboard). Responsive: partial (see §10).

Visual Theme & Atmosphere

Modern fintech that is bold and energetic yet trustworthy. A clean white canvas is punctuated by full-bleed vivid-indigo blocks, bold Söhne headings, fully-rounded pill buttons, and large soft-rounded cards. Headings are bold 700 with tight tracking — a confident, punchy voice that runs counter to the light-weight trend. Elevation stays mostly flat: separation comes from bold color blocks and generous whitespace, not shadows. Bright neon debit-card colors (lime, teal, magenta, orange) appear only inside product imagery; the UI chrome stays white + indigo + black. Feels: confident, youthful, premium-but-accessible banking.

Color Palette & Roles

Core

TokenHexRole / usage
ink#000000Primary text, black pill buttons
ink-800#24262eNear-black text
gray-600#3d4049Strong body text
gray-500#4e525eBody text
gray-400#737582Secondary / muted text, placeholders
white#ffffffPage canvas, text on indigo

Brand & surfaces

TokenHexRole / usage
indigo#4114ecSignature brand — full-bleed hero blocks, accents
blue-gray#ebeff2Light surface / panel bg
off-white#f9f9f9Subtle section bg
teal#005f86Minor accent (links/graphics)

Rule: white canvas with black text; the vivid indigo #4114ec is the hero/brand block color (white text on it). Buttons are black or white pills — never indigo — keeping indigo as a bold backdrop, not a control color. Neon card colors live inside photos/illustrations only.

Typography Rules

Font stack: soehne (Söhne), ui-sans-serif, system-ui, sans-serif. Clean neo-grotesque; numeric/financial figures read crisp in Söhne.

RoleSize/LineWeightTracking
Hero (h1)~56700-2%
Section (h2)32700-0.64px (-2%)
Subhead20–24500–700-1%
Body16 / 224000
UI / button16700-0.16px
Caption13–144000

Patterns: headings are BOLD (700) with tight tracking — a confident, punchy voice (counter to the light-weight trend). Body is a plain 16/400 near-black (16px / 20–24 line). Buttons carry the bold weight too.

Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.