Skip to content
DesignMunkDesignMunk Submit a site

Recovery

recovery.com
Find the best path to recovery with expert guidance worldwide.
Health Next.js Tailwind Homepage Figtree
Share Visit site
recovery.com DESKTOP · 1440
Recovery

AI Breakdown

Design export

---
version: alpha
name: Recovery
description: Find the best path to recovery with expert guidance worldwide.
colors:
  primary: "#162941"
  secondary: "#292958"
  tertiary: "#4d657f"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-flax-bloom: "#d6d0f7"
  brand-thirsty-thursday: "#746c9c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Figtree
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: FieldsVariable
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.19
  headline-sm:
    fontFamily: Figtree
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.04
  headline-xs:
    fontFamily: Figtree
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.26
  body-md:
    fontFamily: Figtree
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 14px
spacing:
  xs: 2px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 184px
components:
  button-primary:
    backgroundColor: "#efedff"
    textColor: "#31279b"
    rounded: "{rounded.md}"
    padding: 8px 24px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "#394e66"
    rounded: "{rounded.md}"
    padding: 8px 24px
    height: 44px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Recovery: Calm Health Directory Built Around One Search

## Overview

Recovery's interface is built for reassurance and clarity. It targets people seeking addiction and mental-health care and the clinicians who serve them. The tone is professional and calm, with spacious sections and high-contrast text on white. Emphasis comes from selective purple accents and a single, prominent search entry point.

## Colors

