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

# Magic Beans · Design System

> Calm finance tools with a playful bean-shaped edge

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

Magic Beans presents Notion-powered invoicing and business finance tools in a spacious, product-led landing page. Restrained monochrome typography and soft surfaces keep the interface calm, while colorful bean illustrations add a distinctive playful accent.

## North star

Keep the product interface and message crisp on a quiet white canvas, then use color only as a small, playful supporting accent.

## Overview

The page is built on a white canvas with dark, highly legible text and pale warm-gray surfaces for selected cards and the closing call to action. Near-black pill buttons provide the strongest interface contrast; green appears sparingly in a small status badge and product details, while brighter colors belong mainly to decorative bean illustrations rather than the core palette. Inter is used throughout, with bold centered hero typography, compact section labels, and readable supporting copy. The layout alternates centered product-led presentation with left-aligned feature introductions and broad interface previews, leaving generous whitespace between content groups. Screenshots and dashboard mockups are treated as the primary proof of the product, framed by subtle borders or restrained shadows. Playful hand-drawn shapes sit around the hero and footer, counterbalancing the otherwise quiet, precise SaaS aesthetic.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas across the page; also used for text on dark announcement and CTA surfaces. |
| Soft Graphite | `#333331` | `--color-soft-graphite` | neutral | Muted supporting text and footer copy, softer than the primary heading color. |
| Warm Porcelain | `#faf9f7` | `--color-warm-porcelain` | surface | Warm card surfaces and the full-width closing CTA and footer band. |
| Bean Ink | `#1a1a19` | `--color-bean-ink` | brand | Primary headings, navigation, card text, and dark button treatment. |
| Quiet Hairline | `#e5e5e5` | `--color-quiet-hairline` | neutral | Subtle card borders and separators that define edges without adding visual weight. |
| Fresh Sprout | `#44c67f` | `--color-fresh-sprout` | accent | Small SOON badge and occasional product-interface details; not a broad page background. |
| Cloud Border | `#f0f0f0` | `--color-cloud-border` | neutral | Very light outline on an individual white card, distinct from the primary hairline. |
| Announcement Black | `#000000` | `--color-announcement-black` | semantic | Announcement strip and primary pill button background, paired with white text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#faf9f7` (Warm Porcelain) · `--color-text` → `#1a1a19` (Bean Ink) · `--color-text-muted` → `#333331` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e5e5e5` (Quiet Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a19` | `#ffffff` | 17.42:1 | AAA |
| `#1a1a19` | `#faf9f7` | 16.55:1 | AAA |
| `#333331` | `#ffffff` | 12.66:1 | AAA |
| `#333331` | `#faf9f7` | 12.03:1 | AAA |
| `#ffffff` | `#faf9f7` | 1.05:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Inter_f367f3 | `--font-body` | webfont | 500, 600, 400, 700 | All interface and marketing text, including navigation, headings, body copy, labels, and buttons. | Inter |

- **__Inter_f367f3:** Neutral sans-serif throughout; headings use semibold weight, body and navigation use medium weight, with natural casing and no measured tracking.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1 | 0 | — | __Inter_f367f3 | Large centered hero headline, visually dominant above the product preview. |
| h1 | 40px | 600 | 1.2 | 0 | — | __Inter_f367f3 | Primary page and feature-section headings. |
| h2 | 24px | 600 | 1.33 | 0 | — | __Inter_f367f3 | Secondary feature headings and prominent card titles. |
| body | 16px | 500 | 1.5 | 0 | — | __Inter_f367f3 | Explanatory paragraphs and product-focused descriptions. |
| caption | 15px | 500 | 1.5 | 0 | — | __Inter_f367f3 | Compact labels, badges, and supporting interface notes. |
| nav | 16px | 500 | 1.5 | 0 | — | __Inter_f367f3 | Header links such as Pricing and Twitter. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 16, 20, 24, 32, 40, 64, 80, 140 px.
- Section rhythm 60px · element gap 40px · card padding 32px · max content width 1408px.

The page uses a centered content frame with a measured maximum width of 1408px and a spacious density. The hero is centered, pairing a prominent message and CTA with a large dashboard preview; later sections alternate left-aligned introductions, wide product screenshots, and three-column feature groups. The measured spacing system is based on an 8px unit, with generous section gaps and substantial card padding. Most sections retain the white canvas; the closing CTA and footer shift to a warm off-white band. Content alignment changes by purpose rather than using a rigid repeated template.

## Shape & elevation

- Radius: button `9999px` · card `16px` · badge `9999px` · nav `8px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.01) 0px 94px 38px 0px, rgba(0, 0, 0, 0.02) 0px 53px 32px 0px, rgba(0, 0, 0, 0.03) 0px 24px 24px 0px, rgba(0, 0, 0, 0`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 11px 0px, rgba(0, 0, 0, 0.08) 0px 4px 17px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Cards rely on clean edges, pale surfaces, and occasional subtle hairlines rather than strong shadows. Measured card corners include a 16px radius, while pills such as buttons and badges are fully rounded. Where product previews overlap or sit above the canvas, use restrained soft elevation so the interface reads as a panel without competing with its contents.

## Imagery

