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

# Fruitful · Design System

> Calm financial guidance in a bright, human interface

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

Fruitful pairs a bright, spacious canvas with soft green-blue washes and confident black typography. Friendly prompts, product visuals, and member stories make a personal finance service feel approachable and trustworthy.

## North star

Keep the experience bright and calm: reserve deep green for meaningful actions, use whitespace to pace the story, and let product visuals stay soft and human.

## Overview

The page opens with a pale, atmospheric green-blue gradient that fades into white, while the rest of the long homepage stays predominantly white and generously spaced. Black headlines provide strong contrast; muted gray copy keeps supporting information quiet, and deep green anchors the primary actions. The pastel pink and green accents appear mainly in product diagrams and finance illustrations, so treat them as supporting visual cues rather than dominant brand fields. PP Neue Montreal gives display headings and navigation a clean, compact presence; Figtree Variable carries most body copy and interface details. Content alternates between centered statements, two-column feature storytelling, visual product cards, and a wide testimonial arrangement. Rounded input and CTA shapes soften the interface, while fine borders and restrained shadows separate cards without making the page feel heavy. Real member portraits and testimonial video tiles add human warmth among crisp, lightweight product mockups.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, navigation backdrop, white card fills, and the fade-out end of hero gradients. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Primary headlines, navigation labels, and high-contrast body or link text. |
| Mist Line | `#eceff4` | `--color-mist-line` | neutral | Fine card and control borders that separate content without strong contrast. |
| Petal Pink | `#eebed4` | `--color-petal-pink` | accent | Soft pink accents inside finance illustrations and product diagrams, not a main page band. |
| Muted Berry | `#a17187` | `--color-muted-berry` | accent | Occasional illustration or badge detail; use sparingly as supporting visual color. |
| Leaf Green | `#61bc76` | `--color-leaf-green` | accent | Small green illustration and badge details that support the financial-product visuals. |
| Forest Action | `#0b7443` | `--color-forest-action` | brand | Primary green CTA backgrounds, including prominent Get started actions. |
| Soft Cloud | `#f9fafb` | `--color-soft-cloud` | surface | Pale card surfaces and grouped prompt tiles against the white canvas. |
| Fresh Action | `#039855` | `--color-fresh-action` | brand | Secondary or alternate green CTA background, including the Money Map action. |
| Quiet Slate | `#5b616b` | `--color-quiet-slate` | neutral | Muted supporting copy, input prompt text, and lower-emphasis links. |
| Dew Green | `#e6f2ec` | `--color-dew-green` | surface | Light upper-hero gradient color that contributes to the hazy green atmosphere. |
| Pale Tide | `#cde0e4` | `--color-pale-tide` | surface | Cool blue-green hero gradient stop fading toward white. |
| Soft Black | `#111111` | `--color-soft-black` | neutral | Secondary dark text and compact badge or navigation details. |
| Ice Edge | `#e2edf0` | `--color-ice-edge` | surface | Subtle cool-toned visual or border detail; keep it secondary to white. |
| Card Charcoal | `#1c1c1e` | `--color-card-charcoal` | neutral | Dark card detail observed in a small number of card surfaces, not a global background. |
| Blue Haze | `#b4d0d8` | `--color-blue-haze` | surface | Midpoint of the cool hero wash and a supporting tint in soft background treatments. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9fafb` (Soft Cloud) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#5b616b` (Quiet Slate) · `--color-border` → `#eceff4` (Mist Line) · `--color-accent` → `#0b7443` (Forest Action) · `--color-accent-2` → `#039855` (Fresh Action) · `--color-accent-3` → `#eebed4` (Petal Pink) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9fafb` | 20.1:1 | AAA |
| `#5b616b` | `#ffffff` | 6.24:1 | AA |
| `#5b616b` | `#f9fafb` | 5.97:1 | AA |
| `#0b7443` | `#ffffff` | 5.84:1 | AA |
| `#0b7443` | `#f9fafb` | 5.59:1 | AA |

### Gradients

