Monarch Money — design system & UI screens

Fintech · 1 screen · 12 sections · monarchmoney.com

Full-bleed warm cinematic photo of a couple on a couch anchors the hero, overlaid with two glassmorphic product cards — a "$335,608.58 NET WORTH" pill upper-left and a live multi-account list (Mark Checking, Sarah HYSA, 401k, Brokerage) upper-right — with the value prop and orange "Unlock better money habits" CTA sitting in a light card lower-left. The signature treatment is this layering of frosted, semi-transparent app UI snippets directly on the lifestyle photography, carried through every feature section as cropped product screenshots (budget Sankey flow, transaction lists, subscription tracker) floated against a soft off-white canvas. Large elegant serif headlines and a single warm orange accent unify the page, closing on a full-width orange CTA band.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/monarch-money.

Decoded design system

Monarch Money's decoded design system: background #F6F5F3, text #22201D, accent #FF692D, link #F35B16, primary #FF692D; type scale h1 48px / h2 40px / body 18px; 8px spacing base; 6px base radius. The single interactive/action color is #FF692D — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F6F5F3`
surface	`#E9E8E6`
border	`#D6D5D2`
text	`#22201D`
text_muted	`#72706E`
primary	`#FF692D`
accent	`#FF692D`
link	`#F35B16`
secondary	`#9499AD`
button_bg	`#FF692D`
button_text	`#FEFCFB`

Using these colors

Action color #FF692D — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #FF692D — one role, not several (the action color).
accent #FF692D — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #F35B16 — inline text links and link-styled controls.
secondary #9499AD — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Copernicus
Body: ABC Oracle
h1: 48px
h2: 40px
body: 18px

Spacing

base unit: 8px
scale: 6px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px

Radii

base: 6px
button: 9999px

Shadow

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

Shadows (elevation)

subtle: 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
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

Motion

Micro-interactions run at 1500ms (dominant) with cubic-bezier(0.075, 0.82, 0.165, 1).

durations: 1500ms · 300ms · 2000ms
easings: cubic-bezier(0.075, 0.82, 0.165, 1) · cubic-bezier(0.4, 0, 0.2, 1)
animated properties: opacity, background-color, color, stroke

Native design tokens

Token	Value
`--gray-1`	`#fbfaf8`
`--gray-2`	`#f6f5f3`
`--gray-3`	`#efecea`
`--gray-4`	`#ebe8e5`
`--gray-5`	`#e4e1de`
`--gray-6`	`#dcd9d6`
`--gray-7`	`#d1cecb`
`--gray-8`	`#bebbb8`
`--gray-9`	`#8f8c8a`
`--gray-10`	`#84827f`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #F35B16
primary focus: box-shadow rgb(251, 250, 248) 0px 0px 0px 2px, rgb(34, 32, 29) 0px 0px 0px 4px, rgba(34, 32, 29, 0.05) 0px 1px 2px 0px · outline 2px solid rgba(0, 0, 0, 0)

Layout (measured)

container max-width: 1440px
nav: 108px fixed

Motion choreography (measured)

Load order: div.osano-cm-info-dialog__in → div.osano-cm-window__dialog → button.osano-cm-dialog__close → button.osano-cm-dialog__close → button.osano-cm-dialog__close → button.osano-cm-dialog__close

Scroll reveal: 9 elements rest at opacity 0, animate in over 2s cubic-bezier(0.075, 0.82, 0.165, 1).

Stagger: div ×3 — 80ms apart.

Overlay recipe (measured)

dialog panel: #FFFFFF · radius 8px

Responsive (measured)

breakpoints: 480px · 640px · 768px · 1024px · 1280px
mobile (390px): hero 32px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Monarch Money fintech landing with photographic hero and floating net-worth account cards