# Current — Marketing Site Design Spec

> 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).

## 1. 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.

## 2. Color Palette & Roles

### Core
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#000000` | Primary text, black pill buttons |
| ink-800 | `#24262e` | Near-black text |
| gray-600 | `#3d4049` | Strong body text |
| gray-500 | `#4e525e` | Body text |
| gray-400 | `#737582` | Secondary / muted text, placeholders |
| white | `#ffffff` | Page canvas, text on indigo |

### Brand & surfaces
| Token | Hex | Role / usage |
|---|---|---|
| indigo | `#4114ec` | Signature brand — full-bleed hero blocks, accents |
| blue-gray | `#ebeff2` | Light surface / panel bg |
| off-white | `#f9f9f9` | Subtle section bg |
| teal | `#005f86` | Minor 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.

## 3. 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.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | ~56 | 700 | -2% |
| Section (h2) | 32 | 700 | -0.64px (-2%) |
| Subhead | 20–24 | 500–700 | -1% |
| Body | 16 / 22 | 400 | 0 |
| UI / button | 16 | 700 | -0.16px |
| Caption | 13–14 | 400 | 0 |

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.

## 4. Component Stylings

### Buttons (pills)
- Primary (on light): bg black `#000`, white text, weight 700, fully rounded, h48, padding `14px 24px`, 16px, tracking -0.16px.
- Primary (on indigo): bg white, black text, same pill shape/weight.
- Secondary / ghost: transparent, ink text, pill, 1px hairline or none; hover subtle fill.

### Inputs
- White/blue-gray bg, hairline border, radius 8–12 (or pill for search), ink text, gray `#737582` placeholder. Focus: indigo border.

### Cards / panels
- Radius `30px`, generous padding. Neutral: white or blue-gray `#ebeff2`. Feature cards pair a bold heading with a product photo or a bright neon card render.

### Hero / color blocks
- Full-bleed indigo `#4114ec` panels with white bold headline and a white pill CTA; alternate with white and blue-gray sections.

### Nav
- White, wordmark left, center links, right: ghost sign-in + black "Get Started" pill.

## 5. Layout Principles

- Nav: ~72px, white.
- Hero: bold headline + subhead + black/white pill CTA, with an app screenshot or neon-card render, often on white then an indigo block below.
- Body: alternating white / blue-gray / full-bleed indigo sections; large 30px-radius cards; app store badges; benefit grids.
- Wide centered content, roomy whitespace.
- Spacing: 4px grid; large, confident section rhythm.

## 6. Depth & Elevation

- Radii: buttons/pills `9999px` (fully rounded), chips `999px`, cards/panels `30px` (large, soft), small controls `8px`.
- Control heights: primary button `48px`. Button padding: `14px 24px`.
- Elevation: mostly flat; separation via bold color blocks (indigo / blue-gray) and generous whitespace. Cards use soft rounding over shadows.

## 7. Motion

- Baseline: `all 0.2s ease` on most interactive elements (hovers, links, buttons).
- Signature: springy `transform 0.5s cubic-bezier(0.65,…)` on card/phone lifts, and notably slow `all 0.75s ease-in-out` section cross-fades — 200ms basics paired with 500–750ms feature transitions.
- Entrances: keyframes `slideFromBottom` (entrance slide), `bannerMoveUp`, plus `spin`. Nothing animates at rest (0 live WAAPI animations).
- One small autoplay loop video (in-phone demo, ~82px). No animation library detected (no GSAP/Three/Lottie).

## 8. Backgrounds, Effects & WebGL

- No canvas/WebGL, no backdrop-filter blurs.
- Neon gradient sweeps over the vivid-indigo/white canvas (computed stops, fading to transparent):
  - indigo `rgb(89,0,245)` → orange `rgb(244,118,53)` → transparent
  - gold `rgb(244,203,69)` → orange `rgb(244,118,53)` → indigo `rgb(89,0,245)` → transparent
  - cyan `rgb(92,211,221)` → blue `rgb(93,123,249)` → magenta `rgb(228,55,255)` → transparent (the neon card colors as a sweep)
- Signature elevation exception: floating phone/card mockups carry an extreme layered soft drop shadow — `0 140px 56px rgba(0,0,0,.01), 0 79px 47px rgba(0,0,0,.05), 0 35px 35px rgba(0,0,0,.09), …` — floating them high above the flat page.

## 9. Do's and Don'ts

### Do
- Keep a white canvas with black text; use vivid indigo `#4114ec` only as a full-bleed hero/brand block color carrying white text.
- Make buttons black or white fully-rounded pills (black `#000` + white text on light, flipping to white + black text on indigo).
- Set headings BOLD 700 with tight tracking; keep body a plain 16/400; carry the bold weight into buttons.
- Separate sections with bold color blocks (indigo / blue-gray) and generous whitespace; give cards a large soft 30px radius.
- Keep bright neon card colors (lime, teal, magenta, orange) inside photos/illustrations and debit-card renders only — or as soft neon gradient sweeps behind them.
- Use indigo for the input focus border.
- Keep motion at 200ms ease for basics, reserving the springy 500ms transforms and slow 750ms cross-fades for feature/section transitions; enter with slide-from-bottom, then rest still.
- Reserve the extreme layered soft drop shadow for floating phone/card mockups only.

### Don't
- Don't make indigo-colored buttons or controls — indigo is a backdrop, never a control color.
- Don't use neon accents as UI chrome; UI chrome stays white + indigo + black.
- Don't rely on shadows for UI elevation — stay flat, using color blocks and whitespace instead (the layered soft drop belongs to mockup imagery only).
- Don't use light-weight display type — headings are deliberately bold 700, counter to the light-weight trend.
- Don't add WebGL, canvas effects, or backdrop-filter blurs — none are used.
- Don't animate anything at rest — motion is entrance- and interaction-driven only.

## 10. Responsive Behavior

Partial capture: a `min-width: 480px` breakpoint was observed (breakpoint list truncated). Mobile nav pattern, type scale-down, and column collapse: not captured.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#000000` (near-black `#24262e`) · Muted `#737582` · Border: hairline (hex not captured) · Accent `#4114ec`
- Font: `soehne (Söhne), ui-sans-serif, system-ui, sans-serif` · Body: 16px · Radius: pill 9999px / card 30px / small 8px · Control height: 48px
- Focus: indigo `#4114ec` border on inputs

<current_design_language>
Use the Current design language: clean white canvas with black text (grays #24262e / #737582), punctuated by full-bleed VIVID INDIGO #4114ec blocks that carry white text. Font is Söhne: headings BOLD 700 with tight tracking (56px hero, -2%), body plain 16/400; buttons bold too. Buttons are fully-rounded PILLS — black #000 with white text on light, flipping to white on indigo; never indigo controls. Cards use a large 30px radius; surfaces white / blue-gray #ebeff2 / off-white #f9f9f9. UI stays flat; neon gradient sweeps (indigo→orange, cyan→blue→magenta) and an extreme layered soft drop shadow appear only behind floating phone/card mockups. Motion: 200ms ease basics, springy 500ms transforms, slow 750ms section cross-fades; slide-from-bottom entrances, still at rest. Feels: confident, youthful, trustworthy fintech. Avoid: indigo-colored buttons or controls, neon colors as UI chrome, shadow-based UI elevation, and light-weight display type.
</current_design_language>