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

# August Health · Design System

> Warm editorial design for better senior care

**Theme:** light · **Industry:** health · **Source:** https://www.augusthealth.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._

August Health pairs refined editorial typography with warm, open layouts to present software for senior living care. Bright blue calls to action and vivid product cards punctuate a mostly white and cream page, while caregiver photography makes the technology feel personal.

## North star

Let editorial serif headlines and generous white space humanize the healthcare software, with saturated accents reserved for focused actions and feature storytelling.

## Overview

The page balances a white canvas with warm cream section bands and deep indigo panels. Black and near-black text keeps the presentation clear, while vivid blue is reserved for key demo actions and link accents. Green, orange, pink, and pale blue appear in feature cards and decorative product imagery rather than as a uniform interface palette. Reckless Neue gives large headlines an editorial, care-oriented character; Saans handles navigation, body copy, and controls with a clean, practical voice. The centered hero leaves generous breathing room around its message and CTA, framed by circular photos and cropped interface imagery at the edges. Later sections alternate spacious white content, a dark values panel, and a soft cream case-study area. Rounded pills, cards, and media frames soften the software presentation. Keep the measured spacing and generous section rhythm; avoid compressing the content into a dense dashboard-like layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, header and open content areas; provides the dominant clean background. |
| Oat Cream | `#f8f3eb` | `--color-oat-cream` | surface | Warm section band and case-study backdrop, contrasting gently with white. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Measured text color; used for dark copy and selected card text. |
| Muted Iris | `#3d377a` | `--color-muted-iris` | semantic | Measured badge and card border tone; use as a restrained outline, not a dominant section fill. |
| Midnight Indigo | `#1b1463` | `--color-midnight-indigo` | brand | Deep full-width values and closing CTA panels, creating strong section transitions. |
| Signal Blue | `#4865ff` | `--color-signal-blue` | accent | Primary Request demo buttons and selected navigation or link accents. |
| Forest Green | `#0d5238` | `--color-forest-green` | brand | Inverse footer surface and dark green feature or testimonial card treatment. |
| Ink Indigo | `#080331` | `--color-ink-indigo` | neutral | Primary text and navigation ink with a subtly blue-black cast. |
| Leaf Green | `#328a3b` | `--color-leaf-green` | accent | Bright green feature card and selected footer or link accents. |
| Lavender Mist | `#f5f2fa` | `--color-lavender-mist` | surface | Pale gradient or link tint; a quiet supporting color rather than a main canvas. |
| Care Coral | `#ff6d39` | `--color-care-coral` | accent | Orange caregiver-friendly feature card and occasional illustration accent. |
| Periwinkle Haze | `#a2baff` | `--color-periwinkle-haze` | accent | Light blue link or border accent; use sparingly beside Signal Blue. |
| Deep Moss | `#114e0b` | `--color-deep-moss` | semantic | Dark green inverse link and statistic-card surface with white text. |
| Orchid Pop | `#ffaefe` | `--color-orchid-pop` | accent | Pink feature card and decorative card imagery; not a general-purpose interface surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f3eb` (Oat Cream) · `--color-surface-2` → `#0d5238` (Forest Green) · `--color-surface-3` → `#114e0b` (Deep Moss) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#3d377a` (Muted Iris) · `--color-accent` → `#4865ff` (Signal Blue) · `--color-accent-2` → `#0d5238` (Forest Green) · `--color-accent-3` → `#328a3b` (Leaf Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f3eb` | 19.01:1 | AAA |
| `#000000` | `#0d5238` | 2.28:1 | fail |
| `#000000` | `#114e0b` | 2.12:1 | fail |
| `#ffffff` | `#f8f3eb` | 1.1:1 | fail |
| `#ffffff` | `#0d5238` | 9.21:1 | AAA |
| `#ffffff` | `#114e0b` | 9.91:1 | AAA |
| `#4865ff` | `#ffffff` | 4.58:1 | AA |
| `#4865ff` | `#f8f3eb` | 4.15:1 | AA-large |
| `#4865ff` | `#0d5238` | 2.01:1 | fail |

### Gradients

