Skip to content
DesignMunkDesignMunk Submit a site

Clarion Health

clarionhealth.com
Cut phone time. Boost care time.
AI Health Webflow Homepage Bpmf Zihi Kai Geist
Share Visit site
clarionhealth.com DESKTOP · 1440
Clarion Health

AI Breakdown

Design export

# Design brief: the Clarion Health design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/09161645/clarionhealth-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/09161645/clarionhealth-com-featured.webp
- On DesignMunk: https://designmunk.com/clarion-health/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Clarion Health: Serif Headlines on a Deep-Teal Hero

## Overview

Clarion's UI is calm, clinical, and confidence-building. It leads with dark surfaces and spacious type, using pill CTAs for clear next steps. The audience is healthcare operators and practice managers evaluating automation; tone should be professional, empathetic, and direct. When tokens don't specify, choose legible, low-contrast treatments over decorative ones, and keep layouts spacious rather than dense.

## Colors

- **primary (#ffffff):** Primary text and button fill on dark surfaces; use for high-contrast elements and core body copy over surface colors.
- **secondary (#c7e5dd):** Soft mint accent for subtle tints, tags, or section backdrops; avoid using it for primary text.
- **tertiary (#361700):** Dark accent for text over white buttons and strong CTAs; pairs with primary as button text.
- **neutral (#072d35):** Core surface color for hero, cards, and dark sections; establishes the brand's deep-teal shell.
- **border (#374151):** Divider and outline color; use for hairline rules, card borders, and ghost buttons on dark backgrounds.
- **brand-heritage-park (#69746c):** Desaturated sage utility tone; use sparingly for charts, badges, or secondary icons.
- **surface (#072d35):** Alias of neutral; default background for components and dark sections.
- **on-surface (#ffffff):** Text and icon color over surface; ensure WCAG contrast with neutral.

## Typography

- Headline LG — Bpmf Zihi Kai Std, 64px/1.1, 500, -0.03em. Expressive display for the homepage hero and major moments. Freely available from Google per font_sources.
- Headline MD — Moderat Serif Trial, 48px/1.1, 300, -0.02em. Section headers and large stats. This face is custom/self-hosted; agents should substitute a similar, obtainable serif such as Fraunces, Lora, or Spectral to maintain warmth and contrast.
- Headline SM — Bpmf Zihi Kai Std, 24px/1.1, 300, -0.03em. Card and module titles.
- Headline XS — Geist, 18px/1.22, 300. Small section labels and UI headings.
- Body MD — Geist, 16px/1.5, 300, -0.01em. Primary body copy and navigation. Geist is Google-hosted and can be loaded directly. Keep long-form content at this size for readability.

## Layout

- Spacing scale: xs 10px, sm 20px, md 48px, lg 64px, xl 96px. Use md–xl for section padding, sm for gutters, and xs for tight element groups.
- Sections stack with generous vertical rhythm; prefer md (48px) gaps between blocks within a section and lg–xl between sections.
- Content should center within a responsive grid; align headings and CTAs to the same vertical axis for scannability.
- Logo rows and stat grids use equal-width columns with sm (20px) gutters and md (48px) outer padding.

## Elevation & Depth

No shadows are used (all levels are none). Hierarchy relies on tonal contrast between neutral (#072d35) surfaces and on-surface text (#ffffff), thin borders (#374151), and whitespace. When imagery is present, apply a dark overlay so text remains legible without drop shadows.

## Shapes

- Rounded sm: 8px for cards, inputs, and small surfaces.
- Rounded md: 40px for interactive elements like primary/secondary buttons and segmented controls. Pills signal action and should not be applied to large containers.

## Components

- Button — Primary: background #ffffff, text #361700, 42px height, 9px 16px padding, 40px radius. Use for the main CTA ("Schedule a demo").
- Button — Secondary: text #ffffff, 42px height, 9px 16px padding, 40px radius. On dark surfaces, keep the background transparent with a 1px border in #374151; reserve for "Try it out."
- Button — Link: text #ffffff, radius 0. Use for low-emphasis actions inside paragraphs or cards.
- Card: background #072d35, text #ffffff, 8px radius, 16px padding. Use for feature blurbs and metric tiles.

Distinctive page components

### Top navigation with pill CTA
- Left-aligned logo, inline links set in Geist 16px. Right-aligned primary action as a 42px-tall pill using the primary button spec.

### Photo hero with gradient overlay
- Background image under a neutral (#072d35) overlay; H1 set with Headline LG; supporting copy in Body MD. Place two buttons inline: primary then secondary, 10–20px apart.

### Client logo strip
- Single row of monochrome marks on a dark surface. Use sm (20px) vertical padding and md (48px) horizontal padding; maintain equal spacing.

### Three-step benefits row (Capture / Convert / Recover)
- Three equal columns on a light or lightly tinted background. Titles in Headline SM, copy in Body MD. Use md (48px) gaps.

### Tabbed platform explainer
- Three tabs (Inbound receptionist / Documents & referrals / Outbound engagement). Tabs style as secondary pills with borders in #374151; active tab may use secondary tint (#c7e5dd) for the chip background.

### Metrics grid
- Four statistic tiles (71%, 99%, 2x, 60%). Numerals at 48px (use Headline MD size with a serif substitute if Moderat isn't available); labels in Geist 16px. Tiles can be simple cards with sm (8px) radius.

### Implementation/value props list
- Stacked headings with short paragraphs. Use Headline SM for titles and Body MD for descriptions; keep lg (64px) section padding.

### Demo request modal
- Centered card (8px radius) using dark surface. Inputs stack with sm (20px) gaps; validation and consent copy in Body MD. Primary submit button follows the primary spec.

## Do's and Don'ts

- Do keep text over imagery only when a dark neutral (#072d35) overlay ensures clear contrast with white text.
- Do reserve the 40px pill radius for buttons and segmented controls; use 8px on cards and forms.
- Do use #374151 borders for structure instead of shadows.
- Don't swap the primary white fill for brand tints; the main CTA should remain #ffffff with #361700 text.
- Don't introduce additional accent colors; use #c7e5dd sparingly for highlights and selected states.
- Don't mix multiple serif faces; if Moderat Serif Trial isn't available, pick one of the specified substitutes and use it consistently.

## Agent Prompt Guide

Quick color reference
- Text on dark: #ffffff
- Background/surface: #072d35
- Border/dividers: #374151
- Accent/tint: #c7e5dd
- Primary CTA fill: #ffffff; CTA text: #361700

1) Build the hero
"Create a full-width hero on background #072d35 with a subtle photo overlay. H1 uses 'Bpmf Zihi Kai Std' at 64px, 1.1 line-height, -0.03em tracking. Supporting paragraph in 'Geist' 16px/1.5. Add a primary button (42px tall, 9px 16px, radius 40px) with fill #ffffff and text #361700 labelled 'Schedule a demo', followed by a secondary ghost button (same size, transparent background, 1px border #374151, text #ffffff) labelled 'Try it out'."

2) Three-column benefits row
"On a neutral container with generous spacing (md 48px padding), render three equal columns titled 'Capture', 'Convert', 'Recover'. Use 'Bpmf Zihi Kai Std' 24px for titles and 'Geist' 16px for copy. Keep 20px gutters; no shadows; dividers in #374151 if needed."

3) Metrics grid
"Create four stat tiles on dark surface #072d35 with 8px radius and 16px padding. The numeral uses 48px size (Headline MD scale) with a serif; if 'Moderat Serif Trial' isn't available, use 'Fraunces'. Labels in 'Geist' 16px. Borders #374151."

4) Tabbed platform module
"Implement a three-tab control styled as secondary pills: 42px height, 40px radius, text #ffffff, transparent background, 1px border #374151; active state may use background #c7e5dd with text #361700. Each tab reveals a card with 16px padding on background #072d35."

5) Demo request modal
"Center a 480–640px wide modal on background #072d35 with 8px radius and 16px inner padding. Headline uses 'Bpmf Zihi Kai Std' 24px. Inputs stack with 20px gaps and 1px borders #374151. Primary submit button follows the primary spec (#ffffff fill, #361700 text, 42px tall, 40px radius)."

## Similar Brands

- Notable Health — Similar operational automation story; uses calmer neutrals and more white space, while Clarion leans into a darker shell.
- Zocdoc — Healthcare scheduling with friendly yellows; more consumer tone, whereas Clarion keeps a B2B clinical voice and darker surfaces.
- Abridge — AI for clinicians with soft colors and serif headings; Clarion's serif is bolder and paired with darker backgrounds.
- Nabla — Healthcare AI assistant with minimal layouts; Clarion adds stronger pills and a more marketing-forward hero.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #c7e5dd;
  --color-tertiary: #361700;
  --color-neutral: #072d35;
  --color-border: #374151;
  --color-brand-heritage-park: #69746c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.1;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.1;
  --text-headline-md-tracking: -0.02em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.1;
  --text-headline-sm-tracking: -0.03em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.01em;
  --font-bpmf-zihi-kai-std: "Bpmf Zihi Kai Std";
  --font-moderat-serif-trial: "Moderat Serif Trial";
  --font-geist: "Geist";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 40px;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 48px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-tertiary);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 9px 16px;
  --button-primary-height: 42px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 9px 16px;
  --button-secondary-height: 42px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #ffffff;
  --color-secondary: #c7e5dd;
  --color-tertiary: #361700;
  --color-neutral: #072d35;
  --color-border: #374151;
  --color-brand-heritage-park: #69746c;
  --color-surface: #072d35;
  --color-on-surface: #ffffff;
  --font-headline-lg: "Bpmf Zihi Kai Std";
  --font-headline-md: "Moderat Serif Trial";
  --font-headline-sm: "Bpmf Zihi Kai Std";
  --font-headline-xs: "Geist";
  --font-body-md: "Geist";
  --text-headline-lg: 64px;
  --text-headline-md: 48px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.02em;
  --tracking-headline-sm: -0.03em;
  --tracking-body-md: -0.01em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 8px;
  --radius-md: 40px;
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 48px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.78,
                    0.898,
                    0.867
                ],
                "hex": "#c7e5dd"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.212,
                    0.09,
                    0
                ],
                "hex": "#361700"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.027,
                    0.176,
                    0.208
                ],
                "hex": "#072d35"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "brand-heritage-park": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.412,
                    0.455,
                    0.424
                ],
                "hex": "#69746c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.027,
                    0.176,
                    0.208
                ],
                "hex": "#072d35"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 64,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Bpmf Zihi Kai Std",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Moderat Serif Trial",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Bpmf Zihi Kai Std",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.01,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Clarion Health**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
getmaple.ca
Maple Health
Maple
clears.ai
Clears AI
Clears