Product screenshots and embedded video previews show Notion-based dashboards, invoice layouts, reports, and transactions; these are the main visual evidence and are presented as broad, clean interface panels. Colorful outlined bean-like doodles frame the hero, while glossy multicolor beans decorate the footer. The page has no photography-led storytelling: illustration is playful and peripheral, while product UI remains the focal point.

## Components

### Announcement strip

A full-width black strip at the top with centered white notice text, visually distinct from the main navigation.

### Header navigation

Minimal white header with the Magic Beans mark at left and simple dark Pricing and Twitter links at right.

### Hero CTA

Centered headline and supporting copy above a black or near-black pill button with white text.

### Product preview cards

Wide Notion-style dashboard, invoice, and report previews on white or warm-gray surfaces, with subtle borders or soft elevation.

### Feature badge

Small green-on-pale-green uppercase SOON pill, used as a minor status signal rather than a major brand color.

### Closing CTA band

Warm off-white full-width ending with centered free-start messaging, a dark pill button, decorative bean artwork, and compact footer links.

### Measured component styles

- **Primary button** (“Log in to get started”): background #000000 · text #ffffff · radius 9999px · padding 0px · 600 16px __Inter_f367f3
- **Secondary button** (“Log in to get started”): background #1a1a19 · text #ffffff · radius 9999px · padding 0px · 600 16px __Inter_f367f3
- **Card** (“Database settings Invoices Invoice name ”): background #faf9f7 · text #1a1a19 · radius 16px · padding 32px · 400 16px __Inter_f367f3
- **Badge** (“SOON”): background #eaf7f0 · text #44c67f · radius 9999px · padding 4px 8px · 700 13px __Inter_f367f3 · uppercase
- **Navigation item** (“Pricing”): transparent background · text #1a1a19 · radius 0px · padding 0px · 500 16px __Inter_f367f3

## Do

- Use white as the dominant page canvas.
- Keep headings and navigation dark and easy to scan.
- Give product previews ample surrounding whitespace.
- Use warm off-white for selected cards and the closing band.
- Reserve green for small status and product details.
- Use playful bean artwork as framing, not as interface structure.

## Don't

- Do not turn the page into a saturated color-block layout.
- Do not use decorative illustrations as the main product explanation.
- Do not add heavy shadows to every card.
- Do not crowd the hero with multiple competing CTAs.
- Do not use bright accent colors for long passages of text.
- Do not force every section into the same alignment or card grid.

## Agent prompt

Build a new SaaS landing page in the Magic Beans visual style. Use Gallery White (#ffffff) as the primary canvas, Bean Ink (#1a1a19) for headings and interface text, and Soft Graphite (#333331) for supporting copy. Warm Porcelain (#faf9f7) can distinguish selected cards or a closing CTA; use Quiet Hairline (#e5e5e5) and Cloud Border (#f0f0f0) sparingly. Keep Fresh Sprout (#44c67f) for minor status details and Announcement Black (#000000) for a high-contrast pill CTA or notice strip. Use Inter throughout, with bold concise headings and medium-weight readable copy. Create a spacious centered hero, then alternate left-aligned feature introductions with broad product UI previews and compact feature grids. Favor subtle edges and soft elevation. Add playful bean-like illustration only as peripheral framing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above a prominent dashboard preview, with decorative doodles at the sides. | Primary login CTA, Product preview as proof | Large centered heading, Dark pill button, Colorful outlined doodles |
| 2 | feature-split | Left-aligned section label, heading, and description followed by spacious invoice and Notion previews. | Explain invoice benefit, Show output and source | Small section label, Wide product screenshots, Minimal white canvas |
| 3 | feature-grid | Three-column feature presentation with small interface visuals and concise descriptions. | Scan feature differences, Highlight upcoming capability | Three columns, Compact labels, Pale green SOON badge |
| 4 | feature-split | Left-aligned text introduction followed by broad report and transaction previews. | Introduce reporting value, Show reports in context | Section label, Dashboard screenshots, Open whitespace |
| 5 | product-showcase | Large product media arranged as a broad report and transactions showcase. | Inspect report details, Compare connected views | Embedded product previews, Dashboard panels, Subtle panel edges |
| 6 | feature-grid | Compact row of small feature illustrations and short descriptions. | Quickly scan benefits, Group related tools | Icon-led features, Short text blocks, Light accent colors |
| 7 | feature-split | Two-column privacy section with explanatory text, supporting details, and a small illustration. | Explain data ownership, Reassure on security | Left-aligned headline, Small security icons, Restrained illustration |
| 8 | feature-grid | Left-aligned introduction above a three-column collection of product capability cards. | Browse product capabilities, Pair feature with interface example | Three-column cards, Interface mockups, Compact feature descriptions |
| 9 | cta | Full-width warm-gray band with centered CTA content, bean artwork below, and footer links. | Repeat primary login action, Offer a clear next step | Centered headline, Dark pill button, Colorful bean illustration, Compact footer links |

## Source CSS custom properties (selected)

```css
--font-inter: '__Inter_f367f3', '__Inter_Fallback_f367f3', sans-serif;
--font-roboto-mono: '__Roboto_Mono_4c3c58', '__Roboto_Mono_Fallback_4c3c58';
--font-signature: '__Caveat_97f5e1', '__Caveat_Fallback_97f5e1', cursive;
```

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