Skip to content
DesignMunkDesignMunk Submit a site

Monarch

monarch.com
Your home base for money clarity
Finance Fintech Next.js Tailwind Homepage ABC Oracle Copernicus
Share Visit site
monarch.com DESKTOP · 1440
Monarch

AI Breakdown

Design export

---
version: alpha
name: Monarch
description: Your home base for money clarity
colors:
  primary: "#22201d"
  secondary: "#f0ac81"
  tertiary: "#ff692d"
  neutral: "#f6f5f3"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Copernicus
    fontSize: 48px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.067em
  headline-md:
    fontFamily: Copernicus
    fontSize: 40px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.06em
  headline-sm:
    fontFamily: Copernicus
    fontSize: 32px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.05em
  headline-xs:
    fontFamily: ABC Oracle
    fontSize: 18px
    fontWeight: 350
    lineHeight: 1.22
  body-md:
    fontFamily: ABC Oracle
    fontSize: 16px
    fontWeight: 350
    lineHeight: 1.58
    letterSpacing: -0.011em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 62px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#fefcfb"
    rounded: "{rounded.full}"
    padding: 15px 24px
    height: 48px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 15px 24px
    height: 48px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Monarch: Warm Serif Headlines, Pill CTAs, Quiet Depth

## Overview

Monarch's visual voice is warm, trustworthy, and calm. Content sits on soft off-white surfaces with deep ink text and a single orange accent for actions. Headlines are classic and editorial; body text is modern and utilitarian. Spacing is generous and regular, producing a spacious, low-stress reading rhythm suited to personal-finance content.

## Colors

