---
title: "Current design system"
variant: extended
source: https://current.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/current-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Current · Design System

> Spacious, editorial banking with a sharp monochrome backbone

**Theme:** light · **Industry:** fintech · **Source:** https://current.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Current’s homepage pairs an airy white canvas and oversized, lightweight typography with stark black navigation and calls to action. Lifestyle photography and vivid financial illustrations add warmth and energy without disrupting the page’s restrained, editorial rhythm.

## North star

Keep the page predominantly white and editorial, using black for structure and conversion while confining colour to product imagery and a precise footer accent.

## Overview

The visual system is built around a white canvas and high-contrast black typography, with nearly all content sections staying light rather than alternating through colour bands. A compact black header anchors the page, while a black conversion band near the footer provides a second strong focal point. Söhne’s broad range of light weights supports large, calm headlines; heavier weights are reserved for navigation and controls. Content is arranged in spacious split layouts and a three-column benefits row, with generous separation between feature stories. Lifestyle photography is framed as rectangular editorial imagery, while product benefits use bright, playful illustrations that remain contained within their image areas. Outlined pill buttons handle secondary actions; filled black pills mark primary conversion. A restrained grey is used for muted footer copy and pale grey for subtle interface fills. The warm-to-purple gradient appears as a narrow footer accent, not a general page background.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light CTA surface, and reversed text on the black navigation and buttons. |
| Slate Muted | `#737582` | `--color-slate-muted` | neutral | Muted footer and supporting copy; secondary to black body and heading text. |
| Current Ink | `#000000` | `--color-current-ink` | brand | Header band, headings, primary CTA fills, body text, and the dark conversion section near the footer. |
| Illustration Gold | `#f4cb45` | `--color-illustration-gold` | accent | Warm endpoint of the footer gradient and a supporting colour within product illustrations. |
| Illustration Orange | `#f47635` | `--color-illustration-orange` | accent | Gradient transition colour in the footer accent; not a broad page surface. |
| Electric Violet | `#5900f5` | `--color-electric-violet` | accent | Violet portion of the thin footer gradient; vivid colour is otherwise mainly confined to visual assets. |
| Footer Divider | `#dfe5ec` | `--color-footer-divider` | semantic | Subtle footer hairlines and separators against white. |
| Cloud Fill | `#f3f6f8` | `--color-cloud-fill` | surface | Pale interface fill, including the mobile-number field and restrained footer UI details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Current Ink) · `--color-text` → `#000000` (Current Ink) · `--color-text-muted` → `#737582` (Slate Muted) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#dfe5ec` (Footer Divider) · `--color-accent` → `#f4cb45` (Illustration Gold) · `--color-accent-2` → `#f47635` (Illustration Orange) · `--color-accent-3` → `#5900f5` (Electric Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#737582` | `#ffffff` | 4.57:1 | AA |
| `#737582` | `#000000` | 4.6:1 | AA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#f4cb45` | `#ffffff` | 1.56:1 | fail |
| `#f4cb45` | `#000000` | 13.47:1 | AAA |

### Gradients

