# Monarch design system

> Monarch design system measured from monarch.com: Copernicus font, #FF692D primary on #F6F5F3, 10 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/monarch.com/

Monarch’s website (monarch.com) uses the Copernicus font and #FF692D as its main color on a #F6F5F3 background. Measured by Sitepeel on November 4, 2026.

## What font does Monarch use?

Monarch uses Copernicus (weight 350) and ABC Oracle (weights 100, 350 and 400) on monarch.com. Page titles are 48px at weight 350 (32px on phones) and body text is 16px. Measured on November 4, 2026.

- Copernicus (weights 350)
- ABC Oracle (weights 100, 350, 400)

## Monarch colors: palette and hex codes

Monarch’s main colors are #F6F5F3 (snow) for the background, #22201D (charcoal) for text and #FF692D (vivid orange) as the main accent, with #F35B16 (vivid orange) and #FFBC0B (vivid amber) as other accents. Measured on November 4, 2026.

- #F6F5F3: snow
- #22201D: charcoal
- #777573: slate
- #EFECEA: mist
- #FFFFFF: white
- #DCD9D6: warm silver
- #FF692D: vivid orange
- #FEFCFB: snow

## What is Monarch built with?

Monarch’s website (monarch.com) is built with Sanity, Next.js, Lit, React and Radix UI. Measured on November 4, 2026.

- JavaScript framework: Next.js 16.3.5, Lit 2.8.0, React 19.3.0-experimental-cbb0
- Hosting & CDN: Vercel
- Animation & 3D: Motion
- Analytics: Sentry 10.44.0, Vercel Speed Insights
- Marketing & support: Osano
- Site builder & CMS: Sanity

## Questions and answers

### What font does Monarch use?

Monarch’s website uses Copernicus (weight 350) and ABC Oracle (weights 100, 350 and 400). Page titles are 48px at weight 350 (32px on phones) and body text is 16px. Measured on November 4, 2026.

### What are the Monarch colors and hex codes?

On monarch.com: #F6F5F3 (snow) for the background, #22201D (charcoal) for text and #FF692D (vivid orange) as the main accent, with #F35B16 (vivid orange) and #FFBC0B (vivid amber) as other accents. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the Monarch design system?

The design system on this page is monarch.com’s, as measured on November 4, 2026: Copernicus type, #FF692D as the main color, pill-shaped corners and a 4px spacing grid, written down as a DESIGN.md. It is not Monarch’s own documentation.

### What is Monarch built with?

Monarch’s website (monarch.com) is built with Sanity, Next.js, Lit, React and Radix UI. The full tech stack Sitepeel found: Next.js, Vercel, Lit, React, Motion, Sentry, Vercel Speed Insights, Osano, Sanity and Radix UI. Measured on November 4, 2026.

### What is the Monarch DESIGN.md?

A plain-text file with Monarch’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Monarch’s official design system?

No. Sitepeel measured it from monarch.com’s public page on November 4, 2026. It is an independent analysis, not made or approved by Monarch.

### Can I use Monarch’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Monarch’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/monarch.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Monarch.

## The DESIGN.md file

