# Mirah Design System

> Earth-toned clinical precision anchored by deep teal foundations and warm ochre actions.

**Source:** https://mirah.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Mirah utilizes a sophisticated, clinical palette that avoids standard medical blues in favor of a deep "Deep Sea" teal (#183b44) and a warm "Earthen" brown (#431f0f). The interface is built on a "Parchment" foundation (#f7f3f0), providing a softer contrast than pure white for long-form reading. Typography pairs the serif **Adonis Web** for authoritative headings with the geometric sans-serif **Europa** for functional UI and body text. Primary actions are consistently rendered in a high-contrast ochre (#be8445) using pill-shaped geometry, while structural elements maintain sharp 0px corners.

## Signature DNA
1. **The Deep Sea Anchor** (The use of #183b44 as a primary structural background for navigation and heavy sections, providing a high-contrast base for white typography. Seen on `mirah.com` and `mirah.com/about`).
2. **Parchment Canvas** (The rejection of #ffffff as a primary background in favor of #f7f3f0, creating a warmer, more accessible clinical atmosphere. Seen across all analyzed pages).
3. **Geometric Pill CTAs** (Interactive elements use a 300px radius to create distinct pill shapes that contrast against the otherwise sharp-edged, 0px radius layout grid. Seen on `mirah.com`).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#f7f3f0` | Primary page background and button text | 37 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Secondary surface and input background | 34 | 0.8 | Computed Style |
| `{color.ink.black}` | `#000000` | Footer text and secondary button labels | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink.primary}` | `#431f0f` | Primary text color and deep accent surfaces | 45 | 0.8 | Computed Style |
| `{color.surface.dark}` | `#183b44` | Header background and dark section blocks | 17 | 0.8 | Computed Style |
| `{color.action.primary}` | `#be8445` | Primary CTA background (Book a Demo) | 15 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| adonis-web | 400 | Display/Headings | Crimson Pro | Commercial |
| europa | 400, 700 | Body/UI/Buttons | Futura | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 42px | 42.87px | normal | 400 | Hero Headlines | `h2.preSlide.slideIn` |
| `{type.heading.md}` | 21px | 31.5px | normal | 400 | Large Body Intro | `p.sqsrte-large` |
| `{type.heading.sm}` | 21px | 31.5px | normal | 700 | Emphasized Heading | `strong` |
| `{type.body.md}` | 15px | 22.5px | normal | 400 | Default Body Text | `article#sections` |
| `{type.ui.md}` | 15px | normal | normal | 400 | Control Labels | `button.gallery-reel-control` |
| `{type.caption}` | 14px | 20.25px | normal | 400 | Image Captions | `div.caption-text` |
| `{type.button}` | 13px | normal | 1.275px | 700 | Primary Pill CTA | `a.sqs-block-button-element` |
| `{type.label.xs}` | 12px | normal | normal | 400 | Form Labels | `label.caption` |

### Principles
1. **Serif Authority:** All major display copy and section headers must use Adonis Web to maintain a clinical, trustworthy tone.
2. **Geometric Clarity:** Functional UI, including navigation and buttons, must use Europa for maximum legibility.
3. **Tracking for Action:** Button text (13px) uses aggressive letter-spacing (1.275px) to differentiate interactive labels from static UI.

## Spacing
**Base unit:** 5px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 3 |
| `{space.sm}` | 8px | 11 |
| `{space.md}` | 10px | 9 |
| `{space.lg}` | 15px | 4 |
| `{space.xl}` | 26px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sections, Cards, Layout containers | 97 occurrences |
| `{radius.sm}` | 4px | Form Inputs | `Text Input` component |
| `{radius.pill}` | 300px | Primary Buttons | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.none}` | none | Standard sections and buttons | 97 occurrences |
| `{shadow.flat}` | `rgba(0, 0, 0, 0) 0px 0px 0px 1px` | Input focus/outline | `Text Input` component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide Call to Action (e.g., "Book a Demo")
**Pages observed:** `mirah.com`, `mirah.com/pricing`
**Spec:**
- **Background:** `{color.action.primary}` (#be8445)
- **Text:** `{color.canvas}` (#f7f3f0)
- **Radius:** `{radius.pill}` (300px)
- **Padding:** 11.5px 25.5px
- **Typography:** `{type.button}` (13px/700/1.275px spacing)
**States observed:** Default: captured | Hover: not captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** `mirah.com`
**Spec:**
- **Background:** `{color.white}` (#ffffff)
- **Text:** `{color.ink.primary}` at 49% opacity (#431f0f)
- **Border:** 1px solid `{color.surface.dark}` (#183b44)
- **Radius:** `{radius.sm}` (4px)
- **Padding:** 8px 10px
**States observed:** Default: captured | Focus: captured (via shadow token)

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-impact content blocks or headers
**Pages observed:** `mirah.com`, `mirah.com/about`
**Spec:**
- **Background:** `{color.surface.dark}` (#183b44)
- **Text:** `{color.canvas}` (#f7f3f0)
- **Radius:** `{radius.none}` (0px)
- **Typography:** `{type.body.md}` (15px)

#### Parchment Surface
**Role:** Standard content sections
**Pages observed:** `mirah.com`, `mirah.com/pricing`
**Spec:**
- **Background:** `{color.canvas}` (#f7f3f0)
- **Text:** `{color.ink.primary}` (#431f0f)
- **Radius:** `{radius.none}` (0px)

#### Ochre Surface
**Role:** Specialized highlight or informational blocks
**Pages observed:** `mirah.com`
**Spec:**
- **Background:** `{color.action.primary}` (#be8445)
- **Text:** `{color.ink.black}` (#000000)
- **Radius:** `{radius.none}` (0px)

#### White Surface
**Role:** Clean content breaks or card backgrounds
**Pages observed:** `mirah.com`
**Spec:**
- **Background:** `{color.white}` (#ffffff)
- **Text:** `{color.ink.primary}` (#431f0f)
- **Radius:** `{radius.none}` (0px)

## Layout
| Property | Value |
|---|---|
| Container Max-Width | Not explicitly captured |
| Section Padding | 0px (edge-to-edge blocks) |
| Element Gap | 10px - 15px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger menu; Hero text centers. |
| Desktop | 1440px | Horizontal navigation visible; Multi-column form layouts. |

## Imagery & decoration
Mirah uses photography featuring healthcare professionals and patients in natural, warm-lit settings. Decorative elements are minimal, relying on solid color blocks (#183b44, #f7f3f0) to create rhythm. Logos of "Trusted by" organizations are displayed in a grayscale reel to maintain brand neutrality.

## Do's
- Use `{color.canvas}` (#f7f3f0) for the main page background to reduce eye strain.
- Apply `{radius.pill}` (300px) only to interactive buttons.
- Ensure all display headings use **adonis-web** at 400 weight.
- Use `{color.surface.dark}` (#183b44) for primary headers to ground the page.
- Maintain sharp `{radius.none}` (0px) for all layout section containers.

## Don'ts
- **Wrong:** Using pure white (#ffffff) for large section backgrounds. **Right:** Use `{color.canvas}` (#f7f3f0). **Reason:** Brand identity relies on the "Parchment" warmth.
- **Wrong:** Applying rounded corners to form inputs greater than 4px. **Right:** Keep inputs at `{radius.sm}` (4px).
- **Wrong:** Using `{color.action.primary}` (#be8445) for body text. **Right:** Use for buttons and very specific highlights only.
- **Wrong:** Setting display headings in Europa. **Right:** Use Adonis Web for all H1-H3 levels.

## Similar brands
- One Medical (Clinical warmth)
- Maven Clinic (Healthcare serif authority)
- Oscar Health (Geometric UI with soft foundations)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --mirah-canvas: #f7f3f0;
  --mirah-white: #ffffff;
  --mirah-ink-primary: #431f0f;
  --mirah-surface-dark: #183b44;
  --mirah-action-primary: #be8445;
  --mirah-font-heading: "adonis-web", serif;
  --mirah-font-body: "europa", sans-serif;
  --mirah-radius-pill: 300px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Mirah's action-primary color #be8445, a 300px border radius, and Europa bold text at 13px with 1.275px letter spacing."
- "Design a hero section with a background of #183b44, using Adonis Web for the headline in #f7f3f0 at 42px."
- "Generate a contact form with white inputs, 4px border radius, and 1px borders in #183b44."

## Known gaps
- Hover and Active states for the "Rounded Button" were not captured in the source evidence.
- Mobile-specific typography scale for display sizes was not explicitly detailed in the token set.
- Precise container max-widths were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://mirah.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://mirah.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://mirah.com/about | Desktop 1440 | 2026-06-06 |