- `linear-gradient(0.62deg, rgb(244, 203, 69) 0.27%, rgb(244, 118, 53), rgb(89, 0, 245) 50.25%, rgba(0, 0, 0, 0) 100.22%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| soehne | `--font-body` | webfont | 400, 100, 300, 700 | Site-wide headings, body copy, navigation, buttons, captions, and disclosures. | Inter |

- **soehne:** Use light weights for large headlines, regular/light body copy, and bold navigation; keep tracking neutral or slightly tight.

### Type scale — Augmented Fourth (ratio ≈ 1.456, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 100 | 1 | -0.04em | — | soehne | Oversized hero headline, with very light weight and tight tracking. |
| h1 | 72px | 300 | 1.2 | -0.001em | — | soehne | Primary feature and section headlines. |
| h2 | 48px | 100 | 1.2 | -0.02em | — | soehne | Secondary feature headlines and major content blocks. |
| h3 | 24px | 100 | 1.4 | -0.02em | — | soehne | Compact feature titles and subsection headings. |
| body | 20px | 300 | 1.6 | 0 | — | soehne | Supporting descriptions and explanatory product copy. |
| caption | 12px | 400 | 1.4 | -0.013em | — | soehne | Small labels, footnotes, and disclosure text. |
| button | 18px | 100 | 1.6 | 0 | — | soehne | CTA and secondary action labels. |
| nav | 16px | 700 | 1.4 | -0.01em | — | soehne | Header navigation and high-emphasis menu labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 5, 8, 14, 16, 20, 24, 40, 48, 80, 120 px.
- Section rhythm 120px · element gap 24px · card padding — · max content width 1344px.

Use a centered content area with a measured maximum width of 1344px and a spacious density. The hero balances headline and lifestyle image across two columns; later sections alternate split feature layouts with a three-column benefits row and testimonial columns. Align most content to the left, reserving centered alignment for the reviews heading. Maintain generous section rhythm (measured section gap 120) and clear separation between editorial blocks. The footer expands into a dense legal area beneath a compact navigation region.

## Shape & elevation

- Radius: button `9999px` · card `9999px` · pill `9999px`
- Shadow `xl` (button): `rgba(0, 0, 0, 0.01) 0px 140px 56px 0px, rgba(0, 0, 0, 0.05) 0px 79px 47px 0px, rgba(0, 0, 0, 0.09) 0px 35px 35px 0px, rgba(0, 0, 0, 0.1) 0px 9px 19px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 0px`
- Motion: standard transition `0.75s ease-in-out` on interactive elements.

The page is predominantly flat: white sections rely on whitespace and contrast rather than cards or prominent shadows. Use thin black outlines for secondary pill buttons and subtle grey hairlines in the footer. The black header and CTA band create depth through solid colour blocks; reserve the measured soft shadow for raised conversion controls only when matching the reference.

## Imagery

Use rectangular lifestyle photography for the hero and teen banking feature, with the person or product clearly visible against simple backgrounds. Product-benefit assets are colourful, graphic illustrations and mockups, including cards, money, and app screens; keep their colour contained within their frames. The page also uses a restrained row of media logos and small security-themed icons. Avoid applying colour treatments to the surrounding white canvas.

## Components

### Black navigation bar

Full-width black header with white brand mark, bold white navigation, and a white pill-shaped Get Started CTA.

### Hero signup

Large lightweight headline beside rectangular lifestyle photography, with a pale mobile-number field and black pill CTA.

### Outlined secondary button

White or transparent pill with a 2px black border, bold black label, and measured 9999px radius.

### Feature story

Editorial split layout pairing a large headline and short copy with product imagery or an illustration; include a small category label where shown.

### Benefits row

Three evenly aligned benefit items with compact illustrations, short titles, and supporting copy.

### Testimonial columns

Three review columns with star ratings, quote text, and App Store attribution, separated with fine vertical rules.

### Footer conversion band

Black CTA section with a white headline and light signup field, finished with a narrow yellow-to-orange-to-violet gradient accent.

### Measured component styles

- **Primary button** (“Get Started”): background #000000 · text #ffffff · radius 9999px · padding 14px 24px · 700 16px soehne
- **Secondary button** (“Learn More”): transparent background · text #000000 · border 2px solid #000000 · radius 9999px · padding 14px 24px · 700 16px soehne
- **Input**: transparent background · text #000000 · radius 0px · padding 8px 0px 0px 0px · 400 16px soehne
- **Card** (“Enter your mobile number Get Started”): transparent background · text #ffffff · border 2px solid · radius 999px · padding 0px · 400 16px soehne
- **Navigation item** (“Spend Save Invest Advance”): transparent background · text #ffffff · radius 0px · padding 0px · 700 16px soehne

## Do

- Keep the main canvas white and sections visually open.
- Use Söhne-like light typography for large headlines.
- Reserve black fills for primary calls to action and strong anchors.
- Use outlined pills for secondary actions.
- Give photography and illustrations their own clear rectangular frames.
- Keep the warm-to-violet gradient as a narrow footer detail.

## Don't

- Do not alternate every section with coloured backgrounds.
- Do not make large headlines heavy or tightly boxed.
- Do not use vivid accent colours as general text or page surfaces.
- Do not turn every feature into a floating card.
- Do not replace the spacious editorial rhythm with dense grids.
- Do not add prominent shadows to ordinary content sections.

## Agent prompt

Build a new fintech page in Current’s restrained editorial style. Use a white Gallery White (#ffffff) canvas, Current Ink (#000000) for headings, body text, primary buttons, and structural bands, and Slate Muted (#737582) only for secondary footer copy. Set headings in a light Söhne-like sans serif and reserve bold weights for navigation and controls. Compose the page from spacious split feature sections, a compact three-column benefit area, and clear left-aligned copy. Pair rectangular lifestyle photography with contained, colourful product illustrations rather than tinting whole sections. Use outlined rounded pills for secondary actions and filled black pills for primary conversion. Keep borders subtle with Footer Divider (#dfe5ec); use Cloud Fill (#f3f6f8) for light inputs. Confine Illustration Gold (#f4cb45), Illustration Orange (#f47635), and Electric Violet (#5900f5) to imagery or a narrow footer gradient.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero beneath a dark navigation header; headline and signup left, lifestyle image right. | mobile signup, primary CTA | black navigation, white canvas, large lightweight headline, pill form control |
| 2 | feature-grid | Left-aligned section heading above three benefit columns with imagery, copy, and actions. | feature discovery, learn-more actions | three-column grid, illustrated tiles, outlined pill buttons |
| 3 | feature-split | Product illustration on one side and copy with category label and action on the other. | benefit explanation, learn-more action | two-column split, category label, outlined pill |
| 4 | testimonials | Centered heading followed by three review columns with navigation controls. | social proof, carousel navigation | star ratings, vertical dividers, store attribution |
| 5 | feature-split | Large multiline headline on the left and a four-item illustrated benefits list on the right. | service overview, scannable benefits | split layout, small colourful icons, spacious list |
| 6 | feature-split | Lifestyle/product image beside a labelled headline, short copy, and secondary action. | savings discovery, learn-more action | split feature, app mockups, outlined pill |
| 7 | feature-split | Text and action aligned beside a framed product image. | investment feature, learn-more action | category label, two-column composition, contained illustration |
| 8 | feature-split | Rectangular lifestyle photo paired with copy and a secondary action. | family feature discovery, learn-more action | two-column split, category label, photography |
| 9 | feature-grid | Section heading followed by three evenly spaced icon-led benefit columns. | security reassurance, feature scanning | three-column grid, small illustrations, short descriptions |
| 10 | cta | Dark full-width conversion band with headline left and mobile signup form right. | mobile signup, primary conversion | black section background, white text, pill input and CTA, gradient edge |
| 11 | footer | Compact multi-column link area with brand mark and trust marks. | help and company navigation, trust reassurance | footer link columns, brand mark, trust badges |
| 12 | footer | Dense single-column legal copy with compact utility links and social icons. | legal disclosure, utility navigation | fine dividers, small muted type, social links |

## Source CSS custom properties (selected)

```css
--color-dark: #000000;
--color-light: #ffffff;
--color-orange: #f76635;
--color-amber: #f7c24b;
--color-green-1: #9fee39;
--color-green-2: #55c84b;
--color-magenta: #df2ef8;
--color-blue-1: #47ced7;
--color-blue-2: #008fcb;
--color-purple: #4114ec;
--space-xs: clamp(.75rem, .69rem + .29vw, .9375rem);
--space-s: clamp(1rem, .92rem + .39vw, 1.25rem);
--space-m: clamp(1.5rem, 1.38rem + .58vw, 1.875rem);
--space-l: clamp(2rem, 1.84rem + .78vw, 2.5rem);
--space-xl: clamp(3rem, 2.77rem + 1.17vw, 3.75rem);
--space-2xl: clamp(4rem, 3.69rem + 1.55vw, 5rem);
--space-3xl: clamp(6rem, 5.53rem + 2.33vw, 7.5rem);
--space-xs-s: clamp(.75rem, .59rem + .78vw, 1.25rem);
--space-s-m: clamp(1rem, .73rem + 1.36vw, 1.875rem);
--space-m-l: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
--space-l-xl: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
--space-l-2xl: clamp(2rem, 1.07rem + 4.66vw, 5rem);
--space-xl-2xl: clamp(3rem, 2.38rem + 3.11vw, 5rem);
--space-2xl-3xl: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
--font-base: "soehne", Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
--border-radius: clamp(1.1875rem, 1.01rem + .87vw, 1.75rem);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/current-com