```markdown
---
version: alpha
name: Monarch
description: "Light interface measured from monarch.com: Copernicus type with ABC Oracle, vivid orange accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#F6F5F3"
  surface: "#F6F5F3"
  on-surface: "#22201D"
  on-background: "#22201D"
  on-surface-variant: "#777573"
  surface-container-low: "#EFECEA"
  surface-container: "#FFFFFF"
  outline: "#DCD9D6"
  primary: "#FF692D"
  on-primary: "#FEFCFB"
  secondary: "#F35B16"
  tertiary: "#FFBC0B"
typography:
  headline-display:
    fontFamily: Copernicus
    fontSize: 48px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.067em
  headline-lg:
    fontFamily: Copernicus
    fontSize: 40px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.06em
  headline-md:
    fontFamily: Copernicus
    fontSize: 32px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.05em
  body-md:
    fontFamily: ABC Oracle
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: ABC Oracle
    fontSize: 18px
    fontWeight: 350
    lineHeight: 1.4
    letterSpacing: -0.01em
  body-sm:
    fontFamily: ABC Oracle
    fontSize: 14px
    fontWeight: 100
    lineHeight: 1.43
  label-md:
    fontFamily: ABC Oracle
    fontSize: 14px
    fontWeight: 350
    lineHeight: 1.3
    letterSpacing: -0.01em
  headline-display-mobile:
    fontFamily: Copernicus
    fontSize: 32px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.1em
  headline-lg-mobile:
    fontFamily: Copernicus
    fontSize: 32px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.075em
  headline-md-mobile:
    fontFamily: Copernicus
    fontSize: 28px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.057em
rounded:
  md: 12px
  full: 9999px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  gutter: 16px
  section: 64px
  margin: 16px
  container: 1440px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 0px 16px
    height: 36px
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
  button-outline:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: 0px 16px
    height: 36px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 8px 12px
  link:
    textColor: "{colors.on-surface}"
---

# Monarch Design System

## Overview

Monarch describes itself as: “Manage your money with Monarch. Track accounts, build budgets, monitor investments, plan goals, and get a clearer view of your finances in one app.” The interface is light, built on **Snow (#F6F5F3)** with **Charcoal (#22201D)** text, and **Vivid Orange (#FF692D)** as the main accent.

Type is set in **Copernicus** and **ABC Oracle**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [monarch.com](https://www.monarch.com/) on November 4, 2026 at 1440×900 and 390×844 from 323 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles.

- **Snow (#F6F5F3):** Page background, seen 1 time. Token `background`.
- **Charcoal (#22201D):** Primary text and headings, seen 75 times. Token `on-surface`, CSS `--theme-none-foreground`.
- **Slate (#777573):** Secondary text, seen 9 times. Token `on-surface-variant`.
- **Mist (#EFECEA):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **White (#FFFFFF):** Cards and panels, seen 6 times. Token `surface-container`, CSS `--osano-button-background-color`.
- **Warm Silver (#DCD9D6):** Borders and dividers, seen 3 times. Token `outline`.
- **Vivid Orange (#FF692D):** Primary buttons and calls to action, seen 9 times. Token `primary`, CSS `--orange-9`.
- **Snow (#FEFCFB):** Text and icons on primary. Token `on-primary`.
- **Vivid Orange (#F35B16):** Accent in text, fills and borders, seen 13 times. Token `secondary`.
- **Vivid Amber (#FFBC0B):** Accent, seen 22 times. Token `tertiary`.

## Typography

**Copernicus** and **ABC Oracle** share the interface. Fallback stack: `Copernicus, sans-serif`.

- **headline-display:** Copernicus 48px at weight 350, line height 1.2, tracking -0.067em (32px on mobile). Page title (h1).
- **headline-lg:** Copernicus 40px at weight 350, line height 1.2, tracking -0.06em (32px on mobile). Section headings (h2).
- **headline-md:** Copernicus 32px at weight 350, line height 1.2, tracking -0.05em (28px on mobile). Sub-section headings.
- **body-md:** ABC Oracle 16px at weight 400, line height 1.5. Body text.
- **body-lg:** ABC Oracle 18px at weight 350, line height 1.4, tracking -0.01em. Lead paragraphs.
- **body-sm:** ABC Oracle 14px at weight 100, line height 1.43. Secondary and small text.
- **label-md:** ABC Oracle 14px at weight 350, line height 1.3, tracking -0.01em. Buttons, navigation and labels.

## Layout

Spacing follows a 4px grid: 100% of measured gaps and paddings are multiples of 4px.

- **Scale:** xs 4px, sm 8px, md 16px, lg 32px, xl 64px.
- **Sections:** 64px vertical padding between major sections.
- **Gaps:** 16px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1440px.
- **Page margin:** 16px on each side of full-width sections.
- **Breakpoints:** 359px, 376px, 480px, 500px, 640px, 767px, 768px, 1024px, 1200px, 1280px, 1360px, 1536px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `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`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 64 elements.
- **md (12px):** 16 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Sign up”):** #FF692D fill, #FEFCFB text, 14px/350, 9999px radius, padding 0px 16px, 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`.
- **button-primary-hover:** background #F35B16, text #FEFCFB on hover.
- **button-outline (“Sign in”):** #FFFFFF fill, #22201D text, 14px/100, 9999px radius, padding 0px 16px, border 1px solid #DCD9D6, 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`.
- **button-ghost (“Features”):** transparent fill, #22201D text, 14px/350, 9999px radius, padding 8px 12px.
- **link:** transparent fill, #22201D text, padding 0px.

## Do's and Don'ts

- Do use #F6F5F3 for the page and lift surfaces in small steps: #EFECEA, #FFFFFF.
- Do keep text in 2 levels: #22201D, #777573.
- Do reserve #FF692D for primary actions and key highlights.
- Do set headlines in Copernicus with tight tracking (-0.067em).
- Do keep spacing on the 4px grid.
- Do make buttons and chips fully rounded (9999px); most other elements use 12px corners.
- Don't use #777573 for body text; it reaches 4.21:1 on #F6F5F3. Keep it for large text or metadata.
- Don't introduce new font families beyond Copernicus and ABC Oracle.
- Don't use #FF692D for large backgrounds or body text.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.15s, 0.2s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/monarch.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```