- `linear-gradient(rgb(242, 246, 236), rgb(251, 248, 243) 50%)`
- `linear-gradient(rgb(245, 242, 250), rgb(251, 248, 243) 50%)`
- `linear-gradient(rgb(248, 243, 235), rgb(255, 255, 255))`
- `linear-gradient(rgb(253, 242, 239), rgb(251, 248, 243) 50%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Saans | `--font-body` | webfont | 400, 500 | Navigation, body copy, buttons, captions, and smaller headings. | Inter |
| Reckless Neue | `--font-display` | webfont | 400 | Display headlines and primary section headings. | Cormorant Garamond |

- **Saans:** Use a clean sans-serif voice at measured regular and medium weights; captions are uppercase.
- **Reckless Neue:** Regular-weight editorial serif; preserve natural casing and avoid heavy bold styling.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1 | 0 | — | Reckless Neue | Large editorial display headlines, especially prominent hero messaging. |
| h1 | 48px | 400 | 1.1 | 0 | — | Reckless Neue | Primary hero headline and major page-level statement. |
| h2 | 32px | 400 | 1.1 | 0 | — | Reckless Neue | Section titles such as platform and values introductions. |
| h3 | 24px | 400 | 1.6 | 0 | — | Saans | Feature titles and prominent supporting headings. |
| h4 | 20px | 400 | 1.6 | 0 | — | Saans | Smaller content headings within cards or supporting sections. |
| body | 16px | 400 | 1.6 | 0 | — | Saans | Explanatory copy, descriptions, and general paragraph text. |
| caption | 12px | 500 | 1 | 0 | uppercase | Saans | Compact uppercase section labels and badges. |
| button | 16px | 400 | 1.1 | 0 | — | Saans | Request demo and other action labels. |
| nav | 16px | 400 | 1.6 | 0 | — | Saans | Header navigation links and menu labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 10, 12, 16, 24, 26, 32, 40, 64, 128 px.
- Section rhythm 80px · element gap 16px · card padding 24px · max content width 1160px.

Use a centered content frame with a measured maximum width of 1160px, but let hero artwork and selected media extend toward the edges. The hero is centrally aligned, with its headline, short supporting copy, and CTA surrounded by cropped imagery. Alternate broad, airy sections rather than maintaining a rigid repeated grid: the platform area uses two columns, the values area pairs copy with a card presentation, and the case-study content centers media. The 8px-based spacing scale and 80px section gap support a comfortable, unhurried rhythm.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · badge `9999px` · nav `9999px` · link `16px` · xs `16px` · sm `24px` · pill `9999px`
- Shadow `xl` (link): `rgba(75, 68, 57, 0.1) 0px 12px 24px 0px, rgba(75, 68, 57, 0.1) 0px 48px 48px 0px`
- Shadow `md` (other): `rgba(75, 68, 57, 0.05) 0px 4px 4px 0px, rgba(75, 68, 57, 0.08) 0px 32px 16px 0px`
- Shadow `xl-2` (nav): `rgba(99, 91, 79, 0.01) 0px 96px 48px 0px, rgba(99, 91, 79, 0.02) 0px 60px 40px 0px, rgba(99, 91, 79, 0.04) 0px 32px 32px 0px, rgba(99, 91, 79, 0.08) 0px 8px 16px 0px`
- Shadow `lg` (link): `rgba(99, 91, 79, 0.08) 0px 8px 16px 0px, rgba(99, 91, 79, 0.04) 0px 32px 32px 0px`
- Shadow `xl-3` (section): `rgba(0, 0, 0, 0.2) 0px 30px 66px 0px`
- Shadow `lg-2` (card): `rgba(75, 68, 57, 0.1) 0px 48px 48px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The visual system is mostly flat, relying on large color fields and whitespace instead of outlines. Use subtle, soft shadows to lift selected links, media, and cards. Cards have measured 16px radii, while pill controls use fully rounded ends; avoid adding heavy borders or strong elevation throughout.

## Imagery

Use warm, authentic caregiver and senior-living photography, with portraits cropped into circular or rounded media compositions. Product-interface snippets can sit in colorful, oversized shapes around the hero, but should read as supporting imagery rather than a dense software dashboard. The case-study section uses a large video still with a centered play control; feature cards carry concise product or outcome content.

## Components

### Primary CTA

