# Hims & Hers — DESIGN.md

## Overview
Hims & Hers run a modern wellness aesthetic — soft monochrome canvas with a single gentle accent (forest sage for Hers, warm tan for Hims). The brand strips out medical-website clinical-blue tropes in favor of a magazine-like surface: serif display, considered body, real product photography on textured surfaces. The two sub-brands share architecture but flip one accent token.

## Color
- **Primary (Hers):** `#3b5b4c` — Forest Sage
- **Primary (Hims):** `#9c6f3e` — Warm Tan
- **Canvas:** `#f5f0e8` — Warm Bone
- **Surface card:** `#ffffff` — White
- **Surface alt:** `#e8e1d3` — Bone Deep
- **Ink:** `#1c1c1c` — Soft Black
- **Body:** `#404040`
- **Hairlines:** `rgba(28,28,28,0.10)`
- **Semantic success:** `#5a8b6f`
- **Semantic warning:** `#c08855`

## Typography
- **Display:** Söhne / GT Super Display, weight 400-500, tracking -0.01em, sizes 48-72px hero
- **Body:** Söhne / Inter, weight 400-500, 16-17px base, 1.6 line-height
- **Mono (Rx detail only):** IBM Plex Mono, 13px

## Spacing & rhythm
8-base (8/16/24/32/48/72/96). Section padding 72-96px. Product cards run 3-up at desktop. Quiz/intake flows use full-bleed single-column layouts with one CTA per screen.

## Motion signature
180ms ease-out on hover; signature is the soft fade-in of quiz-step content (220ms, no slide). Add-to-care-plan triggers a slide-up bottom sheet with the prescription chip preview.

## Components observed
- `product-card-considered` (single product photo, serif name, monthly price chip)
- `quiz-step-card` (full-bleed, one question, one CTA, progress dot row)
- `care-plan-summary-card` (warm-bone surface, ingredient pills, monthly cadence)
- `before-after-photo-band` (real customer photos, no airbrush, soft caption)
- `cta-button-pill-sage` or `cta-button-pill-tan` (sub-brand colored)
- `provider-bio-card` (real doctor photo, credential text, no stock imagery)

## Trademark signals
- Two sub-brand accent system — sage and tan flip on a single token, share everything else
- Quiz/intake flows treated as the marketing moment — the funnel IS the brand
- Real provider photography with credentials — refuses stock medical-website chrome
- Monthly price chip on every product — subscription cadence is foregrounded
- Pill-shape CTAs (full radius) — soft, friendly, never square

## What they DON'T do
- No clinical/medical blue palette
- No emoji in care plan copy or microcopy
- No urgency banners ("limited time", "selling fast")
- No anonymized doctor avatars — real names and faces or none at all
- No saturated rainbow gradients

## Exemplar pages
- https://www.hims.com/
- https://www.forhers.com/
- https://www.hims.com/products
- https://www.forhers.com/skin

## When to reference
Reach for Hims/Hers when the user wants a wellness or telehealth surface that intentionally rejects clinical-blue defaults. The warm-bone canvas + sage/tan accents + serif-display combination reads as considered consumer wellness rather than medical. Especially appropriate for any subscription-based wellness product (vitamins, skincare, mental health, fitness) where the quiz funnel is the conversion surface.