- **primary (#162941):** Deep navy for headlines, navigation, and key body text.
- **secondary (#292958):** Dark indigo for secondary headings, overlays, or muted emphasis.
- **tertiary (#4d657f):** Slate blue for meta text and subdued UI states.
- **neutral (#ffffff):** Base surface for pages, cards, and inputs.
- **border (#e5e7eb):** Light gray dividers, card borders, and input outlines.
- **brand-flax-bloom (#d6d0f7):** Pale lavender wash for highlights, banners, and gentle emphasis.
- **brand-thirsty-thursday (#746c9c):** Muted purple accent for tags, icons, and subtle CTAs.
- **surface ({colors.neutral} → #ffffff):** Default background for content areas.
- **on-surface ({colors.primary} → #162941):** Standard text color on white surfaces.

## Typography

- Figtree (Google): the core sans for headings and body. Headline-lg at 32px/700 establishes section titles; headline-sm/xs (23px/19px) handle subheads; body-md (16px/1.5) is the reading size. Load directly from Google Fonts.
- FieldsVariable: used for headline-md (27px/500) as an accent headline. This family is not provided for agents to load and should be treated as proprietary/self-hosted.
- Substitutes for FieldsVariable: use obtainable serif display faces with a modern tone—try Source Serif 4, Merriweather, or DM Serif Text. Pair with Figtree for body to maintain contrast and legibility.

## Layout

Spacing is simple and readable: 10px for tight control gaps, 20px for card padding and small gutters, 30px for section rhythm, and a generous 184px reserved for hero vertical breathing room. Build pages on a responsive 12-column grid with 20–30px gutters. Keep card grids to 3–4 columns on desktop and collapse to 1–2 on mobile. Use whitespace and clear subheads to separate dense link lists.

## Elevation & Depth

Depth is subtle. Cards and floating UI (search, tooltips) use the small shadow (rgba(0,0,0,0.1) with two soft layers). Larger shadow tiers are intentionally unused; hierarchy relies on whitespace, the light border (#e5e7eb), and tonal accents (#d6d0f7, #746c9c). Avoid heavy drop shadows or dark overlays.

## Shapes

Two radii create the language: 8px for containers and cards, 14px for interactive controls (buttons, search/input fields). Use 14px where a component is meant to be tapped or clicked; 8px signals content blocks and media. Keep corners consistent within a component group.

## Components

- Buttons
  - Primary: background #efedff with text #31279b, 44px height, 8px x 24px padding, 14px radius. Use for main actions like Start Your Journey.
  - Secondary: white background, text #394e66, same sizing and radius; add a light #e5e7eb border on hover/focus.
  - Link: text-only action in #162941 with no radius; reserve for inline and tertiary actions.
- Card
  - White background with #162941 text, 16px padding, 8px radius, light #e5e7eb border or sm shadow for lift.

### Hero Search
- Two-line promise (32px/700 + 23px/400 Figtree) centered over an image overlay. Search field is a full-width input at 44px height with 14px radius and a leading icon. Use #ffffff field, #e5e7eb outline, and #162941 text.

### Center Listing Card
- 8px-radius image over a white card. Title in 19–23px Figtree, location/meta in #4d657f, rating stars and count on one line. A status chip (e.g., "Insurance Accepted") sits in the footer; outline with #e5e7eb and fill with #d6d0f7 when emphasized.

### Label Chips
- Small, left-aligned chips such as "Outpatient" or "Residential." Use #d6d0f7 background, #162941 text, 8px radius, and 10px horizontal padding. Place at the top-left of images or cards.

### Guided Match Panel
- Three-step explainer with 23px subhead, 16px body, and a primary button. Use a pale #d6d0f7 background panel with 20px padding and 8px radius to distinguish it from surrounding content.

### Insurance Strip
- Section head plus a row of insurer links. Use 30px vertical spacing, tertiary text (#4d657f) for descriptions, and secondary buttons for provider CTAs.

### Resource Tiles
- Six-link grid highlighting beginner resources. Each tile is a card: 16px padding, 8px radius, sm shadow on hover, headline-xs title and short body text.

### Directory Footer Grid
- "Browse by" mega-grid. Use 23px subheads, 16px links, 20px column gutters, and #e5e7eb dividers between groups to maintain scanability.

### Ads Label and Tooltip
- A compact "Ads" label with an info icon. Use #746c9c for the icon, #4d657f for label text, and ensure AA contrast against white.

## Do's and Don'ts

- Do keep primary text #162941 on #ffffff for all long-form copy; avoid tinted backgrounds for paragraphs.
- Do reserve #d6d0f7 and #746c9c for highlights, chips, and subtle CTAs so accents stay meaningful.
- Do use the sm shadow only on interactive or hover-elevated elements; cards at rest can rely on a light border.
- Don't mix corner radii inside a component; use 14px for controls and 8px for containers.
- Don't set FieldsVariable (or its substitutes) at body sizes; keep it to medium headlines at 27px.
- Don't crowd card metadata—cap badges to two lines and prefer tertiary text for long locations.

## Agent Prompt Guide

Quick color reference
- Text: #162941
- Background: #ffffff
- Border: #e5e7eb
- Accent: #746c9c (muted purple) or CTA text #31279b on #efedff

1) Build the hero search
- Container: full-width, background image with dark overlay; vertical padding 184px.
- Heading: Figtree 700 at 32px, color #ffffff; subhead Figtree 400 at 23px, color #ffffff.
- Search: 44px-high input, 14px radius, background #ffffff, text #162941, placeholder #4d657f, 20px horizontal padding, 1px border #e5e7eb. Primary button style next to it: background #efedff, text #31279b, 14px radius.

2) "Centers Near You" grid
- Grid: 4 columns, 20–30px gutters, section padding 30px.
- Card: background #ffffff, text #162941, padding 16px, radius 8px, border 1px #e5e7eb and sm shadow on hover.
- Image: 8px radius. Title Figtree 600 at 19–23px; meta text #4d657f at 16px. Chip: background #d6d0f7, text #162941, radius 8px, 10px x 8px padding.

3) Insurance section strip
- Section title: Figtree 700 at 23px, color #162941; description body-md 16px.
- Use secondary buttons (background #ffffff, text #394e66, 14px radius, 44px height) for provider CTAs; space elements with 20–30px.

4) Resource tiles grid
- 3 across on desktop, 1–2 on mobile. Each tile uses the card recipe (16px padding, 8px radius, border #e5e7eb; add sm shadow on hover).
- Title: headline-xs 19px; body: 16px. Use #746c9c for small icons or accents only.

## Similar Brands

- Zocdoc: Directory-first healthcare UI with clear search and soft cards; Zocdoc uses brighter blues and more pronounced iconography than Recovery's muted purples.
- Healthgrades: Dense provider lists with rating signals; Healthgrades is more data-heavy and uses stronger dividers and tighter spacing.
- Psychology Today: Nationwide therapist directory; similar card grids but with a warmer palette and serif headlines used more prominently.
- Alma: Modern mental-health marketplace; shares calm whitespace and rounded controls, but deploys bolder brand color blocks and illustrations.

More like this

Browse Health →
clarionhealth.com
Clarion Health About AI
Clarion Health About
A warm, full-bleed team photo anchors the hero, with a dark gradient that makes the large serif headline pop and a single…
About · 19 hours ago
clarionhealth.com
Clarion Health AI
Clarion Health
Cut phone time. Boost care time.
Homepage · 21 hours ago
getnudge.info
Nudge AI
Nudge
Change begins with Nudge.
Homepage · 1 week ago
hubble.ai
Hubble AI Features AI
Hubble AI Features
An editorial hero dominates with a large serif headline, restrained eyebrow labels, and two clear CTAs, set against subtle orbital gradients that…
Features · 3 weeks ago