Signal Blue (#4865ff) pill with white Saans text; measured Request demo control uses 14px vertical and 24px horizontal padding in the common variant.

### Navigation

Light header with Saans links in dark ink; menu items are compact and supported by a rounded Request demo action.

### Section badge

Small uppercase Saans label inside a pill, used to introduce areas such as THE PLATFORM and OUR VALUES.

### Feature card

Rounded 16px feature cards use distinct green (#328a3b) and coral (#ff6d39) fills, white or black text, and comfortable internal padding.

### Outcome card

Rounded link or metric card can use Deep Moss (#114e0b) with white copy and a soft, broad shadow.

### Case-study media

Large rounded video image with centered play affordance, testimonial quotation, and compact attribution beneath.

### Logo cloud

Centered customer heading followed by a horizontal row of partner marks on a light background.

### Measured component styles

- **Primary button** (“Request demo”): background #4865ff · text #ffffff · radius 1600px · padding 14px 24px · 400 16px Saans
- **Link** (“Move-Ins Fully-digital move-in experienc”): background #f8f3eb · text #000000 · radius 24px · padding 0px · 400 16px Saans
- **Card** (“Accessible data, actionable insights An ”): background #328a3b · text #ffffff · radius 16px · padding 24px · 400 16px Saans
- **Badge** (“THE PLATFORM”): transparent background · text #000000 · border 1px solid #cccccc · radius 1600px · padding 10px 16px · 500 12px Saans · uppercase
- **Navigation item** (“Platform About Us Customers Resources Au”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Saans

## Do

- Keep primary headlines centered and editorial.
- Use cream bands to warm transitions between white sections.
- Reserve Signal Blue for prominent actions and selected accents.
- Use deep indigo as a deliberate full-width section surface.
- Frame software with authentic caregiver and community imagery.
- Preserve generous whitespace and comfortable section rhythm.

## Don't

- Do not turn the page into a dense dashboard layout.
- Do not use bright card colors as the default page background.
- Do not substitute a heavy geometric sans for the editorial serif headlines.
- Do not add unmeasured spacing, type sizes, or corner radii.
- Do not overuse shadows or decorative borders.
- Do not treat illustration-only colors as the core brand palette.

## Agent prompt

Build a new August Health page as a calm, editorial healthcare SaaS experience. Use Gallery White (#ffffff) for the main canvas and Oat Cream (#f8f3eb) for warm section transitions. Set prominent headlines in Reckless Neue or a close free serif, and use Saans or Inter for navigation, body, and controls. Keep content centered within the measured 1160px maximum frame, with generous whitespace and a measured 80px section rhythm. Use Midnight Indigo (#1b1463) for occasional full-width emphasis, Signal Blue (#4865ff) for primary pill CTAs, and dark Ink Indigo (#080331) for text. Introduce authentic senior-living photography and restrained product imagery; use Leaf Green (#328a3b), Care Coral (#ff6d39), and Orchid Pop (#ffaefe) only as feature-card or artwork accents. Favor soft elevation, rounded cards, and a human, uncluttered presentation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, and CTA within a white canvas; cropped imagery frames the outer edges. | primary demo CTA, announcement link | editorial serif headline, pill CTA, circular photo crops, product-image accents |
| 2 | logo-cloud | Centered trust heading above a horizontal row of customer logos. | social proof | light background, monochrome partner marks, centered heading |
| 3 | feature-grid | Airy two-column feature area with centered introduction and product stories. | feature discovery, linked feature cards | uppercase pill label, serif section title, rounded media and cards |
| 4 | feature-grid | Full-width deep indigo section with centered introduction and colored feature-card presentation. | value proposition, feature scan | indigo section band, green and coral cards, rounded card edges |
| 5 | other | A narrow warm cream band separates the indigo values panel from the case-study area. | visual transition | warm cream surface, quiet spacing |
| 6 | testimonials | Cream section centers a case-study video and testimonial, with outcome cards arranged horizontally below. | play video, customer quote, outcome browsing | rounded video frame, attribution block, colorful metric cards, carousel controls |
| 7 | cta | Centered statement and CTA on a full-width indigo panel with subtle circular line decoration. | learn-more CTA | dark section surface, serif statement, blue pill button, outline-circle decoration |

## Source CSS custom properties (selected)

```css
--link-color--link-primary: white;
--background-color--background-primary: #f8f3eb;
--text-color--text-alternate: #fff;
--text-color--text-primary: #080331;
--text-color--text-secondary: #000;
--background-color--background-success: #cef5ca;
--text-color--text-success: #114e0b;
--border-color--border-primary: #eee;
--background-color--background-alternate: #fff;
--background-color--background-secondary: white;
--base-color-neutral--neutral-light: #aaa;
--background-color--background-tertiary: #1b1463;
--background-color--background-error: #f8e4e4;
--text-color--text-error: #3b0b0b;
--base-color-brand--white: white;
--base-color-brand--light-brown: #f8f3eb;
--color: white;
--background-color--background-warning: #fcf8d8;
--text-color--text-warning: #5e5515;
--base-color-neutral--black: #000;
--base-color-neutral--white: #fff;
--base-color-brand--pink-light: #ffaefe;
--text-color--super-muted: #857965;
--link-color--link-secondary: #000;
--border-color--border-secondary: white;
--base-color-neutral--neutral-lighter: #ccc;
--base-color-neutral--neutral-lightest: #eee;
--base-color-system--focus-state: #2d62ff;
--base-color-neutral--neutral: #666;
--base-color-brand--blue-dark: #080331;
--base-color-brand--pink: #dd23bb;
--base-color-brand--pink-dark: #3c043b;
--base-color-neutral--neutral-dark: #444;
--base-color-neutral--neutral-darker: #222;
--base-color-neutral--neutral-darkest: #111;
--base-color-system--success-green: #cef5ca;
--base-color-system--success-green-dark: #114e0b;
--base-color-system--warning-yellow: #fcf8d8;
--base-color-system--warning-yellow-dark: #5e5515;
--base-color-system--error-red: #f8e4e4;
```

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