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

# Fold · Design System

> Clear-minded finance with a playful edge

**Theme:** light · **Industry:** fintech · **Source:** https://fold.money/ · **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._

Fold pairs a calm, pale canvas with deep navy typography and playful hand-drawn imagery to make personal finance feel approachable. The long-form homepage alternates product demonstrations and concise editorial copy, with a single dark navy section providing contrast.

## North star

Keep the interface calm and spacious, letting deep-navy typography and playful product imagery make personal finance feel human.

## Overview

Fold builds a distinctive fintech identity from a restrained palette and an unusually playful illustration style. White and cool pale gray-lavender establish the page canvas and broad section bands; deep navy carries the logo, large headings, and body text, while muted slate tones soften supporting copy. Blue is reserved for links and selective calls to action rather than spread across the interface. GT Walsheim Pro gives headlines a rounded, confident presence: oversized bold display text is tightly tracked, while body copy stays regular and readable. The layout is a long, centered editorial journey, combining two-column product stories with open, single-column pauses and broad white stretches around interface mockups. The opening illustration uses humorous everyday objects to set a human tone; later sections rely on layered app screens, transaction cards, and small explanatory illustrations. Rounded cards, fine borders, and restrained navy-tinted shadows make the product feel tactile without overpowering the airy page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and large white section bands; also appears in card details and on the blue manifesto CTA. |
| Fold Navy | `#20294c` | `--color-fold-navy` | brand | Primary text, large headings, navigation, and the contrasting dark feature section. |
| Cloud Lavender | `#f0f1f5` | `--color-cloud-lavender` | surface | Opening hero canvas, soft section backgrounds, and pale app cards and controls. |
| Banking Blue | `#0a2d67` | `--color-banking-blue` | accent | Dark blue button and interface text accents, including the pale iOS app control. |
| Slate Periwinkle | `#788dba` | `--color-slate-periwinkle` | semantic | Occasional button outline and minor interface detail; not a dominant page color. |
| Muted Iris | `#676b89` | `--color-muted-iris` | neutral | Secondary text and navigation details, providing softer contrast than primary navy. |
| Signal Blue | `#459af8` | `--color-signal-blue` | accent | Inline links and the single bright manifesto CTA; use sparingly for emphasis. |
| Mist Border | `#c7cbdb` | `--color-mist-border` | neutral | Fine outlines on buttons, cards, and framed product media. |
| Deep Teal | `#042939` | `--color-deep-teal` | semantic | Measured mainly inside product media; treat as mockup detail rather than a core page color. |
| Hushed Lilac | `#979db5` | `--color-hushed-lilac` | neutral | Low-emphasis text and minor interface details, not a primary text color. |
| Powder Slate | `#bbc6dc` | `--color-powder-slate` | neutral | Subtle borders and interface details, mostly within app mockups. |
| Soft Ash | `#dddfe9` | `--color-soft-ash` | neutral | Occasional faint card, text, and decorative details against the white canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f1f5` (Cloud Lavender) · `--color-surface-2` → `#20294c` (Fold Navy) · `--color-text` → `#20294c` (Fold Navy) · `--color-text-muted` → `#676b89` (Muted Iris) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#c7cbdb` (Mist Border) · `--color-accent` → `#0a2d67` (Banking Blue) · `--color-accent-2` → `#459af8` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#20294c` | `#ffffff` | 14.16:1 | AAA |
| `#20294c` | `#f0f1f5` | 12.55:1 | AAA |
| `#676b89` | `#ffffff` | 5.2:1 | AA |
| `#676b89` | `#f0f1f5` | 4.6:1 | AA |
| `#676b89` | `#20294c` | 2.72:1 | fail |
| `#ffffff` | `#f0f1f5` | 1.13:1 | fail |
| `#ffffff` | `#20294c` | 14.16:1 | AAA |
| `#0a2d67` | `#ffffff` | 13.26:1 | AAA |
| `#0a2d67` | `#f0f1f5` | 11.75:1 | AAA |
| `#0a2d67` | `#20294c` | 1.07:1 | fail |

