Ease Health

Overview

Ease Health is a purpose-built AI-native EHR, CRM, and RCM platform designed exclusively for behavioral health practices. The design system embodies "Warm Minimalism"—a philosophy that pairs clinical precision with human-centered warmth. The brand serves clinicians and administrators who need to move fast without sacrificing care quality; the UI evokes trust through clarity, efficiency, and a carefully curated color palette that feels both professional and approachable. The aesthetic rejects cold, corporate sterility in favor of a living, breathing interface that acknowledges the emotional labor of mental health work.

The voice is direct, empowering, and never patronizing. Ease Health speaks to practitioners as peers: "Admit more patients, reduce staff burden, and get paid faster." The vocabulary favors action verbs ("request," "book," "process") and concrete outcomes over abstract features. The brand personality is confident but humble—it knows behavioral health is hard, and the product exists to remove friction, not to oversell. Example sentence in brand voice: "Your documentation is done before the session ends. Your claims process in 48 hours."

Colors

The color system centers on a deep forest green (#0f3e17) as the primary accent—the signature brand color used on all CTAs, active states, and key interactive elements. This green is not arbitrary; it evokes growth, healing, and stability, qualities essential to behavioral health. The primary is paired with a warm cream background (#fffefc) that reduces eye strain during long clinical documentation sessions and conveys approachability. Secondary and tertiary colors—sage (#8cbd94) and slate (#b6ced5)—provide supporting accents for status indicators, secondary actions, and data visualization without competing for attention.

Color usage rules: Primary (#0f3e17) appears on "Book a Demo" buttons, active navigation states, and form focus rings (box-shadow: 0 0 0 3px rgba(15, 62, 23, 0.1)). Prim

Typography

The type system pairs Faire Octave (serif, 300 weight) for headlines with Suisseintl (sans-serif, 400–600 weight) for body and UI text. This pairing communicates both authority and accessibility: the serif headlines feel editorial and trustworthy (appropriate for clinical data), while the sans-serif body text ensures rapid scanning during high-stress workflows. Display (66px, 300 weight, -0.02em letter-spacing) is reserved for hero statements like "Fewer clicks. More care."—large, elegant, and unhurried. Headline-lg (48px) and headline-md (36px) use the same serif family at lighter weights to maintain visual continuity. Body-lg (18px) and body-md (16px) are set in Suisseintl at 400 weight with 28px and 24px line-heights respectively, providing generous leading for readability in dense clin

Layout

The layout system uses a 12-column grid with a max-width of 1280px, enabling flexible content arrangement across desktop, tablet, and mobile viewports. The gutter is 24px (md spacing), creating breathing room between sections without excessive whitespace that would disrupt the sense of cohesion. Container max-widths are set to 1280px for full-width sections and 1024px for content-heavy pages (e.g., case studies, documentation guides), ensuring text remains scannable. Spacing follows a semantic scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero spacing. The rhythm is 8px-based, allowing precise alignment and predictable scaling. White-space is

Elevation & Depth

Depth is conveyed through subtle shadows and background color shifts rather than dramatic layering. The elevation system defines three levels: Level 1 (Base) uses no shadow and surface color (#fffefc); Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(15, 62, 23, 0.15) and background-color: {colors.surface-container-lowest} (#fffdfb); Level 3 (Modals/Elevated Surfaces) uses box-shadow: 0 16px 40px rgba(15, 62, 23, 0.12) and background-color: {colors.surface-container-high} (#e8e6df). Shadows use the primary color (rgba(15, 62, 23, ...)) rather than black, reinforcing brand cohesion a

Shapes

The shape philosophy is "Soft-Clinical Precision"—rounded corners that feel human and approachable while maintaining the structured, organized appearance required in healthcare software. Buttons use lg radius (1rem / 16px), creating a friendly, inviting appearance that encourages interaction. Cards and containers use xl radius (1.5rem / 24px) for hero sections and standard cards, establishing a cohesive, modern aesthetic. Input fields use DEFAULT radius (0.5rem / 8px) for a more compact, utilitarian feel that signals functional form elements. Badges and pills use full radius (9999px) for a dis

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background-color: {colors.primary} (#0f3e17), text-color: {colors.on-primary} (#fffefc), rounded: {rounded.lg} (16px), padding: 14px 21px, and height: 48px for touch-friendly targets. On hover, background-color transitions to #0d3412 over 200ms (cubic-bezier(0, 0, 0, 1)) with box-shadow: 0 3px 8px rgba(15, 62, 23, 0.15). Active state uses #0a2810. Button-secondary uses transparent background with a 2px solid border in primary color, allowing secondary actions to coexist without visual dominance. Buttons must never use opacity for disabled states; instead, use background-color: {colors.surface-container-high} (#e8e6df) and text-color: {colors.on-surface-variant} (#5a6b5f) with pointer-events

Do's and Don'ts

**Do**

• Do use primary (#0f3e17) exclusively for CTAs and active states—never dilute brand recognition by applying it to secondary elements.
• Do maintain 48px minimum height for all interactive targets (buttons, list items) to ensure touch accessibility on mobile devices.
• Do apply generous line-height (28px for body-lg, 24px for body-md) in dense clinical interfaces to reduce cognitive load during rapid data entry.
• Do use the serif headline font (Faire Octave, 300 weight) only for display and headline levels; never use it for body text or labels.
• Do transition all color and shadow changes over 200–300ms using cubic-bezier(0, 0, 0, 1) to create responsive, snappy interactions.
• Do pair primary-container (#c5dfca) backgrounds with on-primary-container (#0f3e17) text for maximum contrast and accessibility (WCAG AA+).

**Don't**

• Don't use opacity to indicate disabled states—instead, shift to surface-container-high (#e8e6df) background with on-surface-variant (#5a6b5f) text.
• Don't apply shadows to hero cards; rely on color contrast and border-radius to establish visual separation.
• Don't use the sans-serif font (Suisseintl) for headlines; the serif (Faire Octave) is the brand's signature headline voice.
• Don't exceed 1280px container max-width; wider layouts dilute the sense of focused, organized clinical space.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; always use on-surface (#0f3e17) and surface (#fffefc) to maintain brand warmth.
• Don't apply multiple shadows to a single element; use the elevation system (sm, md, lg) to maintain visual consistency and prevent visual clutter.