- `linear-gradient(rgb(230, 242, 236), rgb(205, 224, 228) 44%, rgb(255, 255, 255) 88%, rgb(255, 255, 255))`
- `linear-gradient(rgba(218, 237, 228, 0.2) 0%, rgb(180, 208, 216) 47%, rgb(255, 255, 255) 100%)`
- `linear-gradient(rgba(214, 214, 214, 0) 0%, rgb(239, 239, 239) 47%, rgb(255, 255, 255) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Figtree Variable | `--font-body` | webfont | 500, 600 | Primary body copy, captions, links, card text, and interface details. | Figtree |
| PP Neue Montreal | `--font-display` | webfont | 500, 600 | Display headings, navigation, and prominent CTA labels. | DM Sans |
| Figtree | `--font-figtree` | system | 500, 600 | Eyebrows and compact uppercase labels. | Figtree |

- **Figtree Variable:** Mostly medium and semibold; compact, readable copy with subtly tight tracking.
- **PP Neue Montreal:** Medium-weight modern sans; headings use slight negative tracking and sentence case.
- **Figtree:** Semibold, small uppercase labels with expanded tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 500 | 1 | -0.01em | — | PP Neue Montreal | Large centered hero headline and primary page statement. |
| h2 | 40px | 500 | 1.1 | -0.01em | — | PP Neue Montreal | Major section titles introducing features, products, or the closing offer. |
| h3 | 28px | 500 | 1.1 | -0.01em | — | PP Neue Montreal | Feature and testimonial group headings. |
| h4 | 24px | 600 | 1.1 | -0.01em | — | Figtree Variable | Card-level headings and compact feature titles. |
| body | 14px | 500 | 1.38 | -0.005em | — | Figtree Variable | Supporting explanations, testimonial copy, and interface text. |
| caption | 12px | 500 | 1.38 | -0.005em | — | Figtree Variable | Fine print, review context, and small supporting labels. |
| nav | 16px | 500 | 1.38 | -0.004em | — | PP Neue Montreal | Header navigation and primary navigation actions. |
| link | 14px | 500 | 1.38 | -0.005em | — | Figtree Variable | Inline links and text-based actions. |
| eyebrow | 10px | 600 | 1.6 | 0.05em | uppercase | Figtree | Small uppercase labels and compact trust or product metadata. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 18, 20, 21, 24, 32, 48 px.
- Section rhythm 72px · element gap 8px · card padding — · max content width 1296px.

The page uses a centered content frame measured at a 1296px maximum width, with roomy section pauses and comfortable content density. The hero centers the headline, explanation, wide rounded prompt, and suggested goals over a full-width gradient wash. Below, the layout alternates centered logo and trust bands, two-column feature storytelling, paired cards, and a three-column testimonial gallery. The final offer returns to a centered heading and checklist before the FAQ. Keep alignment intentional and let wide white intervals separate sections.

## Shape & elevation

- Radius: button `12px` · input `24px` · card `20px` · media `12px` · badge `3px` · nav `8px` · xs `3px` · sm `4px` · md `5px` · lg `6px` · xl `8px` · 2xl `10px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.02) 0px 18px 32px 0px, rgba(0, 0, 0, 0.03) 0px 16px 16px 0px, rgba(0, 0, 0, 0.03) 0px 4px 8px 0px`
- Shadow `lg` (nav, card): `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 8px 24px 0px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.02) 0px 3px 9px 0px`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0.01) 0px 3px 6px 0px, rgba(0, 0, 0, 0.03) 0px 10px 10px 0px, rgba(0, 0, 0, 0.01) 0px 23px 14px 0px`
- Shadow `lg-3` (card): `rgba(0, 0, 0, 0.05) 0px 25px 16px 0px, rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, rgba(0, 0, 0, 0.1) 0px 3px 6px 0px`
- Shadow `xl-2` (other): `rgba(0, 0, 0, 0.06) 0px 32px 48px 0px, rgba(0, 0, 0, 0.02) 0px 16px 16px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections remain flat against white. Use a fine Mist Line border or a restrained, diffuse shadow to lift selected cards and the floating navigation; avoid heavy outlines and dark drop shadows. Layer the hero gradient beneath the interface, while keeping form fields and product cards visually crisp.

## Imagery

Use soft, polished product mockups and finance diagrams with restrained green, blue, pink, and yellow details. Product illustrations sit in quiet, pale cards and often show simplified dashboards or money flows. Testimonial sections rely on real member portraits and video tiles with rounded framing. Trust marks and press logos remain small, monochrome, and secondary. The hero itself is mostly typography and atmospheric color rather than a dominant photograph.

## Components

### Hero navigation

Light, spacious header with dark membership and guide links, login text, and a Forest Action rounded Get started button.

### Goal prompt

Wide white pill-shaped input with muted prompt text and a compact green circular arrow action; suggested goals sit in small white chips below.

### Trust marks

Centered Trustpilot and award recognition arranged as a compact logo row on white, followed by subdued review context.

### Feature cards

Soft pale cards pairing product imagery with short headings and concise explanations; use generous breathing room and gentle separation.

### How-it-works steps

A two-column story with an introductory CTA at left and a vertically sequenced set of numbered process cards at right.

### Member testimonials

Editorial gallery combining portrait video tiles and review cards with names, ratings, concise quotations, and quiet read-more actions.

### Closing Money Map CTA

Centered offer heading, short benefit checklist, and a prominent green rounded action button on an uncluttered white field.

### Measured component styles

- **Primary button** (“Get Started”): background #0b7443 · text #ffffff · radius 20px · padding 0px · 500 16px PP Neue Montreal
- **Secondary button** (“See my Money Map”): background #039855 · text #ffffff · radius 20px · padding 0px · 500 16px PP Neue Montreal
- **Link** (“Best Planning Platform”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px Figtree Variable
- **Input**: transparent background · text #5b616b · radius 24px · padding 1px 2px 1px 24px · 500 16px Figtree Variable
- **Card** (“What’s on your mind? Get out of debt Cre”): background #f9fafb · text #000000 · radius 20px · padding 0px · 500 16px Figtree Variable
- **Badge** (“OCT 2026”): background #ffffff · text #111111 · radius 4px · padding 0px 6px · 600 10px Figtree · uppercase
- **Navigation item** (“Membership Guides Log in Get started”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px PP Neue Montreal

## Do

- Keep the page canvas white and spacious.
- Use the pale green-blue wash chiefly for the hero atmosphere.
- Reserve deep green for primary actions.
- Set display headings in PP Neue Montreal or a close substitute.
- Use Figtree for readable supporting and interface text.
- Pair product mockups with concise explanations.
- Use member portraits to make testimonials feel personal.

## Don't

- Do not turn pastel illustration colors into dominant page backgrounds.
- Do not crowd the hero with extra content.
- Do not use heavy borders or dark, dramatic shadows.
- Do not make every section a centered card grid.
- Do not use saturated colors for ordinary body text.
- Do not let testimonial imagery overpower the offer and its actions.

## Agent prompt

Build a new Fruitful-style fintech page with a bright white canvas (#ffffff), crisp black typography (#000000), and very restrained card edges (#eceff4). Create a soft green-blue atmospheric wash near the hero using Dew Green (#e6f2ec), Pale Tide (#cde0e4), and white, then let it fade out. Use Forest Action (#0b7443) for the primary CTA and Fresh Action (#039855) only where a secondary green action is appropriate. Keep Petal Pink (#eebed4) and Leaf Green (#61bc76) to small product-illustration details. Set display headings in PP Neue Montreal or DM Sans, with Figtree for body and interface copy. Alternate centered statements, two-column feature sections, product cards, and human testimonial media. Favor rounded controls, quiet borders, soft shadows, and generous white intervals; keep interactions and primary actions easy to spot.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero over a full-width soft gradient, with navigation, headline, prompt, and trust cue. | goal-entry prompt, suggested goal chips, primary start action, trust cue | green-blue wash, rounded input, green action button, small avatar cluster |
| 2 | logo-cloud | Centered recognition statement with a compact awards and rating row. | social proof, review-rating context | award marks, Trustpilot logo, small-print note |
| 3 | feature-split | Centered section title followed by a two-column product explanation and visual. | benefit framing, product demonstration | finance interface mockup, light product cards, green CTA |
| 4 | logo-cloud | Small centered label and a single horizontal row of publication marks. | press credibility | monochrome logos, open white space |
| 5 | feature-grid | Centered headline above a two-column by two-row grid of illustrated feature cards. | feature overview, benefit summaries | pale product imagery, soft card surfaces, short captions |
| 6 | how-it-works | Two-column section with an introductory headline and CTA beside vertically stacked numbered steps. | step-by-step explanation, persistent action prompt | number markers, process illustrations, stacked cards |
| 7 | testimonials | Editorial multi-column gallery mixing text reviews and member video portraits. | member stories, review ratings, read-more actions | portrait video tiles, review cards, rating badges, green CTA |
| 8 | feature-grid | Centered heading over three product cards in a horizontal row. | product benefits, cross-sell explanation | card, savings, and investment visuals, concise captions |
| 9 | cta | Centered offer heading with compact benefits and checklist, followed by a prominent CTA. | free-start offer, benefit checklist, single primary action | green check icons, centered copy, wide green button |

## Source CSS custom properties (selected)

```css
--color--white: white;
--_typography---font--ui: "Figtree Variable",Arial,sans-serif;
--color--black: black;
--_responsive---font-size--text-regular: 1rem;
--_typography---font-weight--body: 500;
--_typography---letter-spacing--body: -.004em;
--_typography---font--title: "PP Neue Montreal",Arial,sans-serif;
--_responsive---font-size--h1: 4rem;
--_typography---font-weight--title: 500;
--_typography---letter-spacing--title: -.01em;
--_responsive---font-size--h2: 3.25rem;
--_typography---font-weight--medium: 500;
--_responsive---font-size--h3: 2.5rem;
--_responsive---font-size--h4: 1.75rem;
--_typography---font-weight--semibold: 600;
--color--grey-700: #7a828f;
--radius--desktop: 1.25rem;
--color--grey-50: #f9fafb;
--_responsive---font-size--h0: 5.625rem;
--_responsive---font-size--text-small: .875rem;
--_responsive---font-size--text-large: 1.325rem;
--_typography---font--body: "PP Neue Montreal",Arial,sans-serif;
--_responsive---font-size--text-tiny: .75rem;
--color--violet-100: #f3ebfb;
--color--grey-200: #eceff4;
--color--grey-100: #f5f7fb;
--_responsive---font-size--text-medium: 1.125rem;
--color--green-800: #0b7443;
--color--transparent: transparent;
--color--green-900: #054f31;
--color--green-100: #d1fadf;
--color--green-600: #039855;
--color--green-700: #0e8e52;
--color--grey-400: #c1c7d1;
--color--peach-100: #fffbf7;
--_responsive---text-size--nav-item-size: clamp(.75rem,1.5vw,1rem);
--color--peach-900: #fee9d1;
--radius--button: 5rem;
--color--green-200: #b5ebc8;
--color--droplet-100: #eff7ff;
```

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