August Health

Overview

August Health is an AI-enabled EHR platform purpose-built for senior living communities, designed by a senior living physician and an Apple engineering leader. The brand embodies 'Warm Precision'—a design philosophy that marries clinical rigor with human warmth, celebrating the caregivers and residents at the heart of senior care. The visual language combines bold, organic color shapes (vibrant greens, pinks, oranges, and blues) with clean typography and purposeful whitespace, creating an interface that feels both trustworthy and approachable. The aesthetic rejects sterile healthcare UI in favor of a more human, community-focused visual identity.

August Health's voice is confident yet empathetic, speaking directly to care operators with clarity and respect. The tone avoids medical jargon when possible, instead using language that acknowledges the complexity of care operations while celebrating the human connections that drive the work. Example sentence in brand voice: 'Your residents deserve better care—and you deserve the tools to deliver it without the paperwork burden.'

Colors

The August Health color system is built on a foundation of warm neutrals (cream #f8f3eb, off-white #f7f2ea) paired with a vibrant primary blue (#4865ff) that serves as the signature accent for all interactive elements, CTAs, and focus states. This primary blue is the most-clicked color on the platform—it appears on the 'Request demo' button, navigation highlights, and all primary actions. Secondary colors include a clinical green (#328a3b) for positive states and success messaging, a warm orange (#ff6d39) for alerts and important notifications, and a deep navy (#1b1463) for text hierarchy and depth. The surface stack progresses from the bright white background (#ffffff) through increasingly warm, slightly tinted containers (surface-container-low #f8f3eb, surface-container #eae4d9) to suppo

Typography

The August Health type system uses two distinct typefaces to create visual hierarchy and emotional resonance. Display and headline text uses Reckless Neue, a distinctive serif-influenced typeface that conveys confidence and authority while remaining warm and approachable—this is the voice of the brand's core messaging. Body copy and UI labels use Saans, a clean, geometric sans-serif that ensures legibility at small sizes and supports rapid scanning of clinical data. The display level (64px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines like 'The EHR platform caregivers love,' while headline-md (36px, 400 weight) is used for section titles. Body text is set at 16px with 24px line-height (1.5x), providing comfortable reading rhythm for longer-form content and clinical no

Layout

August Health uses a fluid 12-column grid system with a maximum container width of 1240px, centered on the viewport. The page rhythm is built on a generous spacing scale: the lg spacing token (40px) separates major sections (hero, features, testimonials), while md spacing (24px) is used for card padding and component margins. The gutter (24px) is applied consistently to left/right container margins, ensuring content never touches the viewport edge on desktop. Whitespace is treated as a first-class design element—the hero section uses 80px vertical padding to create breathing room around the headline, and the background is kept clean (pure white #ffffff) to let the colorful circular imagery and typography shine. On tablet and mobile, the container max-width scales down to 991px and 800px re

Elevation & Depth

Visual hierarchy in August Health is achieved through a subtle shadow and layering system that avoids harsh depth cues. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and borders, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and interactive elements, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and elevated surfaces. The header uses a semi-transparent white background (rgba(255, 255, 255, 0.7)) with an 8px blur backdrop-filter and md-level shadow to create a floating effect without visual heaviness. Cards use md shadows

Shapes

August Health's shape philosophy is 'Organic Warmth with Technical Precision'—combining soft, rounded corners for human-friendly UI elements with bold, circular shapes in the hero imagery that evoke community and connection. Buttons use the full radius token (100px, equivalent to 1600px border-radius in computed styles), creating pill-shaped buttons that feel inviting and modern. Cards and input fields use lg radius (1rem / 16px), providing enough rounding to feel contemporary without sacrificing visual clarity. Smaller UI elements like badges and secondary buttons use md radius (0.75rem / 12p

Components

Action Elements Buttons are the primary interaction mechanism and use the full radius (100px) to create a distinctive pill shape. The primary button uses the signature blue (#4865ff) background with white text, 16px padding on the x-axis and 16px on the y-axis, and a 48px height. On hover, the background darkens to #3d52d9 with a 200ms ease-out transition and no shadow change. The secondary button uses a semi-transparent blue background (rgba(238, 242, 252, 0.7)) with a 1px border at rgba(72, 101, 255, 0.2), creating a subtle contained appearance. Ghost buttons (used for tertiary actions) have a transparent background with a 1px primary blue border and inherit the primary color for text. All buttons include a focus state with a 3px outline at rgba(72, 101, 255, 0.3) and 2px outline-off

Do's and Don'ts

**Do**

• Do use the primary blue (#4865ff) exclusively for all CTAs, focus states, and primary interactive elements—it is the signature brand color and must remain consistent across all touchpoints.
• Do maintain the warm, cream-based surface colors (#f8f3eb, #f7f2ea) as the default background to create a welcoming, non-clinical aesthetic that differentiates August Health from sterile healthcare UIs.
• Do apply the full radius (100px) to all primary buttons and the header component to create the distinctive pill-shaped visual signature that users will recognize across the platform.
• Do use Reckless Neue for all display and headline text to convey confidence and authority while maintaining warmth—this typeface is the voice of the brand's core messaging.
• Do pair the vibrant circular shapes (greens, pinks, oranges) in hero imagery with clean whitespace and typography to create visual interest without overwhelming the clinical content.

**Don't**

• Don't use the secondary green (#328a3b) or orange (#ff6d39) for primary CTAs—these are reserved for status messaging (success, alerts) and would dilute the primary blue's impact.
• Don't apply harsh shadows (anything darker than rgba(0, 0, 0, 0.15)) or high blur values (>8px) to maintain the warm, approachable aesthetic and avoid the cold, clinical feel of deep shadows.
• Don't use system fonts or generic sans-serifs (Arial, Helvetica) for body copy—Saans is the required typeface for all UI text and ensures the brand's distinctive, modern appearance.
• Don't round corners below md radius (0.75rem / 12px) on cards or containers—this creates a harsh, technical appearance that conflicts with the warm, human-centered brand identity.
• Don't mix Reckless Neue and Saans in the same headline or title—use Reckless Neue exclusively for display/headline text and Saans for all body and UI labels to maintain clear visual hierarchy.