Monarch

Overview

Monarch is a personal finance platform that transforms complex money management into an intuitive, clarity-focused experience. The design system embodies 'Warm Minimalism'—a philosophy that combines the restraint of modernist design with the approachability of human-centered interfaces. The brand serves individuals and couples seeking to understand their financial picture at a glance, without cognitive overload. The UI evokes calm confidence: users feel in control, informed, and empowered to make better financial decisions. The aesthetic is deliberately understated—warm grays (rgb(34, 32, 29) as the dominant text color) paired with a signature warm orange (rgb(255, 105, 45)) that appears only on actionable elements, creating a visual hierarchy that guides attention without shouting. Voice: conversational, precise, and optimistic. Example: 'Your $1,150 is waiting—here's where it can go.'

Colors

The color system is anchored in a warm, neutral foundation (surface: #f6f5f3, on-surface: #22201d) that creates a paper-like, approachable canvas. The primary accent, Monarch Orange (#ff692d, rgb(255, 105, 45)), is reserved exclusively for call-to-action buttons, interactive focus states, and key financial metrics that demand attention. This restraint ensures the orange retains its psychological weight—users learn to associate it with actionable moments. Secondary colors include a warm yellow (#ffbc0b) for highlights and a teal green (#1db679) for positive financial indicators (gains, remaining budget). The surface stack progresses from #fbfaf8 (brightest) through #dcd9d6 (container-highest), enabling subtle depth without harsh contrast. Error states use #d64700 (a darker orange-red) to ma

Typography

The type system pairs Copernicus (serif, used for headlines and display text) with ABC Oracle (sans-serif, used for body and UI labels), creating a sophisticated yet approachable voice. Copernicus at 48px fontWeight 400 with -0.015em letter-spacing anchors the hero headline ('The modern way to manage money'), while ABC Oracle at 16px fontWeight 400 carries body copy and UI labels. The serif-sans pairing signals editorial credibility (financial data deserves authority) while the sans-serif keeps interfaces scannable and modern. Headlines use negative letter-spacing (-0.02em to -0.01em) to tighten their visual presence, while body text maintains neutral spacing (0em) for legibility. Labels use fontWeight 600 at 14px with 0.01em letter-spacing to create subtle emphasis without heaviness. On s

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint strategy. The page rhythm is governed by the spacing scale: section separation uses lg spacing (40px), card-to-card gutters use md spacing (24px), and internal card padding uses md spacing (24px). The hero section occupies full-width with a semi-transparent overlay (rgba(34, 32, 29, 0.08)) to ensure text legibility over the background image. Feature cards are arranged in a 3-column grid on desktop, collapsing to 1 column on mobile, with consistent md spacing between them. The navigation header uses gutter spacing (24px) for horizontal padding and sm spacing (12px) for vertical padding, creating a compact but breathable top bar. Container max-width of 1280px ensures content never stretche

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh contrast. Level 1 (base surfaces) uses no shadow, relying on the surface-container color stack for definition. Level 2 (cards, input fields) applies elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)), creating a subtle lift that distinguishes interactive elements from the background. Level 3 (buttons, hovered cards, modals) applies elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), signaling increased interactivity. On button hover, elevation escalates to elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)), creating a tactile sense of lift.

Shapes

The shape philosophy is 'Soft-Technical'—combining the precision of modern fintech with the approachability of rounded corners. Buttons use full border-radius (9999px), creating pill-shaped CTAs that feel inviting and modern; this contrasts with the more restrained rounded.lg (1rem / 16px) used on cards and containers, which signals stability and structure. Input fields use rounded.DEFAULT (0.5rem / 8px), a subtle rounding that maintains a professional appearance while remaining distinct from buttons. The rationale: pill-shaped buttons are rare enough in the UI that they immediately draw atten

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses backgroundColor: {colors.primary} (rgb(255, 105, 45)), textColor: {colors.on-primary} (rgb(254, 252, 251)), rounded: {rounded.full}, padding: 12px 24px, and height: 48px. On hover, the background shifts to #f35b16 (a darker orange) with boxShadow: 0 6px 16px rgba(0, 0, 0, 0.2), creating a tactile lift. On active/pressed, the background darkens further to #d64700 with a reduced shadow (0 2px 4px rgba(0, 0, 0, 0.12)) to convey the button being 'pressed down.' Transition timing is 200ms ease-out for smooth state changes. Secondary buttons use a transparent background with a 1px border at {colors.outline}, allowing them to recede visually while remaining accessible. On hover, the background fills

Do's and Don'ts

**Do**

• Do use the primary orange (#ff692d) exclusively on CTAs, focus states, and key financial metrics—never on decorative elements or backgrounds.
• Do maintain the full 48px button height for all primary actions to ensure touch-target accessibility (minimum 44px per WCAG).
• Do apply the serif-sans pairing consistently: Copernicus for headlines (48px+), ABC Oracle for body and UI labels (16px and below).
• Do use the surface-container color stack (from #fbfaf8 to #dcd9d6) to create depth without harsh shadows; avoid pure white (#ffffff) for surfaces.
• Do transition button states over 200ms ease-out to create a responsive, tactile feel without feeling sluggish.
• Do pair warm grays (on-surface: #22201d) with warm whites (surface: #f6f5f3) to maintain the approachable, paper-like aesthetic.

**Don't**

• Don't use the primary orange on non-interactive elements; it must remain a signal for actionable moments.
• Don't apply shadows deeper than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) on standard components—reserve deeper shadows for modals and overlays.
• Don't mix serif and sans-serif within the same text block; use Copernicus for headlines and ABC Oracle for body, never reversed.
• Don't use pure black (#000000) or pure white (#ffffff) for text or surfaces; stick to the defined color tokens to maintain warmth and approachability.
• Don't reduce button padding below 12px 24px or height below 48px; this compromises both visual hierarchy and touch accessibility.
• Don't apply border-radius smaller than rounded.DEFAULT (8px) on interactive elements; tighter radii feel austere and reduce visual affordance.