- **primary (#22201d):** Core ink for headlines, body text, icons, and high-contrast UI.
- **secondary (#f0ac81):** Warm accent tint for subtle highlights or decorative strokes; avoid using for primary actions.
- **tertiary (#ff692d):** Primary action color for CTAs, highlights, and active states.
- **neutral (#f6f5f3):** Paper-like base for sections and cards.
- **surface ({colors.neutral}):** Default background surface; pairs with deep ink for legibility.
- **on-surface ({colors.primary}):** Text/icon color when placed on surface/neutral backgrounds.

## Typography

- Headings (headline-lg/md/sm): Copernicus, 48/40/32px at weight 350 with tight negative tracking (-0.067/-0.06/-0.05em) and 1.2 line height. Use for page titles and section heads. Source: custom/self-hosted; if unavailable, substitute Spectral or Crimson Pro for a similar classical serif texture.
- Eyebrow/overline (headline-xs): ABC Oracle at 18px, 350 weight, 1.22 line height for compact labels above headings and small UI titles.
- Body (body-md): ABC Oracle at 16px, 350 weight, 1.58 line height and light negative tracking (-0.011em). Use for paragraphs, lists, and long-form copy. Source: custom/self-hosted; if unavailable, substitute Inter or IBM Plex Sans for neutral, readable body text.
- Pairing guidance: serif for emphasis and scannability; sans for utility and dense information like menus, buttons, and captions.

## Layout

Spacing follows an 8px-based scale: 8, 16, 24, 40, 62. Use xs/sm for element padding, md for gaps inside cards, lg for section gutters, and xl for major vertical rhythm between sections. Content blocks compose within a simple 12-column grid, centering key text on wide viewports and switching to single-column stacks on mobile with md (24px) gutters.

## Elevation & Depth

Depth is restrained. Only a small shadow is used: rgba(34,32,29,0.05) 0 1px 2px for floating elements and overlays. Larger shadows are none; hierarchy relies on tonal contrast (neutral surfaces vs. page background), whitespace, and crisp borders where needed. Prefer the small shadow on hero overlays and interactive cards; omit elsewhere.

## Shapes

Two radii define the language: sm = 8px for cards and panels, and full = 9999px for pills. Buttons, chips, and input fields should use the full radius for a friendly, approachable feel; structural containers use 8px to stay crisp.

## Components

Buttons and core card styles are tokenized and should be used as is:
- Button Primary: background #ff692d, text #fefcfb, pill radius (9999px), 15px 24px padding, 48px height.
- Button Secondary: text color #22201d, pill radius (9999px), 15px 24px padding, 48px height. Use on light surfaces as a ghost/outline or text-button.
- Button Link: text color #22201d, square corners (0px) for inline actions.
- Card: background #f6f5f3, text #22201d, 8px radius, 16px padding.

### Promo Ribbon
A full-width bar advertising offers. Background uses #ff692d with on-surface text #fefcfb. Height aligns to the 48px button rhythm; inner padding sm (16px).

### App Hero with Overlays
Cinematic media left with a neutral text panel. Heading uses headline-lg. Pair primary and secondary buttons side by side with sm (16px) gap. Use the small shadow on any floating stat chips.

### Trust Bar with Logos & Stars
A low-contrast strip of review stars and press logos. Keep background at neutral (#f6f5f3), spacing md (24px) inside, lg (40px) outside. Text stays body-md.

### Feature Quadrant
Four blocks: Track, Budget, Collaborate, Plan. Each uses an overline (headline-xs), a short Copernicus title (headline-sm), and body-md copy. Cards use 8px radius and md spacing.

### Accounts Aggregation Panel
A stacked list of synced accounts with avatars and balances. Container uses Card token with the small shadow to lift over imagery. Rows use xs (8px) gaps; actions are pill buttons when present.

### Testimonial Quotes
Long-form quotes set in body-md with a short Copernicus intro line. Use generous lg (40px) spacing and keep backgrounds neutral to avoid visual noise.

### Press Pull-Quotes
Compact blocks with publication lines and linked articles. Headings use headline-xs; quotes may use headline-sm for emphasis. Keep links as button-link style.

### Footer Utility Grid
Multi-column link lists with store badges. Columns stack to single on mobile with md gaps; headings in ABC Oracle 16px, links as button-link style.

## Do's and Don'ts

- Do reserve #ff692d for primary CTAs, active states, and the promo ribbon; use it sparingly elsewhere.
- Do set key headings with Copernicus at 48/40/32 and the provided negative tracking; avoid additional font weights.
- Do keep cards at 8px radius and apply only the small shadow when an element must float.
- Don't mix more than the two radii; avoid 4px or 16px corners.
- Don't introduce dark backgrounds behind body text; primary text is designed for the neutral surface.
- Don't add new accent colors; secondary (#f0ac81) is for light highlights, not buttons or links.

## Agent Prompt Guide

Quick color reference — text: #22201d, background: #f6f5f3, border: #22201d, accent/CTA: #ff692d.

1) Build a promo ribbon
- Container: 100% width, background #ff692d, padding 16px (sm)
- Text: font-family 'ABC Oracle', font-size 16px, line-height 1.58, color #fefcfb
- Links: button-link style, color #fefcfb

2) Hero intro panel with two CTAs
- Panel: background #f6f5f3, border-radius 8px, padding 24px (md), shadow rgba(34,32,29,0.05) 0 1px 2px
- Heading: font-family 'Copernicus', 48px, weight 350, line-height 1.2, letter-spacing -0.067em, color #22201d
- Body: 'ABC Oracle' 16px/1.58, color #22201d
- Primary button: background #ff692d, color #fefcfb, height 48px, padding 15px 24px, border-radius 9999px
- Secondary button: text #22201d, height 48px, padding 15px 24px, border-radius 9999px

3) Four-up feature grid
- Grid: 12 columns; on desktop, 4 cards; gaps 24px (md); section padding 40px (lg)
- Card: background #f6f5f3, radius 8px, padding 16px, shadow none
- Overline: 'ABC Oracle' 18px/1.22 (headline-xs)
- Title: 'Copernicus' 32px/1.2, letter-spacing -0.05em
- Copy: 'ABC Oracle' 16px/1.58

4) Testimonials section
- Section background #f6f5f3 with xl (62px) vertical padding
- Heading: 'Copernicus' 40px/1.2, letter-spacing -0.06em
- Quote card: background #f6f5f3, radius 8px, padding 24px, shadow rgba(34,32,29,0.05) 0 1px 2px
- Attribution: 'ABC Oracle' 16px/1.58, color #22201d

## Similar Brands

- YNAB: similarly calm tone with strong CTA color; Monarch leans warmer with serif headlines versus YNAB's pure sans.
- Wealthfront: neutral palette and soft depth; Monarch uses a brighter orange accent and editorial serif for more warmth.
- Rocket Money: pill CTAs and consumer budgeting focus; Monarch's typography is more classical and its surfaces lighter.
- Simplifi by Quicken: grid-based features and trust badges; Monarch applies a softer paper background and minimal shadows.

More like this

Browse Finance →
kota.io
Kota Blog Fintech
Kota Blog
The platform that runs employee benefits on autopilot.
Blog · 1 hour ago
privy.io
Privy About Developer Tools
Privy About
The page opens with a centered hero that screams careers: a small “CAREERS” eyebrow over a huge headline, tight blurb, and twin…
About · 14 hours ago
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago