---
version: alpha
name: "Headway"
description: "Headway turns mental-health booking into a calm insurance marketplace: pale mint backgrounds, deep green CTAs, PostGrotesk interface text, Honey display moments, white search inputs, and warm therapy photography balanced with practical zip-code and insurance fields."
colors:
  bg: "#f2fdf9"
  bg-mint: "#f0f9f5"
  bg-soft: "#f8f8f8"
  surface: "#ffffff"
  surface-muted: "#f8f8f8"
  surface-card: "#ffffff"
  text: "#212326"
  text-strong: "#000000"
  text-body: "#353535"
  text-muted: "#717171"
  text-soft: "#949494"
  brand: "#0b663d"
  brand-hover: "#084f30"
  brand-bright: "#13aa65"
  brand-soft: "#e7f7f0"
  mint-deep: "#46534d"
  accent-purple: "#7d3f98"
  accent-blue: "#0067a5"
  accent-sky: "#0982c6"
  accent-cyan: "#008bcc"
  border: "#dadce0"
  border-subtle: "rgba(33, 36, 38, 0.07)"
  border-input: "#bebebe"
  focus: "#0b663d"
  success: "#13aa65"
  warning: "#d99524"
  danger: "#c94646"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "Honey Regular"
    fontSize: "44px"
    lineHeight: 1.5
    letterSpacing: "-0.015em"
  body:
    fontFamily: "PostGrotesk"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "10px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Headway feels calm without becoming decorative. The pale mint background, deep green logo/action color, and therapy-session photography create warmth, while the zip-code and insurance fields keep the page practical.

The hero is a marketplace search interface first. The brand promise is emotional, but the UI immediately asks for the information needed to find covered care.

**Key Characteristics**
- Pale mint page background.
- Deep green brand and CTA color.
- Soft black/charcoal text.
- PostGrotesk for interface and navigation.
- Honey-style display for large calm headlines.
- White inputs with restrained borders.
- Warm therapy photography in small-radius frames.
- Cost-estimate cards and insurance education blocks below the hero.

## Colors

Use `bg #f2fdf9` or `bg-mint #f0f9f5` as the main page base. Keep `surface #ffffff` for inputs and provider/cost cards.

Text is `text #212326` with `text-body #353535` for form labels and body copy. Muted copy uses `#717171` or `#949494`.

The brand green is `brand #0b663d`, observed on the key `Find care` and provider CTA language. `brand-bright #13aa65` can be used for supportive highlights.

Healthcare accents include `accent-purple #7d3f98`, `accent-blue #0067a5`, and `accent-sky #0982c6`, but these should stay secondary.

## Typography

| Role | Font | Size | Weight | Notes |
| --- | --- | ---: | ---: | --- |
| Hero | Honey Regular | 52 | 400 | Calm, large, editorial health statement |
| Display | Honey Regular | 44 | 400 | Section introductions |
| H1 | Honey Regular | 38 | 400 | Detail titles |
| H2 | Honey Regular | 30 | 400 | Support sections |
| H3 | PostGrotesk | 20 | 500 | Cards and form modules |
| Body large | PostGrotesk | 18 | 400 | Hero subcopy |
| Body | PostGrotesk | 16 | 400 | Default copy |
| Button | PostGrotesk | 16 | 500 | Search and provider actions |

The display voice should feel calm and human. Do not use a sharp enterprise grotesk for the main headline.

## Layout

Use a two-column hero: copy and search form on the left, photography on the right. Keep the top nav airy but not oversized.

The first supporting card should peek below the fold, reinforcing that Headway is about cost, insurance, and access rather than only brand emotion.

On mobile, stack the photo below the search form or hide it after the initial proof card. The search button should become full width.

Keep fields large enough for touch entry, and preserve labels above or inside each field.

## Elevation & Depth

Use flat surfaces and subtle borders. Inputs need clear outlines; cards can sit on `surface-muted` without heavy shadow.

The hero photo can rely on image contrast and whitespace rather than elevation.

## Shapes

| Tier | Value | Use |
| --- | ---: | --- |
| Micro | 4 | buttons, inputs, cards |
| Small | 8 | images and compact panels |
| Medium | 10 | larger fields |
| Large | 14 | provider cards |
| Extra large | 20 | rare soft sections |
| Pill | 9999 | avoid except tiny status tags |

Headway is softer than an insurance portal but less rounded than a meditation app. The small radius keeps the search flow credible.

## Components

Search form: zip code and insurance fields sit on white, use compact 4px radius, and align horizontally on desktop. The green Find care button is the strongest shape in the hero.

Navigation: keep links simple and low contrast. Provider and portal actions can sit on the right as compact buttons.

Cards: cost and insurance modules should be pale, flat, and practical. Use minimal shadow; trust comes from clarity.

Photography: keep image corners modest. The photo is warm and human, but it should not turn into a lifestyle hero.

Forms should respond quickly and calmly. Hover states on green buttons can darken to `brand-hover #084f30`; inputs should use a visible green focus ring.

Avoid playful bouncing motion. Healthcare booking should feel stable and predictable.

Deep green on white and white on deep green both read clearly. Muted gray labels should be checked for size and contrast, especially in forms.

Every input needs a persistent label: zip code, insurance, and provider search cannot rely on placeholder-only UI.

Headway's voice is calm, concrete, and access-oriented. It talks about covered care, therapists, psychiatrists, insurance, cost estimates, and finding the right provider.

Avoid vague wellness slogans. The best copy connects emotional support to practical access.

The audited homepage is light and mint. A dark variant should be rare, using deep green-black with white text and brand green actions.

Do not invert to a neon health-tech palette. Headway's trust comes from calm brightness.

Headway sits between a healthcare marketplace and a wellness brand. It uses the practical patterns of insurance search, but it borrows softness from mental-health consumer products.

The result is credible because the form arrives early. The design does not ask users to trust an abstract brand before showing them the path to care.

## Do's and Don'ts

Do use pale mint backgrounds. Do keep green for primary actions. Do include concrete form fields. Do use warm human photography. Do keep insurance and cost modules visible.

Do not make it look like a generic telehealth dashboard. Do not over-round every control. Do not replace provider search with vague wellness content. Do not use saturated blues as the primary action color.

When generating Headway-like UI, ask for a pale mint healthcare marketplace with deep green CTAs, calm serif-like display type, PostGrotesk form labels, white zip-code and insurance inputs, and warm therapy photography.

The screen should feel reassuring, but it must also look ready to help someone find covered care immediately.