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

# Peppermint · Design System

> Playful card-program fintech with bold, illustrated storytelling

**Theme:** dark · **Industry:** fintech · **Source:** https://paywithpeppermint.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._

Peppermint presents its card-program platform through oversized typography, vivid illustrated scenes, and a deep navy canvas. Cream content panels and rounded cards create clear pauses between expressive, full-width sections.

## North star

Let oversized, tightly set headlines and colorful hand-drawn payment imagery lead, while navy and cream section bands keep the page legible.

## Overview

The page uses a deep navy canvas (#0a1d4b) as its visual anchor, with vivid violet hero artwork and dark-blue section bands carrying the illustrated storytelling. Warm cream surfaces (#fcf6ea, #fff6dd, #faedd2) distinguish the audience showcase, FAQ, and footer from the darker stretches. White is reserved for high-contrast hero text and selected labels; violet, mint, and pink accents appear in CTAs, cards, and prominent illustrations rather than as a uniform interface palette. Excon’s heavy display typography is tightly tracked and dramatically oversized, while General Sans handles supporting copy and utility text. The layout alternates centered headline-led scenes, tilted benefit cards, a category image carousel, and a card-product showcase. Generous open space lets the artwork and type dominate; rounded cards and pill-shaped actions soften the bold, graphic composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Navy | `#0a1d4b` | `--color-midnight-navy` | brand | Dominant canvas and recurring section band; also used for footer text and select links. |
| Slate Ink | `#474b60` | `--color-slate-ink` | neutral | Measured text color for supporting copy and interface text. |
| Vanilla Cream | `#fcf6ea` | `--color-vanilla-cream` | surface | Warm surface for the FAQ area, footer, and a benefit card. |
| Butter Paper | `#fff6dd` | `--color-butter-paper` | surface | Pale section band behind the audience showcase and supporting text. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | High-contrast headings and text against the dark canvas. |
| Peppermint Violet | `#9c8bf9` | `--color-peppermint-violet` | accent | Measured primary CTA fill; also reflects the prominent violet hero artwork. |
| Soft Biscuit | `#faedd2` | `--color-soft-biscuit` | surface | Secondary warm surface visible in footer and card details. |
| Mint Pop | `#68dacb` | `--color-mint-pop` | accent | Accent inside benefit-card and payment illustrations, not a general page background. |
| Blueberry Ink | `#162d67` | `--color-blueberry-ink` | accent | Secondary blue accent within cards and illustrated details. |
| Petal Pink | `#ffe9f4` | `--color-petal-pink` | accent | Benefit-card surface and illustration accent; not the core section palette. |

### Semantic aliases

`--color-canvas` → `#0a1d4b` (Midnight Navy) · `--color-surface` → `#fcf6ea` (Vanilla Cream) · `--color-surface-2` → `#fff6dd` (Butter Paper) · `--color-surface-3` → `#ffffff` (Clean White) · `--color-surface-4` → `#faedd2` (Soft Biscuit) · `--color-text` → `#474b60` (Slate Ink) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-accent` → `#9c8bf9` (Peppermint Violet) · `--color-accent-2` → `#68dacb` (Mint Pop) · `--color-accent-3` → `#162d67` (Blueberry Ink) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#474b60` | `#0a1d4b` | 1.89:1 | fail |
| `#474b60` | `#fcf6ea` | 7.99:1 | AAA |
| `#474b60` | `#fff6dd` | 7.97:1 | AAA |
| `#474b60` | `#ffffff` | 8.6:1 | AAA |
| `#ffffff` | `#0a1d4b` | 16.28:1 | AAA |
| `#ffffff` | `#fcf6ea` | 1.08:1 | fail |
| `#ffffff` | `#fff6dd` | 1.08:1 | fail |
| `#9c8bf9` | `#0a1d4b` | 5.79:1 | AA |
| `#9c8bf9` | `#fcf6ea` | 2.61:1 | fail |
| `#9c8bf9` | `#fff6dd` | 2.61:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Generalsans | `--font-body` | webfont | 500, 400, 700 | Body copy, supporting text, and interface labels | DM Sans |
| Excon | `--font-display` | webfont | 500, 700, 400 | Display headlines and prominent CTA-style link text | League Spartan |

- **Generalsans:** Measured weights 400, 500, and 700; body text is medium-weight, compact, and generally untransformed.
- **Excon:** Bold, tightly tracked display lettering with compact line height; occasional capitalization treatment.

### Type scale — Custom (ratio ≈ 1.764, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 273.5px | 700 | 0.87 | -0.051em | — | Excon | Oversized hero and campaign-style display headlines. |
| h1 | 151px | 700 | 0.87 | -0.046em | — | Excon | Primary hero headline, centered over the opening illustration. |
| h2 | 129.5px | 700 | 0.87 | -0.039em | — | Excon | Major section headings such as the benefits headline. |
| h3 | 128px | 700 | 0.87 | -0.055em | — | Excon | Large feature or section headline treatments. |
| h4 | 90px | 700 | 0.87 | -0.044em | capitalize | Excon | Smaller display headings and emphatic labels. |
| body | 16px | 500 | 1.22 | 0 | — | Generalsans | Supporting paragraphs, FAQ answers, and interface copy. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 10, 16, 20, 24, 26, 28, 30, 36, 38, 40, 42, 50, 100, 120 px.
- Section rhythm 50px · element gap 20px · card padding 33px · max content width 952px.

The page is a long, single-column narrative with full-width color bands and occasional embedded multi-column content. The measured page maximum width is 952px, while the opening hero and illustrated sections read as full-bleed compositions. Headlines are centered in the hero; the benefits cards form a compact row, and the audience showcase uses a five-column category structure around a large image. Section changes create the main rhythm, with comfortable density and clear breathing room around artwork and calls to action.

## Shape & elevation

- Radius: button `9999px` · card `24px` · link `9999px` · xs `5px` · sm `16px` · md `20px` · lg `24px` · xl `36px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The measured component data reports no shadows or borders, so the interface reads as mostly flat. Rounded surfaces create separation through color and shape rather than elevation. Artwork overlaps section edges and cards, providing the layering and depth. Use the measured card radius of 24px and pill-shaped actions without adding prominent shadow effects.

## Imagery

Illustration is the defining visual device: expressive hands, payment cards, phones, ribbons, and playful abstract trails cross section boundaries. The hero pairs a large violet field with a hand holding a phone, while later scenes use card artwork and illustrated transactions. A photographic crowd image appears in the audience carousel, framed as a wide rounded panel. Keep illustrations vivid and integrated into the composition; treat photography as a contained supporting moment.

## Components

### Hero CTA

Centered pill action labeled “Get Peppermint,” measured with a #9c8bf9 fill, white text, and a 48px radius.

### Benefit cards

Four compact, rounded cards arranged in a row, with short benefit titles, supporting copy, and distinct pale or illustrated surfaces.

### Audience carousel

Large rounded crowd photograph with a row of audience categories and subtle previous/next controls beneath.

### Card showcase

Full-bleed dark section with prominently floating, colorful Peppermint card artwork and surrounding illustration.

### FAQ accordion

Stacked rounded question rows on a warm cream surface, with plus/minus indicators and one expanded answer.

### Footer CTA

Prominent dark-blue pill action above compact legal links and an oversized, pale brand wordmark.

### Measured component styles

- **Primary button** (“Get Peppermint”): background #9c8bf9 · text #ffffff · radius 48px · padding 16px 20px · 400 16px Generalsans
- **Link** (“Get Peppermint”): background #0a1d4b · text #fff6dd · radius 100px · padding 36px 100px · 700 50px Excon
- **Card** (“More reliability Enjoy zero downtime wit”): background #fcf6ea · text #0a1d4b · radius 24px · padding 20px 38px 36px 38px · 400 14px Generalsans

## Do

- Anchor major sections in Midnight Navy (#0a1d4b).
- Use warm cream bands to distinguish content-heavy sections.
- Set display headlines in bold, tightly tracked Excon-style type.
- Center the hero message and give its illustration room to breathe.
- Use vivid hand-drawn payment imagery as the main decorative layer.
- Keep cards rounded and visually flat, with color doing the separating.

## Don't

- Don't replace the navy-and-cream rhythm with a generic white SaaS layout.
- Don't use shadows as the main way to distinguish cards.
- Don't make supporting paragraphs compete with display headlines.
- Don't spread accent colors evenly across every UI element.
- Don't confine illustrations to small, isolated thumbnails.
- Don't introduce dense navigation or excessive interface chrome.

## Agent prompt

Build a new page in Peppermint’s playful fintech visual style. Use Midnight Navy (#0a1d4b) for the dominant canvas and section bands, alternating with Vanilla Cream (#fcf6ea) and Butter Paper (#fff6dd) for content pauses. Set large, tightly tracked headings in an Excon-like bold display face and supporting copy in a clean General Sans-style sans serif. Make the composition feel editorial and spacious, with full-width illustrated scenes, colorful payment-card or phone motifs, and occasional rounded content cards. Use Peppermint Violet (#9c8bf9) for the primary pill CTA; reserve Mint Pop (#68dacb), Blueberry Ink (#162d67), and Petal Pink (#ffe9f4) for small accents or artwork. Favor flat color separation and layered illustrations over shadows. Keep text legible and the CTA clear.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy over a full-width violet illustration field within the opening dark section. | Primary CTA, Centered value proposition | Oversized display headline, Illustrated hero, Pill button |
| 2 | feature-grid | Single-column dark section with a centered headline above a row of benefit cards. | Benefit summary, Scannable cards | Tilted rounded cards, Illustrated card art, Large section heading |
| 3 | product-showcase | Full-width navy illustration-led section with a centered showcase composition. | Visual product storytelling | Illustrated hands and payment elements, Full-bleed dark field |
| 4 | gallery | Warm full-width section with a large image and five audience categories arranged beneath it. | Category selection, Previous/next browsing | Rounded photographic panel, Category labels, Carousel controls |
| 5 | feature-split | Navy text-led band with animated-feeling transactional copy and a large illustration alongside. | Audience qualification, Recurring-use explanation | Emphatic rotating-style terms, Illustrated payment motif |
| 6 | product-showcase | Full-bleed navy product scene with card artwork floating prominently in the open space. | Product visualization | Floating card mockups, Large negative space |
| 7 | faq | Single-column FAQ on a warm cream surface, using stacked full-width accordion rows. | Expandable answers, Question scanning | Rounded question rows, Plus/minus icons, Expanded answer panel |
| 8 | footer | Two-column footer on a cream surface with legal text, policy links, and a large pale wordmark treatment. | Legal navigation, Brand sign-off | Compact footer links, Oversized background wordmark |

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