---
version: alpha
name: Fruitful
description: Warm, optimistic financial wellness — a deep evergreen primary paired with creamy peach canvases, soft generous radii, and a friendly humanist sans. Money made calm and approachable through earthy tones, rounded geometry, and abundant breathing room.
colors:
  # Canvas + ink
  background: "#fdf3e7"
  surface: "#fffaf3"
  surface-cream: "#fee9d1"
  ink: "#1f2d24"
  ink-secondary: "#4a5a4f"
  ink-muted: "#7a8a7f"

  # Brand greens
  primary: "#0f5132"
  green-deep: "#0a3d26"
  green-mid: "#2f7a52"
  green-soft: "#a8c9a8"
  green-tint: "#e3efe3"

  # Warm accents
  peach: "#f6b58a"
  coral: "#e87a5c"
  gold: "#e3a857"
  cream-deep: "#f7dcb8"

  # Borders + neutrals
  border: "#e6d5c0"
  border-soft: "#f0e3d2"
  divider: "#ead9c4"

  # On-color
  on-primary: "#fffaf3"
  on-peach: "#1f2d24"
  on-cream: "#1f2d24"
typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -1px
  card-title:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px
rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  pill: 9999px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.green-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.primary}"
  button-accent:
    backgroundColor: "{colors.peach}"
    textColor: "{colors.on-peach}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  badge:
    backgroundColor: "{colors.green-tint}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-cream:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border-soft}"
  card-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.green-deep}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.divider}"
---

# Fruitful Design System

## Overview

Fruitful's visual identity reframes personal finance as something warm, human, and quietly optimistic — the opposite of the cold blue-and-grey palette most fintech defaults to. The canvas is a creamy off-white (`{colors.background}`), the kind of warm paper tone that feels like a handwritten letter rather than a banking dashboard. Against it, a deep evergreen (`{colors.primary}`) does the heavy lifting for headlines, primary actions, and brand moments, evoking growth, patience, and the literal "fruit" of compounding over time.

The typographic voice pairs a high-contrast humanist serif (`Fraunces`) for display and headings with a clean neutral sans (`Inter`) for body and UI. The serif gives headlines a friendly, editorial, almost agrarian character — soft terminals and a touch of old-style warmth — while the sans keeps interface copy legible and modern. This serif-display / sans-body split is the core of the brand's "trustworthy but approachable" tone.

Color is used as emotional temperature. Warm peach (`{colors.peach}`), coral (`{colors.coral}`), and gold (`{colors.gold}`) accents punctuate the green-and-cream base, lending illustrations and highlight moments a sunlit, fruit-bowl quality. Surfaces stack as cream tints rather than stark white cards, so the whole page reads as a single warm field with gentle tonal shifts rather than hard panels.

Geometry is soft throughout. Buttons are full pills, cards carry generous 24px radii, and spacing is deliberately roomy — money advice delivered with calm, not urgency.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of clinical white or fintech blue
- Deep evergreen primary (`{colors.primary}`) for CTAs, headlines, and brand surfaces
- Serif display (`Fraunces`) + sans body (`Inter`) pairing — editorial warmth over UI neutrality
- Sunlit warm accents: peach, coral, gold for illustration and highlights
- Full-pill buttons and large 24px card radii — soft, approachable geometry
- Cream-tinted surfaces that layer tonally rather than as hard white panels
- Generous, unhurried spacing rhythm

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Warm cream page canvas — the brand's signature paper tone.
- **Surface** (`{colors.surface}`): Lighter warm white for cards and raised surfaces.
- **Surface Cream** (`{colors.surface-cream}`): Peachy cream for accent cards and illustration backdrops.
- **Ink** (`{colors.ink}`): Deep desaturated green-black for primary text — warmer than pure black.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted green-grey for body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Soft sage-grey for captions and metadata.

### Brand Greens
- **Primary** (`{colors.primary}`): Deep evergreen — primary CTA fill, headings, brand surfaces.
- **Green Deep** (`{colors.green-deep}`): Darkest green for hover and pressed states.
- **Green Mid** (`{colors.green-mid}`): Mid-tone green for secondary accents and links.
- **Green Soft** (`{colors.green-soft}`): Muted sage for subtle fills and illustration.
- **Green Tint** (`{colors.green-tint}`): Pale green wash for badges and quiet highlights.

### Warm Accents
- **Peach** (`{colors.peach}`): Sunlit peach for accent buttons and illustration highlights.
- **Coral** (`{colors.coral}`): Warm coral for emphasis moments and graphic accents.
- **Gold** (`{colors.gold}`): Honey gold for decorative detail and warmth.
- **Cream Deep** (`{colors.cream-deep}`): Deeper cream for layered illustration backdrops.

### Borders & Neutrals
- **Border** (`{colors.border}`): Warm tan hairline for cards and inputs.
- **Border Soft** (`{colors.border-soft}`): Lighter cream border for low-contrast separation.
- **Divider** (`{colors.divider}`): Warm divider line for nav and sections.

## Typography

