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

# Apron · Design System

> Warm editorial design for business finance

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

Apron pairs a warm, cream-toned canvas with oversized display lettering, bright yellow calls to action, and candid business photography. The long homepage alternates audience-focused feature sections, customer proof, editorial content, a high-contrast CTA, and a compact black footer.

## North star

Use a calm cream canvas and confident editorial type, reserving vivid yellow for unmistakable primary actions.

## Overview

The visual identity is built around a pale cream canvas (#fefcef), with occasional light butter section bands (#fbefaf) and a strong black footer. Saturated yellow (#ffd801) is reserved for primary actions, so buttons stand out without making the page feel loud; a muted ochre hairline (#c9bf8c) outlines secondary navigation actions. Champ display type gives headlines a distinctive, weighty silhouette, while DM Sans keeps body copy and controls accessible. Small, monospaced audience labels add an editorial, product-documentation accent. The layout is spacious and modular: audience-specific feature sections alternate image and text placement, with three-column benefit rows and fine dividers separating long content bands. Photography is candid and human, showing business owners and teams at work; a full-bleed video anchors the hero, while customer quotes sit over another photographic backdrop. Flat surfaces and pill-shaped buttons keep the interface crisp. The closing yellow CTA and black footer create a clear, deliberate ending.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Apron Cream | `#fefcef` | `--color-apron-cream` | brand | Dominant page canvas and the background for most audience, blog, and content sections. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Primary text, logo, dark footer, and text on yellow calls to action. |
| Signal Yellow | `#ffd801` | `--color-signal-yellow` | accent | Primary Get started and Sign up buttons; the most prominent action color. |
| Muted Ochre | `#c9bf8c` | `--color-muted-ochre` | semantic | Fine outlines on secondary navigation controls, including the Log in pill. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Light testimonial and card surfaces, plus white text on dark photographic or footer areas. |
| Buttercream | `#fbefaf` | `--color-buttercream` | surface | Warm closing CTA band; decorative pale-yellow illustrations may also use this tone. |

### Semantic aliases

`--color-canvas` → `#fefcef` (Apron Cream) · `--color-surface` → `#fbefaf` (Buttercream) · `--color-surface-2` → `#000000` (Ink Black) · `--color-surface-3` → `#ffffff` (Paper White) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-border` → `#c9bf8c` (Muted Ochre) · `--color-accent` → `#ffd801` (Signal Yellow) · `--color-on-accent` → `#000000` (Ink Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fefcef` | 20.38:1 | AAA |
| `#000000` | `#fbefaf` | 18.07:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#fefcef` | 1.03:1 | fail |
| `#ffffff` | `#fbefaf` | 1.16:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffd801` | `#fefcef` | 1.35:1 | fail |
| `#ffd801` | `#fbefaf` | 1.2:1 | fail |
| `#ffd801` | `#000000` | 15.07:1 | AAA |
| `#ffd801` | `#ffffff` | 1.39:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 700, 500 | Body copy, navigation, buttons, captions, and general interface text. | DM Sans |
| Departure Mono | `--font-mono` | webfont | 400 | Small audience labels and editorial-style metadata. | Space Mono |
| Champ | `--font-display` | webfont | 800, 700 | Display headlines and section headings. | Bricolage Grotesque |
| DM Mono | `--font-dm-mono` | webfont | 400 | Occasional monospaced supporting or utility text. | DM Mono |

- **DM Sans:** Use regular body text and medium-weight controls; keep tracking restrained and sentence case.
- **Departure Mono:** Regular monospace; use for compact uppercase labels and small utility text.
- **Champ:** Heavy, distinctive display face; use bold weights and preserve the rounded, compact headline character.
- **DM Mono:** Regular monospace for limited supporting details; keep it secondary to Champ headlines and DM Sans copy.

### Type scale — Perfect Fifth (ratio ≈ 1.533, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 800 | 1.01 | 0 | — | Champ | Oversized promotional headline treatment where a section needs maximum emphasis. |
| h1 | 54px | 800 | 1.16 | 0.01em | — | Champ | Hero headline over the full-bleed video. |
| h2 | 30px | 700 | 1.2 | 0 | — | Champ | Feature-section and content-card headings. |
| body | 20px | 400 | 1.5 | 0.01em | — | DM Sans | Feature descriptions, introductory copy, and explanatory text. |
| caption | 16px | 400 | 1.5 | 0.01em | — | DM Sans | Compact navigation, testimonial attribution, and supporting details. |
| button | 16px | 500 | 1 | 0.01em | — | DM Sans | Primary and secondary pill-button labels. |
| code | 18px | 400 | 1.5 | 0.01em | — | Departure Mono | Small monospace audience labels and editorial-style metadata. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64 px.
- Section rhythm 120px · element gap 16px · card padding 34px · max content width —.

Build a long, spacious landing page on a centered canvas, with no measured max-width constraint to reproduce. The hero is centered over edge-to-edge video; subsequent audience sections use broad alternating image-and-copy arrangements, followed by three-column benefit rows. Repeat generous vertical pauses and fine horizontal dividers between feature bands. Keep text left-aligned in most content sections, while the hero, testimonials, and final CTA center their emphasis. Use a compact multi-column footer.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat, with no measured shadows. Separate sections through background changes, whitespace, and restrained ochre hairlines rather than raised cards. White testimonial and content surfaces stay clean and simple; pill buttons rely on their bright fill and shape, not shadow.

## Imagery

Lead with full-bleed, darkened documentary-style video of a business owner at work, placing centered white type over the image. Use candid photographs of owners, operators, and finance teams in alternating feature layouts and blog cards. Customer quotes appear as paper-like notes over a photographic scene. Keep images natural and editorial rather than glossy; pale decorative artwork supports the closing CTA.

## Components

### Primary CTA

Bright yellow (#ffd801) pill with black DM Sans text; used for Get started and Sign up. Maintain a clearly prominent, rounded silhouette.

### Secondary login action

Transparent pill with black Log in text and a thin muted-ochre (#c9bf8c) outline.

### Audience feature section

Pair an audience label and Champ headline with candid photography; alternate image and text placement between owner, finance-team, and accountant sections.

### Benefit row

Three concise benefits beneath each audience feature, led by a small icon, short bold title, and compact explanatory copy.

### Customer testimonial band

Use a full-bleed photographic backdrop with overlapping white quote notes and compact customer attributions.

### Editorial content cards

Present three article cards in a row with a rectangular photo, bold headline, short summary, and simple Learn more link.

### Footer

Full-width black section with white navigation groups, fine dotted dividers, small legal text, and secondary policy links.

### Measured component styles

- **Primary button** (“Get started”): background #ffd801 · text #000000 · radius 9999px · padding 20px 36px · 500 16px DM Sans
- **Secondary button** (“Log in”): transparent background · text #000000 · border 1px solid #c9bf8c · radius 9999px · padding 12px 32px · 500 16px DM Sans
- **Link** (“Learn more”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px sans-serif
- **Card** (“It's one of my favourite platforms to us”): background #ffffff · text #000000 · radius 0px · padding 40px 28px · 400 16px sans-serif

## Do

- Use cream as the default page canvas.
- Save bright yellow for primary actions.
- Use Champ for bold, expressive headlines.
- Alternate imagery and copy across audience sections.
- Keep feature benefits concise and icon-led.
- Separate long sections with whitespace and fine rules.

## Don't

- Do not introduce unmeasured brand colors.
- Do not add heavy shadows or glossy card effects.
- Do not make every section a bordered card.
- Do not use yellow as the main text color.
- Do not crowd the layout with dense, continuous copy.
- Do not replace candid business photography with abstract product renders.

## Agent prompt

Create a new fintech landing page in Apron’s warm editorial style. Use Apron Cream (#fefcef) as the main canvas, Ink Black (#000000) for type and footer surfaces, Signal Yellow (#ffd801) for primary pill actions, Muted Ochre (#c9bf8c) for subtle outlines, Paper White (#ffffff) for light quote surfaces, and Buttercream (#fbefaf) for a warm CTA band. Set display headlines in a bold, distinctive sans similar to Champ, with DM Sans for body and controls and restrained monospace labels. Keep the page spacious: pair candid business photography with audience-focused copy, alternate image placement, and organize benefits in three-column rows. Use fine dividers, flat surfaces, simple links, and a full-width black footer. Avoid unmeasured styling flourishes, heavy shadows, and decorative gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy over full-bleed video, followed by a prominent CTA. | Primary action, Video-backed introduction | Full-bleed video, Centered white headline, Yellow pill CTA |
| 2 | feature-split | Audience introduction and photo pair above a three-column benefit row. | Audience-specific benefits, Learn more link | Cream canvas, Paired photos, Icon-led benefits, Section divider |
| 3 | feature-split | Reversed image-and-copy arrangement followed by three benefits. | Audience-specific benefits, Learn more link | Alternating feature layout, Paired portraits, Three-column benefit row |
| 4 | feature-split | Text-led audience introduction beside paired photos, then three benefits. | Role-specific product value, Learn more link | Champ headline, Audience label, Photo pair, Feature row |
| 5 | testimonials | Full-width photographic backdrop with several overlapping quote notes. | Social proof, Named customer attribution | Full-bleed photo, White quote cards, Small customer portraits |
| 6 | content-feed | Three editorial cards in a row on the cream canvas. | Article discovery, Learn more links | Photo thumbnails, Bold headlines, Compact summaries, Carousel controls |
| 7 | cta | Centered trust statement, headline, and CTA in a warm band. | Social proof prompt, Conversion CTA | Buttercream background, Centered Champ heading, Yellow pill button |
| 8 | footer | Black footer with grouped navigation, legal copy, and policy links. | Grouped site navigation, Legal and policy access | Black background, White links, Dotted horizontal dividers, Small-print legal text |

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