### Gradients

- `radial-gradient(35% 30% at 50% 100%, rgb(240, 241, 245) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(240, 241, 245), rgba(240, 241, 245, 0))`
- `linear-gradient(to top, rgb(240, 241, 245), rgba(240, 241, 245, 0))`
- `linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Walsheim Pro | `--font-body` | webfont | 400, 600, 700 | Site-wide type for headings, body copy, navigation, links, and controls. | Nunito Sans |

- **GT Walsheim Pro:** Use regular for copy and 600–700 for emphasis; display headings are bold, tightly tracked, and often centered.

### Type scale — Perfect Fifth (ratio ≈ 1.557, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 700 | 0.85 | -0.03em | — | GT Walsheim Pro | Oversized hero and expressive statement headlines. |
| h1 | 64px | 700 | 0.91 | -0.03em | — | GT Walsheim Pro | Primary hero and major feature headlines. |
| h2 | 26px | 400 | 1.19 | 0 | — | GT Walsheim Pro | Secondary section headings and feature titles. |
| h3 | 24px | 400 | 1.5 | 0 | — | GT Walsheim Pro | Supporting feature headings and explanatory blocks. |
| body | 17px | 400 | 1.41 | 0 | — | GT Walsheim Pro | Paragraphs describing the app and its finance features. |
| caption | 16px | 400 | 1.5 | 0 | — | GT Walsheim Pro | Small explanatory labels and supporting interface copy. |
| button | 18px | 600 | 1.33 | 0 | — | GT Walsheim Pro | App download and prominent action controls. |
| link | 24px | 400 | 1.5 | 0 | — | GT Walsheim Pro | Inline text links and emphasized feature references. |
| eyebrow | 17px | 600 | 1.18 | 0.04em | uppercase | GT Walsheim Pro | Compact uppercase labels introducing content sections. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 6, 7, 8, 12, 16, 24, 32, 48, 100 px.
- Section rhythm 48px · element gap 8px · card padding 12px · max content width 1400px.

Use a centered long-form page with a measured maximum content width of 1400px and a comfortable density. The hero is centered, while product stories switch between two-column layouts and broader media-led presentations. Feature content can use four-column groupings, but keep each item visually light. Maintain generous section pauses and measured section rhythm; some sections transition from pale lavender to white, while the later financial-dashboard section uses a full-width navy band. Align headlines and copy to each section’s story rather than forcing a uniform grid.

## Shape & elevation

- Radius: button `8px` · card `24px` · media `12px` · xs `8px` · sm `12px` · md `16px` · lg `20px` · xl `24px` · pill `9999px`
- Shadow `lg` (card, other, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(32, 41, 76, 0.12) 0px 9px 25px 0px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(32, 41, 76, 0.1) 0px 1px 4px 0px`
- Shadow `md` (media, text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(32, 41, 76, 0.12) 0px 6px 16px 0px, rgba(32, 41, 76, 0.09) 0px 1px 5px 0px`
- Shadow `md-2` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(32, 41, 76, 0.07) 0px 4px 11px 0px, rgba(32, 41, 76, 0.12) 0px 1px 3px 0px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.53) 0px 1px 0px 0px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0px 4px 0px inset`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with fine cool-gray outlines around controls and selective soft shadows beneath cards and product mockups. Use navy-tinted shadows to lift media gently from the white canvas. Large rounded product cards supply depth through layering rather than heavy borders or dramatic effects.

## Imagery

Lead with a humorous hand-drawn collage of everyday spending objects, then show realistic app and web-dashboard mockups. Mix isolated phone screens, transaction lists, and explanatory interface illustrations with ample surrounding white space. Keep imagery crisp and lightly framed; colorful illustration details belong inside the artwork, not the core brand palette.

## Components

### App download control

Pale gray-lavender button with navy text, a fine border, an 8px radius, and a restrained shadow.

### Manifesto CTA

Single bright blue, pill-shaped action with white semibold type; reserve this treatment for a key editorial action.

### Hero illustration

Playful hand-drawn collage centered above the headline, with small everyday objects suggesting spending and money.

### App showcase card

Large layered desktop and phone interface mockups on pale surfaces, using softly rounded media frames and a subtle shadow.

### Feature split

Pair product imagery with a bold navy heading and compact explanatory copy; alternate which side carries the visual.

### Transaction item

Compact white transaction rows with merchant, date, amount, and category details, presented as a tidy app interface.

### Measured component styles

- **Primary button** (“iOS app”): background #f0f1f5 · text #0a2d67 · border 1px solid #c7cbdb · radius 8px · padding 7px 12px · 600 18px GT Walsheim Pro · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(32, 41,
- **Secondary button** (“Read our manifesto”): background #459af8 · text #ffffff · radius 9999px · padding 16px 24px · 600 17px GT Walsheim Pro
- **Link** (“see the list of banks that support Fold”): transparent background · text #459af8 · radius 0px · padding 0px · 400 16px GT Walsheim Pro
- **Card** (“Add notes NOTES”): background #f0f1f5 · text #20294c · radius 24px · padding 24px 0px · 600 17px GT Walsheim Pro
- **Navigation item** (“fold iOS app Android app Team Manifesto ”): transparent background · text #20294c · radius 0px · padding 0px · 400 17px GT Walsheim Pro

## Do

- Use the measured palette hex values exactly.
- Give large headings a bold, tightly tracked navy treatment.
- Keep broad sections white or pale lavender.
- Use bright blue links and calls to action sparingly.
- Pair product UI with concise, human explanatory copy.
- Allow illustration details to add humor and color.

## Don't

- Do not add unmeasured colors to the page UI.
- Do not crowd the hero or product mockups.
- Do not make every section a card grid.
- Do not use bright blue for large background areas.
- Do not treat mockup-only colors as core brand colors.
- Do not add heavy borders or dramatic shadows.

## Agent prompt

Build a new Fold-style fintech page as a spacious editorial experience, not a dense dashboard. Use Gallery White (#ffffff) and Cloud Lavender (#f0f1f5) for broad backgrounds, Fold Navy (#20294c) for headings and primary text, Muted Iris (#676b89) for supporting copy, and Signal Blue (#459af8) only for selective links or a key CTA. Set type in GT Walsheim Pro or a close rounded sans-serif substitute, with bold, tightly tracked display headings. Alternate centered statements with two-column product stories and layered app mockups. Use playful hand-drawn illustration alongside credible finance interfaces. Keep controls and cards softly rounded, outlines fine, and shadows restrained and navy-tinted. Preserve generous whitespace and use a single dark navy section for contrast.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy beneath a playful illustration; navigation is distributed across the upper corners. | App download entry points, QR-code app access | Pale canvas, Large navy headline, Hand-drawn hero art, Compact outlined app buttons |
| 2 | feature-split | Single-column reassurance copy paired with a bank-account connection illustration. | Bank support link, OTP connection reassurance | Pale section band, Account-card illustration, Small inline blue link |
| 3 | product-showcase | Wide, centered product mockup followed by a split feature story. | Theme toggle, Desktop and phone preview | White canvas, Layered dashboards, Rounded media frames, Soft shadows |
| 4 | feature-split | Centered statement with an icon, headline, and short subtitle. | Editorial pause | White space, Centered navy heading, Small product icon |
| 5 | feature-grid | Four-column product details and illustrations with generous gaps. | Transaction categorization, Merchant recognition | Small UI cards, Light dividers, Inline feature links |
| 6 | feature-split | Two-column feature presentation with heading and search interface imagery. | Search transactions, Filter by tags and time | White canvas, Search bar mockup, Transaction result card |
| 7 | other | Centered paragraph beneath the search demonstration. | Illustrative search examples | Plain white background, Compact centered text |
| 8 | feature-split | Dark full-width section with left-aligned heading and product preview. | Early-access product link | Fold Navy background, Light headline, Layered dashboard mockup |

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