Clarion Health

Overview

Clarion Health is a conversational AI platform designed for modern healthcare practices, automating phone-based workflows with human-like intelligence. The brand embodies **Warm Minimalism**—a design philosophy that combines the clarity and restraint of minimalism with the approachability and humanity of warm, natural materials. The aesthetic centers on a refined, earthy palette (deep browns #3c210c, soft creams #fdfcfb, and muted greens #7dc7a5) that evokes trust, professionalism, and care. The UI prioritizes legibility and calm, using generous whitespace (40px–64px section separation), serif headlines (Moderat Serif Trial at 300 weight for elegance), and sans-serif body copy (Geistvf at 400–500 weight for clarity). The emotional response is one of competence and reassurance: users feel they're interacting with a sophisticated, human-centered system, not a cold automation tool.

The brand voice is direct, empowering, and grounded in healthcare reality. Tone vocabulary includes phrases like "Reimagine care delivery," "Scale your practice," and "Empower providers"—language that respects the intelligence and autonomy of medical professionals. Sentences are declarative and benefit-focused, avoiding jargon while maintaining precision. Example: "Our AI agents handle every call, answer each text, and manage workflows from end-to-end." The voice never apologizes for automation; instead, it frames AI as a partner that frees clinicians to focus on what matters most: patient care.

Colors

Clarion's color system is rooted in **Natural Hierarchy**—a palette inspired by healthcare environments, natural materials, and the trust required in medical settings. The primary color is Deep Brown (#3c210c), used for all interactive elements, text, and brand emphasis. This warm, grounded tone appears on CTAs (buttons, links, focus states) and conveys authority without coldness. Secondary colors—Teal (#257787) and Sage Green (#7dc7a5)—are used sparingly for status indicators, accents, and supporting UI elements, creating visual rhythm without overwhelming the interface. The surface stack is built on warm neutrals: the brightest surface is Off-White (#fdfcfb), with progressive darkening through Cream (#f9f9f4), Light Beige (#eeece3), and Taupe (#dedace) for container hierarchy. This creat

Typography

Clarion's type system balances **Serif Authority with Sans-Serif Clarity**. Headlines use Moderat Serif Trial at 300 weight (light, elegant, professional), creating visual distinction and drawing the eye to key information. The display size (61.5px) is reserved for hero statements like "Cut phone time. Boost care time."—large enough to command attention but light enough to feel approachable. Body copy uses Geistvf (a geometric sans-serif) at 400 weight for standard text and 500 weight for emphasis, ensuring legibility at 16px on screens and in print. Line heights are generous: 28px for body-lg (18px font), 24px for body-md (16px font), creating breathing room that reduces cognitive load. Letter-spacing is minimal (-0.02em on display, 0em on body) to maintain the refined, natural feel. On s

Layout

Clarion uses a **Fluid 12-Column Grid** with a maximum container width of 1440px, allowing content to scale gracefully from mobile (320px) to desktop and beyond. The spacing scale is semantic and hierarchical: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for standard gutter and card padding, lg (40px) for section separation, and xl (64px) for major layout breaks. Section separation follows the lg spacing rule (40px minimum, scaling to 64px on larger screens via clamp functions), creating a rhythm that guides the eye through the page without feeling cramped or excessive. Container max-width is 1440px, with 24px gutters on each side, leaving 1392px for content. Whitespace is treated as a design element: generous margins around hero copy, breathing room between

Elevation & Depth

Depth in Clarion is achieved through **Soft Layering and Warm Shadows**, not harsh contrast. The elevation system uses three levels: Level 1 (Base, no shadow) for the page background and flat surfaces; Level 2 (Standard Cards, md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for cards, inputs, and secondary containers; Level 3 (Elevated/Modals, lg shadow: 16px 0 72px 0 rgba(174, 225, 235, 0.4), -16px 0 72px 0 rgba(125, 199, 165, 0.4)) for hero sections, modals, and featured content. The lg shadow is distinctive—a dual-color glow using the secondary and tertiary colors (teal and sage), creating a subt

Shapes

Clarion's shape language is **Soft-Technical Modernism**—rounded corners that feel contemporary and approachable without being overly playful. Border-radius follows a clear hierarchy: sm (0.125rem / 2px) for subtle refinement on small elements like pagination dots; DEFAULT (0.5rem / 8px) for inputs and inline components; md (0.75rem / 12px) for secondary buttons and list items; lg (1rem / 16px) for primary buttons and standard cards; xl (1.5rem / 24px) for hero CTAs and featured containers; full (9999px) for badges and pill-shaped elements. The reasoning is functional: smaller radius on inputs

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses Deep Brown (#3c210c) background with Off-White (#fdfcfb) text, 12px vertical / 20px horizontal padding, 44px height, lg radius (16px), and label-md typography (14px, 500 weight). On hover, the background shifts to Taupe (#dedace) with text remaining Deep Brown, creating a subtle, reversible state (transition: 200ms ease). **button-cta** is a larger variant (56px height, 20px vertical / 24px horizontal padding, title-lg typography at 24px) with a light background and md shadow, designed for hero sections and primary calls-to-action. It includes a hover transform (translateY(-2px)) to signal elevation and interactivity. **button-secondary** uses a transparent or light container background with Deep Brown

Do's and Don'ts

**Do**

• Do use Deep Brown (#3c210c) for all primary CTAs, focus states, and brand-critical interactive elements—it's the signature color that builds recognition.
• Do maintain 40px–64px spacing between major sections to create visual rhythm and reduce cognitive load; whitespace is a design tool, not wasted space.
• Do pair Moderat Serif Trial (300 weight) headlines with Geistvf body copy to create a clear hierarchy: serif for authority, sans-serif for clarity.
• Do use soft shadows (rgba(0, 0, 0, 0.15) max) and warm color accents (teal #257787, sage #7dc7a5) to maintain the approachable, healthcare-focused aesthetic.
• Do apply 200ms ease transitions on all interactive states (hover, focus, active) to signal responsiveness without feeling sluggish or jarring.
• Do use the full rounded scale (2px to 24px) to differentiate component types: smaller radius for inputs (professional), larger for CTAs (inviting).

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—stick to the warm neutral palette (#3c210c on #fdfcfb) to maintain the refined, natural feel.
• Don't exceed 500 font-weight on body copy or 600 on any element; the light, elegant aesthetic depends on restraint.
• Don't apply harsh shadows (opacity > 0.15) or use pure black in shadows; all shadows should use rgba(0, 0, 0, 0.06–0.15) to maintain the soft, warm depth.
• Don't use secondary colors (teal, sage) as primary CTAs or dominant UI elements; they're supporting accents only. Primary always leads.
• Don't reduce spacing below 12px (sm) for component padding or 40px (lg) for section separation; the generous whitespace is core to the brand identity.
• Don't mix serif and sans-serif within the same line or component; use serif for headlines only, sans-serif for all body and UI text to maintain clarity.