### Font Family
- **Display / Headings**: `Fraunces`, with fallbacks `Georgia, serif` — a high-contrast humanist serif with soft, editorial warmth.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — clean and neutral for readability.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 56px serif hero headline |
| `section-heading` | Feature section titles |
| `card-title` | Card and feature headings |
| `eyebrow` | Uppercase tracked label above headings |
| `body-large` | Intros, lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Supporting UI copy |
| `button-ui` | Buttons and primary links |
| `caption` | Metadata, badges, tags |

### Principles
- **Serif announces, sans explains**: Fraunces carries every headline and brand moment; Inter handles all functional reading and UI.
- **Warm not loud**: Negative tracking on serif display tightens headlines without making them aggressive.
- **Editorial calm**: Generous line-height (1.6 on body) keeps long advisory copy relaxed and readable.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.2xl}`–`{spacing.4xl}`) for the airy, unhurried section rhythm.

### Grid & Container
- Max content width: approximately 1180px
- Hero: centered single column with serif headline and warm illustration
- Feature sections: 2–3 column cream-card grids
- Generous gutters and section padding

### Whitespace Philosophy
- **Warm breathing room**: Large vertical padding between sections lets the cream canvas dominate.
- **Tonal layering**: Surfaces differ by warm tint, not by hard borders — depth comes from temperature shifts.
- **Calm rhythm**: Spacing communicates patience, mirroring the long-horizon financial message.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Inputs, small chips |
| `md` | 16px | Inputs, inner elements |
| `lg` | 24px | Cards, feature panels |
| `xl` | 32px | Large hero panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Evergreen fill, cream text, full pill. The default CTA.
- **`button-secondary`** — Warm white with green outline and green text.
- **`button-accent`** — Sunlit peach fill with dark ink text for warm emphasis moments.

### Cards
- **`card`** — Warm white surface, 24px radius, tan hairline border.
- **`card-cream`** — Peachy cream surface for accent and illustration cards.
- **`card-primary`** — Deep evergreen surface with cream text for hero/feature highlights.

### Inputs
- **`input`** — Warm white, tan border, 16px radius. Focus swaps the border to evergreen.

### Navigation
- **`nav-bar`** — Cream header on the page canvas, warm divider beneath, pill CTA right.

## Do's and Don'ts

### Do
- Keep the warm cream canvas (`{colors.background}`) as the default page background
- Use evergreen (`{colors.primary}`) for primary actions and headlines
- Pair Fraunces serif headlines with Inter body
- Use peach/coral/gold as warm accents in illustration and highlight moments
- Use full-pill buttons and generous 24px card radii
- Layer surfaces by warm tint rather than hard borders

### Don't
- Don't introduce clinical white or fintech-blue backgrounds
- Don't set headlines in the sans — serif carries the brand voice
- Don't use sharp corners on buttons or cards
- Don't crowd sections — the airy rhythm is part of the calm
- Don't let warm accents overwhelm the green-and-cream base
- Don't put dark ink text on the evergreen surface — use cream (`{colors.on-primary}`)

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, reduced section padding |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1180px | Full multi-column layout, max content width |
| Large | >1180px | Centered with generous warm margins |

### Touch Targets
- Pill buttons use comfortable 16px vertical padding
- Nav links spaced for tap comfort
- Badges carry 6px vertical padding for legibility

### Collapsing Strategy
- Hero: serif headline scales down, maintains tightened tracking proportionally
- Feature cards: 3-column → 2-column → single column
- Navigation: horizontal links → hamburger menu with pill CTA retained
- Section spacing: 96px+ → ~48px on mobile

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Evergreen `{colors.primary}`
- Background: Warm cream `{colors.background}`
- Heading text: Ink `{colors.ink}` (or serif on cream)
- Body text: Ink Secondary `{colors.ink-secondary}`
- Warm accent: Peach `{colors.peach}`
- Border: Tan `{colors.border}`

### Example Component Prompts
- "Create a hero on warm cream `{colors.background}`. Headline in Fraunces 56px weight 600, letter-spacing -1.5px, color `{colors.ink}`. Lead in Inter 20px `{colors.ink-secondary}`. Evergreen pill CTA (`{colors.primary}`, cream text, 9999px radius, 16px 32px padding)."
- "Design a card: warm white `{colors.surface}`, 24px radius, 1px `{colors.border}` border, 32px padding. Title in Fraunces 26px weight 600. Body in Inter 17px `{colors.ink-secondary}`."
- "Build a badge: `{colors.green-tint}` background, `{colors.primary}` text, full pill, 6px 14px padding, Inter 13px weight 500."
- "Create a primary feature card: evergreen `{colors.primary}` surface, cream text `{colors.on-primary}`, 24px radius, 32px padding, Fraunces heading."

### Iteration Guide
1. Warm cream canvas first — never clinical white
2. Serif (Fraunces) for headlines, sans (Inter) for everything else
3. Evergreen primary, peach/coral/gold as warm accents only
4. Full-pill buttons, 24px card radii — soft geometry throughout
5. Layer surfaces by warm tint, not hard panels

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Fruitful. Brand names and trademarks belong to their respective owners.