---
title: "Ease Health design system"
variant: extended
source: https://easehealth.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/easehealth-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ease Health · Design System

> Calm editorial design for more human-centered care.

**Theme:** light · **Industry:** health · **Source:** https://easehealth.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ease Health presents its behavioral healthcare platform through a calm, editorial layout anchored by forest-green type and soft green panels. Large serif headlines, rounded product cards, interface illustrations, and generous white space make a complex clinical and billing product feel approachable.

## North star

Pair editorial serif headlines and forest-green clarity with expansive white space and soft, functional color panels.

## Overview

The visual strategy balances a clinical product story with a warm, editorial tone. Gallery White (#fffefc) is the quiet canvas; Forest Ink (#0f3e17) anchors headings, body copy, links, navigation, and the dark primary CTA. Soft green panels—Keylime Wash (#e1f4df), Sage Leaf (#b1dbb8), and Pale Mint (#cfe7d3)—differentiate feature cards and content bands without heavy outlines. Mist Blue (#b6ced5) appears as a contrasting panel, most notably behind the hero product illustration. Faire Octave supplies the oversized, light-weight serif display voice, while Suisseintl keeps navigation and supporting copy clear and practical. Layouts use broad two-column splits, card groupings, and large intervals between sections. Product screens are presented as crisp interface illustrations inside rounded panels; customer and investor marks add evidence without turning the page into a dense dashboard. The overall effect is restrained, airy, and quietly confident.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Forest Ink | `#0f3e17` | `--color-forest-ink` | brand | Primary text, headings, links, navigation, card copy, and solid primary CTA. |
| Gallery White | `#fffefc` | `--color-gallery-white` | neutral | Main page canvas and the clean backing for product mockups and buttons. |
| Keylime Wash | `#e1f4df` | `--color-keylime-wash` | surface | Light green feature-card and section surface, including the hero message panel. |
| Sage Leaf | `#b1dbb8` | `--color-sage-leaf` | accent | Deeper green card and section surface; also used as a soft navigation accent. |
| Pale Mint | `#cfe7d3` | `--color-pale-mint` | surface | Secondary green surface for cards and content sections. |
| Mist Blue | `#b6ced5` | `--color-mist-blue` | surface | Cool blue contrast panel, especially behind the hero’s CRM, EHR, and RCM illustration. |
| Soft Charcoal | `#222222` | `--color-soft-charcoal` | semantic | Limited alternate navigation text; not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#fffefc` (Gallery White) · `--color-surface` → `#e1f4df` (Keylime Wash) · `--color-surface-2` → `#b1dbb8` (Sage Leaf) · `--color-surface-3` → `#cfe7d3` (Pale Mint) · `--color-surface-4` → `#b6ced5` (Mist Blue) · `--color-text` → `#0f3e17` (Forest Ink) · `--color-border` → `#0f3e17` (Forest Ink) · `--color-accent` → `#0f3e17` (Forest Ink) · `--color-accent-2` → `#b1dbb8` (Sage Leaf) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0f3e17` | `#fffefc` | 12.1:1 | AAA |
| `#0f3e17` | `#e1f4df` | 10.57:1 | AAA |
| `#0f3e17` | `#b1dbb8` | 7.95:1 | AAA |
| `#0f3e17` | `#cfe7d3` | 9.31:1 | AAA |
| `#0f3e17` | `#fffefc` | 12.1:1 | AAA |
| `#0f3e17` | `#e1f4df` | 10.57:1 | AAA |
| `#0f3e17` | `#b1dbb8` | 7.95:1 | AAA |
| `#0f3e17` | `#cfe7d3` | 9.31:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisseintl | `--font-body` | webfont | 400, 300 | Navigation, body copy, buttons, and practical interface labels. | Inter |
| Faire Octave | `--font-display` | webfont | 300 | Display and editorial headings, including the hero and section titles. | Cormorant Garamond |

- **Suisseintl:** Use regular weight for legibility; keep tracking neutral and casing natural.
- **Faire Octave:** Light weight, close tracking, sentence case; use for prominent headlines rather than dense copy.

### Type scale — Augmented Fourth (ratio ≈ 1.395, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 74px | 300 | 1.05 | -0.03em | — | Faire Octave | Oversized editorial hero or standout section headline. |
| h1 | 56.5px | 300 | 1.2 | -0.03em | — | Faire Octave | Primary page headline and high-emphasis section heading. |
| h2 | 40.5px | 300 | 1.35 | -0.01em | — | Faire Octave | Major section titles across features, testimonials, and trust content. |
| h3 | 28px | 400 | 1.3 | 0 | — | Suisseintl | Card and subsection headings in product and feature areas. |
| h4 | 24.5px | 300 | 1.35 | -0.01em | — | Faire Octave | Smaller editorial headings and supporting feature titles. |
| body | 14px | 400 | 1.5 | 0 | — | Suisseintl | Paragraphs, descriptions, proof points, and supporting copy. |
| button | 14px | 400 | 1 | 0 | — | Suisseintl | Demo, case-study, and product-action labels. |
| nav | 14px | 400 | 1.5 | 0 | — | Suisseintl | Header navigation and footer navigation links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 7, 9, 11, 14, 21, 28, 35, 42, 56, 70, 99 px.
- Section rhythm 70px · element gap 21px · card padding 42px · max content width —.

Use a broad centered content area with responsive two-column hero and feature splits; the measured page does not specify a maximum width. Align headings and copy to the start, with occasional right-aligned product-section titles. Alternate open white canvas with clustered rounded cards rather than continuous colored bands. The section rhythm is spacious, with large pauses between major stories and tighter grouping inside card grids. Keep content density comfortable: short paragraphs, distinct labels, and clear separation between proof points, product UI, and calls to action.

## Shape & elevation

- Radius: button `14px` · card `14px` · nav `14px` · xs `7px` · sm `14px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The page is predominantly flat: no measured shadows or gradients define the components. Rounded cards rely on distinct soft-green or blue fills rather than strong borders. Maintain layering through contrast between the colored panel, white interface mockup, and canvas; reserve the dark filled treatment for prominent action buttons.

## Imagery

Use product interface illustrations as the primary visual proof: crisp white CRM/EHR/RCM panels sit within softly colored fields. The hero pairs a green text card with a blue product-visual panel. Add customer and investor logos in restrained horizontal rows, and use occasional warm interior photography in testimonial content. Keep imagery clean and bright; do not let decorative assets overpower the type or call to action.

## Components

### Primary CTA

Forest Ink (#0f3e17) filled button with white text, a subtle border in the same green, and measured 14px rounding.

### Hero split

Two-column opening: a Keylime Wash (#e1f4df) headline panel and a Mist Blue (#b6ced5) CRM/EHR/RCM product illustration panel.

### Feature card

Rounded card with a solid soft-green fill, Forest Ink copy, and generous internal breathing room; cards may vary between measured green surfaces.

### Eyebrow label

Small text label on a pale blue-green chip above editorial section headings.

### Logo cloud

Compact horizontal row of customer or investor marks with a short centered caption and ample surrounding white space.

### Product showcase

Large sage-toned feature panel pairing concise copy and benefits with a white, rounded clinical interface mockup.

### Testimonial feature

Three-part composition with a green quote card, warm interior photo, and stacked proof-point cards plus a dark action card.

### Measured component styles

- **Primary button** (“Book a Demo”): background #0f3e17 · text #ffffff · border 1px solid #0f3e17 · radius 14.08px · padding 14.1px 21.1px · 400 14.08px Suisseintl
- **Link** (““Clinical documentation has always been ”): transparent background · text #0f3e17 · radius 0px · padding 0px · 400 14.08px Suisseintl
- **Card** (“See everything in one place. Consolidate”): background #e1f4df · text #0f3e17 · radius 14.08px · padding 42.2px · 400 14.08px Suisseintl
- **Navigation item** (“About Case Studies Careers Resources Wha”): transparent background · text #0f3e17 · radius 0px · padding 0px · 400 14.08px Suisseintl

## Do

- Use Forest Ink (#0f3e17) for primary text and key actions.
- Keep large headlines in a light editorial serif.
- Use soft green and blue fills to distinguish content panels.
- Give sections generous breathing room.
- Show product interfaces inside clean, rounded white frames.
- Keep body copy short and clearly grouped.

## Don't

- Do not make the page feel like a dense admin dashboard.
- Do not introduce unmeasured palette colors as brand surfaces.
- Do not rely on shadows to separate cards.
- Do not use heavy borders around every panel.
- Do not set long paragraphs in the display serif.
- Do not crowd logos, proof points, or calls to action.

## Agent prompt

Build a new Ease Health page that feels calm, editorial, and clinically credible. Use Gallery White (#fffefc) as the canvas and Forest Ink (#0f3e17) for headings, body text, links, and the primary button. Introduce Keylime Wash (#e1f4df), Sage Leaf (#b1dbb8), and Pale Mint (#cfe7d3) as rounded feature surfaces, with Mist Blue (#b6ced5) as a sparing cool contrast panel. Set prominent headings in a light Faire Octave-like serif and use Suisseintl-like sans-serif for navigation, body, and controls. Organize content into spacious splits and compact card groups, keeping hierarchy clear and paragraphs concise. Illustrate the product with bright, legible interface mockups in white frames. Keep surfaces mostly flat, use restrained borders, and let white space—not shadows—create separation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with a green message card, blue product illustration panel, and customer logos below. | Primary demo action, Customer proof | Serif headline, Soft color panels, Product interface illustration |
| 2 | feature-split | Two-column section with a green care-category panel and copy with platform statistics. | Service-category scan, Outcome proof | Pale green panel, Editorial heading, Large metrics |
| 3 | comparison | Single-column editorial content introducing problem and solution statements. | Problem-solution framing | Text-led hierarchy, Eyebrow labels |
| 4 | other | Sparse full-width transition area with minimal SVG ornament. | Visual pacing | Fine-line decoration |
| 5 | feature-grid | Section heading above three horizontally arranged benefit cards. | Benefit comparison | Three-card grid, Soft green fills, Line icons |
| 6 | product-showcase | Open section with a right-aligned editorial heading and decorative line motif. | Product-context setup | Large whitespace, Fine-line motif |
| 7 | product-showcase | Large feature panel with copy and benefits on one side, interface mockup on the other. | Feature explanation, Explore-product action | Sage panel, White interface frame, Benefit chips |
| 8 | other | Sparse title-led section with a large outlined decorative corner motif. | Visual pacing | Editorial headline, Thin-line geometry |
| 9 | testimonials | Three-column composition combining a quote, interior photograph, and stacked results with CTA. | Customer testimony, Outcome proof, Case-study action | Green quote card, Warm photography, Stacked metric cards |
| 10 | feature-grid | Heading on the left and a compact two-column list of safeguards on the right. | Trust reassurance | Check icons, Short compliance statements |
| 11 | feature-split | Single-column editorial block with a compact text and action grouping. | About-brand link | Eyebrow chip, Large serif title, Compact CTA |
| 12 | logo-cloud | Centered caption above a horizontal row of investor logos. | Credibility signal | Logo strip, Open canvas |
| 13 | cta | Multi-column closing area with a large green CTA panel, contrasting illustrated panel, and footer links. | Request-demo action, Footer navigation | Editorial CTA headline, Rounded colored panels, Link groups |

## Source CSS custom properties (selected)

```css
--color-forest: #0f3e17;
--color-white: #fffefc;
--color-sage: #8cbd94;
--color-slate: #b6ced5;
--color-mulberry: #3d0f34;
--color-mint: #c5dfca;
--color-keylime: #e1f4df;
--color-cream: #f8f6f0;
--color-mauve: #9e718e;
--color-charcoal: #161608;
--color-border: #efeeeb;
--color-button-hover: #0c2f10;
--font-display: "FAIRE Octave Trial", Georgia, serif;
--font-body: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ease-fade: cubic-bezier(.5, 0, .5, 1);
--ease-settle: cubic-bezier(0, 0, 0, 1);
--ease-light-entrance: cubic-bezier(.6, 0, .2, 1);
--ease-dark-entrance: cubic-bezier(.5, 0, .5, 1);
--ease-carousel: cubic-bezier(.5, 0, 0, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--duration-fast: .15s;
--duration-normal: .3s;
--duration-slow: .5s;
--duration-box: 1.5s;
--duration-content: 1s;
--color-scheme--background: #fffefc;
--_typography---font-styles--body: Suisseintl,Arial,sans-serif;
--color-scheme--text: #0f3e17;
--_typography---font-styles--heading: "Faire Octave",Arial,sans-serif;
--_primitives---colors--white: #fff;
--_primitives---colors--black: black;
--text-color--text-alternate<deleted|relume-variable-text-color-3>: white;
--_primitives---colors--forest: #0f3e17;
--_ui-styles---radius--medium: 1rem;
--_primitives---colors--button-hover: #0c2f10;
--_primitives---colors--neutral-lighter: #c7c7c7;
--color-scheme--border: #efeeeb;
--_ui-styles---stroke--border-width: 2px;
--_primitives---colors--mint: #cfe7d3;
--_primitives---colors--sage: #b1dbb8;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/easehealth-com