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

# Monarch · Design System

> Calm, human finance with a warm editorial touch

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

Monarch pairs a warm cream canvas and expressive serif headlines with clean sans-serif product copy. Lifestyle photography and floating finance-app screens make a complex money tool feel personal, clear, and approachable.

## North star

Keep the page calm and human: use the cream canvas as the continuous backdrop, then let serif storytelling, real product UI, and orange CTAs create the hierarchy.

## Overview

The page is built around a warm cream canvas (#fffaec), keeping long-form product storytelling soft rather than clinical. Dark charcoal text (#2a2926) provides confident contrast, while orange CTAs (#f86713) make the next step immediately visible. Large editorial serif headings alternate with restrained sans-serif body copy; small uppercase mono labels introduce feature sections without competing with the headlines. The layout moves from a split lifestyle hero into centered product demonstrations, alternating feature rows, testimonial cards, and a broad press quote panel. App screenshots and financial widgets are layered over the page as crisp, legible proof of functionality, while photography adds a human context. White cards and a pale beige band distinguish content groups without disrupting the overall cream field. Generous open space, rounded pill buttons, and subtle shadows keep the interface composed, warm, and accessible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Ink | `#2a2926` | `--color-warm-ink` | brand | Primary headings, body copy, navigation labels, and dark text on white cards. |
| Cream Canvas | `#fffaec` | `--color-cream-canvas` | brand | Dominant page background, including the hero, feature rows, testimonial area, and footer. |
| Signal Orange | `#f86713` | `--color-signal-orange` | accent | Primary pill CTAs, including Sign up and the hero action; also appears in the announcement gradient. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Navigation panel, product cards, testimonial tiles, and other raised content surfaces. |
| Soft Graphite | `#dcd9d6` | `--color-soft-graphite` | neutral | Fine button border and subtle interface hairlines. |
| Oat Beige | `#f3ecd7` | `--color-oat-beige` | surface | Contrasting pale band behind the all-in-one app feature showcase and selected content panels. |
| Coral Red | `#e5484d` | `--color-coral-red` | accent | Red endpoint of the announcement-strip gradient; also occurs in small navigation accents. |
| Burnt Tangerine | `#e64818` | `--color-burnt-tangerine` | accent | Stronger orange section accent and gradient-adjacent color; use sparingly outside promotional treatments. |
| Stone Gray | `#65625d` | `--color-stone-gray` | neutral | Muted supporting copy and secondary text, including lower-priority footer content. |
| Review Gold | `#efb921` | `--color-review-gold` | semantic | Small review-star detail inside testimonial and rating presentations; not a core page surface. |
| UI Ember | `#f35b16` | `--color-ui-ember` | accent | Minor orange text detail; a measured supporting accent rather than a primary brand surface. |

### Semantic aliases

`--color-canvas` → `#fffaec` (Cream Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#f3ecd7` (Oat Beige) · `--color-text` → `#2a2926` (Warm Ink) · `--color-text-muted` → `#65625d` (Stone Gray) · `--color-border` → `#dcd9d6` (Soft Graphite) · `--color-accent` → `#f86713` (Signal Orange) · `--color-accent-2` → `#e5484d` (Coral Red) · `--color-accent-3` → `#e64818` (Burnt Tangerine) · `--color-on-accent` → `#fefcfb`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2a2926` | `#fffaec` | 13.95:1 | AAA |
| `#2a2926` | `#ffffff` | 14.55:1 | AAA |
| `#2a2926` | `#f3ecd7` | 12.32:1 | AAA |
| `#65625d` | `#fffaec` | 5.82:1 | AA |
| `#65625d` | `#ffffff` | 6.07:1 | AA |
| `#65625d` | `#f3ecd7` | 5.14:1 | AA |
| `#f86713` | `#fffaec` | 2.9:1 | fail |
| `#f86713` | `#ffffff` | 3.03:1 | AA-large |
| `#f86713` | `#f3ecd7` | 2.56:1 | fail |

### Gradients

- `linear-gradient(to right, rgb(229, 72, 77), rgb(248, 103, 19))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Oracle | `--font-body` | webfont | 350, 500, 100 | Navigation, body copy, captions, buttons, and supporting interface text. | Inter |
| ABC Otto | `--font-display` | webfont | 350, 400 | Primary page and section headlines, giving feature storytelling an editorial character. | Newsreader |
| Beltram Mono | `--font-mono` | webfont | 500 | Small feature eyebrows and uppercase section labels. | Space Mono |

- **ABC Oracle:** Use a light, open sans-serif voice; body text is comfortably led, while navigation and buttons remain compact and untransformed.
- **ABC Otto:** Use a light serif weight, close tracking, and natural sentence case for prominent headings.
- **Beltram Mono:** Keep labels small, uppercase, and slightly tracked; reserve the mono style for short identifiers.

### Type scale — Major Third (ratio ≈ 1.27, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 59.5px | 300 | 1.15 | -0.02em | — | ABC Oracle Light | Oversized hero headline treatment, set in a light sans-serif voice. |
| h1 | 48px | 350 | 1.2 | -0.02em | — | ABC Otto | Main editorial headline, including the hero and primary section introductions. |
| h2 | 40px | 350 | 1.2 | -0.02em | — | ABC Otto | Feature and content section headings. |
| h3 | 32px | 350 | 1.2 | -0.02em | — | ABC Otto | Subsection headings within feature and resource content. |
| h4 | 24px | 350 | 1.5 | 0 | — | ABC Oracle | Compact card and supporting section titles. |
| body | 18px | 350 | 1.4 | 0 | — | ABC Oracle | Paragraphs explaining product value and feature behavior. |
| caption | 14px | 350 | 1.3 | 0 | — | ABC Oracle | Small review labels, UI annotations, and image or card supporting text. |
| button | 14px | 350 | 1.43 | 0 | — | ABC Oracle | Pill CTA labels such as Sign up and Learn more. |
| nav | 14px | 350 | 1.43 | 0 | — | ABC Oracle | Top navigation links and announcement-related navigation text. |
| eyebrow | 14px | 500 | 1.3 | 0.03em | uppercase | Beltram Mono | Uppercase feature identifiers such as NET WORTH, REPORTS, and PRICING. |
| code | 14px | 500 | 1.3 | 0.03em | uppercase | Beltram Mono | Short technical or product identifiers, styled consistently with mono labels. |

## Spacing & layout

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

A wide desktop composition uses a measured maximum content width of 1408px and a comfortable density. The hero splits left-aligned copy from full-height lifestyle imagery; subsequent sections alternate centered introductions, product showcases, and one-column feature rows with media and text shifting sides. A three-column app feature area and review grid introduce tighter groupings. The page keeps a continuous cream background, with occasional beige or white panels defining content bands. Section spacing is measured at 32px, with 16px element gaps and 24px card padding.

## Shape & elevation

- Radius: button `9999px` · card `8px` · nav `9999px` · xs `8px` · sm `12px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(34, 32, 29, 0.05) 0px 1px 2px 0px`
- Shadow `md` (nav, footer): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(34, 32, 29, 0.1) 0px 10px 15px -3px, rgba(34, 32, 29, 0.1) 0px 4px 6px -4px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(34, 32, 29, 0.075) 0px 4px 6px -1px, rgba(34, 32, 29, 0.075) 0px 2px 4px -2px`
- Shadow `lg` (card): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(34, 32, 27, 0.075) 0px 0px 0px 1px, rgba(34, 32, 29, 0.1) 0px 20px 25px -5px, rgba(34, 32, 29, 0.1) 0px 8px 10px -6px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, using the cream canvas and restrained beige or white panels to organize content. White product and testimonial cards use soft, low-contrast shadows; the nav and select showcase elements gain more noticeable lift. Borders are sparse and pale, while screenshots and widgets create depth through careful overlap rather than heavy outlines.

## Imagery

Lifestyle photography gives the hero a relatable domestic setting and returns in the community and pricing areas. Most supporting media is product UI: account summaries, transaction lists, charts, goals, device screens, and provider marks. Screens are displayed cleanly and at useful scale, sometimes layered above the page with subtle shadows. The visual mix stays realistic and functional rather than relying on decorative illustration or 3D.

## Components

### Announcement strip

A narrow top promotion band uses the coral-to-orange gradient and centered white offer text.

### Floating navigation

White rounded nav panel with dark links, a subtle shadow, and a compact orange Sign up pill.

### Hero

Split cream-and-photo composition with a large headline, concise supporting copy, and orange pill CTA.

### Feature showcase

Pale beige band, centered serif heading, short intro, and app UI arranged as a multi-column feature story.

### Feature rows

Alternating product UI and copy, introduced by small uppercase mono labels and editorial serif headings.

### Review cards

White rounded cards on cream with small gold stars, compact review text, and muted attribution.

### Press quote panel

Large beige panel combines publication marks with a prominent serif testimonial and concise source label.

### Measured component styles

- **Primary button** (“Learn more”): background #f86713 · text #fefcfb · radius 9999px · padding 0px 20px · 350 14px ABC Oracle · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(34, 32,
- **Link** (“Wall Street Journal The 5 Best Budgeting”): transparent background · text #2a2926 · radius 0px · padding 0px · 400 16px ABC Oracle
- **Card** (““I love everything about this app. Build”): background #ffffff · text #2a2926 · radius 8px · padding 24px · 400 16px ABC Oracle
- **Navigation item** (“Get 30% OFF Core for one year with code ”): transparent background · text #2a2926 · radius 0px · padding 0px · 400 16px ABC Oracle

## Do

- Keep the cream canvas continuous across most sections.
- Use serif headlines to create an editorial hierarchy.
- Reserve mono uppercase styling for short eyebrows.
- Make primary actions orange, white-text pill buttons.
- Show real product screens as clear feature evidence.
- Alternate feature copy and product imagery for long-page rhythm.

## Don't

- Do not replace the warm canvas with stark white page backgrounds.
- Do not use the orange accent for large areas of body copy.
- Do not crowd serif headlines with decorative labels.
- Do not add heavy borders around every card or section.
- Do not let product screenshots become illegible decorative thumbnails.
- Do not make the experience feel like a dense banking dashboard.

## Agent prompt

Build a new Monarch-style fintech page with a continuous Cream Canvas (#fffaec) and Warm Ink (#2a2926) text. Use Paper White (#ffffff) for product and review cards, and Oat Beige (#f3ecd7) for occasional feature bands. Make primary actions Signal Orange (#f86713), with white text and pill-shaped silhouettes. Pair a light editorial serif similar to ABC Otto with an open sans-serif like ABC Oracle; use a small tracked mono eyebrow for feature labels. Arrange a human lifestyle hero beside readable product imagery, then alternate feature copy and app screens in spacious rows. Keep sections comfortable and simple, use subtle shadows rather than heavy borders, and retain a clear content hierarchy from headline to supporting copy to CTA.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Slim full-width announcement above the main navigation. | Time-limited promotion | Red-to-orange gradient, Centered light text |
| 2 | hero | Split hero with copy on the left and lifestyle image on the right. | Primary signup action, Product value proposition | Large headline, Orange pill CTA, Floating finance widgets |
| 3 | product-showcase | Centered introduction followed by a broad app interface demonstration. | Explain the product, Show product capability | Centered serif heading, App screenshot, Soft layered presentation |
| 4 | feature-grid | Pale beige band with a centered introduction and three-column feature presentation. | Browse app capabilities, Learn more actions | Beige surface, Feature copy blocks, Central phone UI |
| 5 | feature-split | One-column feature row pairing introductory copy with account summary UI. | Unify financial accounts | Mono eyebrow, Serif heading, Floating account card |
| 6 | feature-split | One-column feature row with transaction interface opposite explanatory text. | Search and review transactions | Transaction list, Alternating media placement |
| 7 | feature-split | One-column feature row pairing subscription copy with recurring-payment UI. | Detect recurring costs, Reduce missed payments | Subscription cards, Small mono eyebrow |
| 8 | feature-split | One-column feature row with dashboard imagery beside explanatory copy. | Explore financial trends | Chart screenshot, Editorial heading |
| 9 | feature-split | One-column feature row pairing goal-setting copy with progress cards. | Set savings targets, Track progress | Goal progress bars, Serif heading |
| 10 | feature-split | One-column feature row with web and phone screens beside copy. | Use across devices, Keep finances in sync | Desktop and mobile UI, Alternating media placement |
| 11 | integrations | Split panel with connection copy on one side and provider marks on the other. | Build trust in syncing, Show provider breadth | White and orange-yellow panels, Provider logo cluster |
| 12 | testimonials | Centered heading above a three-column grid of review cards. | Social proof, Scan member feedback | White cards, Gold stars, Muted attribution |
| 13 | comparison | Large beige quote panel with publication logos and editorial quote. | Third-party validation | Publication marks, Large serif quotation |
| 14 | content-feed | Image beside a community heading and two resource cards. | Join community, Explore editorial resources | Lifestyle photo, White resource cards, Text links |
| 15 | pricing | Split pricing panel with offer copy and a supporting phone-use image. | Start free trial, View pricing | Serif offer headline, Orange pill action, Lifestyle product photo |
| 16 | cta | Centered closing statement and get-started action above the footer. | Final conversion prompt | Orange feature panel, Centered serif copy |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,255,255,0);
--osano-button-border-color: #22201d;
--osano-button-background-color: #ffffff;
--osano-button-foreground-color: #22201d;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #22201d;
--osano-info-dialog-overlay-color: rgba(34,32,29,0.5);
--osano-link-color: #22201d;
--osano-toggle-off-track-color: #bebbb8;
--osano-toggle-off-thumb-color: #ffffff;
--osano-toggle-on-track-color: #ff692d;
--osano-toggle-on-thumb-color: #ffffff;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #22201d;
--osano-button-accept-background-color: #ffffff;
--osano-button-accept-border-color: #22201d;
--osano-button-accept-foreground-color: #22201d;
--osano-button-deny-background-color: #ffffff;
--osano-button-deny-border-color: #22201d;
--osano-button-deny-foreground-color: #22201d;
--osano-button-reject-all-background-color: #ffffff;
--osano-button-reject-all-background-color-hover: #ebebeb;
--osano-button-reject-all-border-color: #22201d;
--osano-button-reject-all-foreground-color: #22201d;
--osano-button-manage-background-color: #ffffff;
--osano-button-manage-border-color: #22201d;
--osano-button-manage-foreground-color: #22201d;
--osano-info-dialog-link-color: #22201d;
--osano-info-dialog-button-close-color: #22201d;
--osano-info-dialog-toggle-off-track-color: #bebbb8;
--osano-info-dialog-toggle-off-thumb-color: #ffffff;
--osano-info-dialog-toggle-on-track-color: #ff692d;
--osano-info-dialog-toggle-on-thumb-color: #ffffff;
--osano-info-dialog-button-background-color: #ffffff;
--osano-info-dialog-button-border-color: #22201d;
```

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