---
version: alpha
name: Hims
description: Men's telehealth brand built on a warm dark-chocolate canvas, golden-amber CTAs, and Sofia Pro's generous curves — clinical confidence dressed in editorial warmth, pill-shaped everything, and parchment gradients that feel more apothecary than pharmacy.

colors:
  # Surface / canvas
  background: "#faf8f2"           # soft parchment — page base where ink (#392e25) body text reads; dark canvas is surface-canvas
  surface-canvas: "#392e25"       # deep warm brown — the dark hero canvas; referenced by nav-dark and dark sections
  surface: "#f2ede5"              # warm parchment — light section fills, cards
  surface-soft: "#faf8f2"         # near-white parchment — page white, input bg (same as background)
  surface-dark: "#0a2633"         # dark navy — secondary dark sections
  surface-cream: "#fff5d4"        # warm cream — highlight bands, gradient base
  surface-amber: "#ffc671"        # golden amber — CTA fill, brand accent

  # Ink / text
  ink: "#392e25"                  # dark brown — body text on light surfaces
  ink-strong: "#000000"           # pure black — max-contrast UI text
  on-dark: "#ffffff"              # white — text on dark canvas / dark sections
  on-primary: "#453421"           # deep warm brown — text on golden CTA
  ink-secondary: "#453421"        # warm dark — supporting copy on light
  ink-muted: "#000000"            # was rgba(0,0,0,0.65) — Google format requires hex

  # Brand accent
  primary: "#ffc671"              # golden amber — primary CTA, brand highlight
  primary-hover: "#dba855"        # was rgb(219,165,85) — darkened amber on hover
  primary-container: "#fff5d4"    # warm cream — tinted container surfaces

  # State / interaction
  text-hover: "#000000"           # was rgba(0,0,0,0.937) — Google format requires hex
  focus-ring: "#8a3a34"           # burgundy-red — input focus border

  # Semantic
  success: "#22c55e"
  warning: "#f59e0b"
  error: "#8a3a34"                # warm burgundy — error, focus states

  # Borders
  border: "#000000"               # was rgba(0,0,0,0.19) — Google format requires hex
  border-light: "#392e25"         # warm brown border on light surfaces

  # Shadow tints
  shadow-soft: "#000000"          # was rgba(0,0,0,0.05–0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 62px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -3.72px
  display:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 57px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -3.56px
  heading-section:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 43px
    fontWeight: 500
    lineHeight: 1.13
    letterSpacing: -2.14px
  heading-sub:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 29px
    fontWeight: 500
    lineHeight: 1.13
    letterSpacing: -0.84px
  body-large:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.32px
  body:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.16px
  body-medium:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.16px
  button-ui:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-ui:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1.5px
  caption:
    fontFamily: "sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 60px
  4xl: 96px

rounded:
  none: 0px
  sm: 8px
  md: 24px
  lg: 30px
  pill: 48px
  circle: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-secondary-hover:
    backgroundColor: "#eeeeee"           # was rgba(238,238,238,0.48) — Google format requires hex
    textColor: "{colors.text-hover}"
  button-ghost:
    backgroundColor: "#1a2a33"          # was rgba(255,255,255,0.07) on dark — Google format requires hex
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 16px
    border: "1px solid #2d3f47"         # was rgba(255,255,255,0.17) — Google format requires hex
  button-dark:
    backgroundColor: "{colors.ink-strong}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 24px

  card-product:
    backgroundColor: "{colors.surface-amber}"
    rounded: "{rounded.md}"
    padding: 20px

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    border: "2px solid {colors.border}"
    padding: 24px 15px 10px
  input-focus:
    borderColor: "{colors.focus-ring}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-ui}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  nav:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-medium}"
    padding: 12px 24px

  nav-dark:
    backgroundColor: "{colors.surface-canvas}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-medium}"
    padding: 12px 24px
---

# Hims Design System

## Overview

Hims operates at the intersection of clinical authority and editorial warmth — a tension that defines every visual decision on the site. The primary canvas is `{colors.background}`, a deep warm brown that reads more like whiskey than walnut, chosen to distance the brand from the antiseptic whites of traditional healthcare. Against it, `{colors.primary}` — a ripe golden amber — becomes the single chromatic voice: CTAs, highlights, and product card fills all draw from this same warm frequency. The result is intimate rather than institutional, the kind of tone a men's health brand needs when asking someone to book a consultation about hair loss or testosterone.

Typography is anchored in Sofia Pro, a self-hosted geometric humanist sans with notably generous letter-spacing at headline sizes. Dembrandt recorded aggressive negative tracking at display scale (-3.56px to -3.72px on 57–62px type), which pulls the letterforms into tight editorial clusters rather than open signage. At body scale the tracking relaxes to a barely-perceptible -0.16px, keeping reading comfortable. There is no serif typeface in the system — all warmth is carried by color and photography, not letterform style.

The shape language is thoroughly rounded. Pill buttons use a fixed 48px border-radius; product cards and modal overlays use 24–30px. Nothing is sharp. The implicit message is approachability — a brand that softens the clinical. Gradients play a supporting role: warm parchment-to-cream fades (`{colors.surface-cream}` to `{colors.surface-soft}`) texture section backgrounds, while the amber-to-dark-amber gradient on product cards gives the photography tiles a warm substrate that unifies disparate product imagery.

**Key Characteristics:**
- Dark warm-brown primary canvas (`{colors.background}`) — deliberately not navy, not charcoal, not clinical white
- Single chromatic accent: golden amber (`{colors.primary}`) used for all primary CTAs, active pills, and product card fills
- Sofia Pro (self-hosted, 5 weights: Light/Regular/Medium/SemiBold/Bold) — no Google Fonts fallback on brand type
- Display type tracked aggressively negative (-3.56px to -3.72px at 57–62px) for editorial density
- Pill-shaped everything: `{rounded.pill}` (48px) for all interactive buttons; `{rounded.md}` (24px) for cards and modals
- Parchment gradient system (`{colors.surface}` to `{colors.surface-soft}`) transitions dark-canvas sections to light reading zones
- Warm amber-to-deep-amber gradient on product cards unifies photography without color-correcting it
- Minimal border use on the dark canvas — surfaces are separated by value and background color, not hairlines
- Input focus state switches to burgundy-red (`{colors.focus-ring}`) — a warm departure from the usual blue focus ring
- Motion at 0.3s ease dominates (98 instances) — unhurried, confident, never snappy
- Sparse shadow use: `rgba(0,0,0,0.05–0.08)` shadows on elevated cards — nearly flat, letting color do depth work
- Nav adapts from dark (`{colors.nav-dark}`) to light (`{colors.nav}`) depending on section context

## Colors

### Primary

- **Warm Brown** (`{colors.background}`): The dominant canvas on dark sections — hero, feature zones, and persistent navigation. Warm enough to read as editorial, dark enough for strong contrast with the amber CTA.
- **Parchment** (`{colors.surface}`): Light section fill used for testimonials, content bands, and product listings. A warm off-white that avoids clinical brightness.
- **Soft Parchment** (`{colors.surface-soft}`): Near-white page base and input background. Sits cleanly under `{colors.ink}` body type.

### Brand Accent

- **Golden Amber** (`{colors.primary}`): The CTA color and product card fill. Applied to the most important action on every page. Hover darkens to `{colors.primary-hover}` via 0.3s ease transition.
- **Warm Cream** (`{colors.surface-cream}`): Gradient base and highlight bands. Closely related to `{colors.primary}` but desaturated — ambient warmth rather than a call to action.

### Text & On-Surface

- **Deep Warm Brown** (`{colors.on-primary}`): Text on golden-amber CTAs and product card fills. Uses the same brown as the canvas for brand coherence.
- **White** (`{colors.on-dark}`): All text on the dark brown canvas sections.
- **Brown Body** (`{colors.ink}`): Body copy on `{colors.surface}` and `{colors.surface-soft}` backgrounds.

### States & Semantic

- **Burgundy Focus** (`{colors.focus-ring}`): Input focus border — warm alternative to the browser default blue, aligned with the brand's medical credential without being cold.
- **Error / Semantic** (`{colors.error}`): Reuses the focus ring color for error states — keeps the palette tight.
- Border (`{colors.border}`): Applied at low opacity in context (originally rgba(0,0,0,0.19) on inputs) — a soft constraint rather than a hard edge.

## Typography

### Font Family

- **Primary**: `sofia-pro`, with fallbacks: `SofiaProWeb, Helvetica, Arial, sans-serif`
- **Weights available**: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700) — all self-hosted WOFF2
- **No Google Fonts**: Sofia Pro is a commercial typeface; no Google substitute will match. The fallback stack degrades to Helvetica gracefully.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Main hero headings — 62px, tightly tracked at -3.72px |
| `display` | Sub-hero display headings — 57px, -3.56px tracking |
| `heading-section` | Section-level headings — 43px weight 500 |
| `heading-sub` | Card headings, feature labels — 29px weight 500 |
| `body-large` | Intro copy, pull quotes — 20px weight 400 |
| `body` | Standard body copy and navigation links — 16px |
| `body-medium` | Navigation, emphasized inline text — 16px weight 500 |
| `button-ui` | All button labels — 15px weight 500 |
| `label-ui` | Uppercase tracking badges, category labels — 12px weight 600, 1.5px letter-spacing |
| `caption` | Legal text, fine print, product metadata |

### Principles

- Negative tracking intensifies with type size: -3.72px at 62px, relaxing to -0.16px at 16px — editorial compression at scale, readability at body
- Weight range 400–500 dominates; Bold appears sparingly on nav-label uppercase and semantic states
- No italic usage detected — the brand communicates differentiation through weight and size, not style variation
- Uppercase small-caps labels (`{typography.label-ui}`) with 1.5px letter-spacing mark categories and status — a clinical shorthand that cuts through warm imagery

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Hims uses generous vertical breathing room — 60px and 96px section padding are common, allowing photography to breathe. Horizontal container padding is tight at mobile (12–16px) and expands to 40–60px on desktop. The spacing personality is editorial: tight type clusters, generous margins around them.

### Grid & Container

- Max content width: approximately 1266px (primary desktop breakpoint)
- Large desktop at 1392–1440px with wider gutters
- Section padding frequently asymmetric — more breathing room at top than bottom to visually anchor content
- Photography-first layouts use full-bleed image columns beside 40–50% text columns

### Whitespace Philosophy

- Generous vertical spacing (3xl–4xl between sections) creates the "considered" retail feel
- Horizontal rhythm tightens toward mobile: grid collapses to single column at 768px
- Inter-section transitions use gradient overlays (`{colors.surface}` to `{colors.surface-soft}`) rather than hard cuts

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Dark canvas sections, hero backgrounds |
| Subtle (Level 1) | `0px 2px 16px rgba(0,0,0,0.05)` | Floating nav bar on light backgrounds |
| Card (Level 2) | `0px 4px 8px rgba(0,0,0,0.08)` | Product cards, content tiles |
| Elevated (Level 3) | `0px 8px 30px rgba(0,0,0,0.06)` | Modals, drawers, sticky elements |
| Dialog (Level 4+) | `0px 5px 10px rgba(0,0,0,0.05)` | Confirmation dialogs, overlays |
| Focus Ring | `2px solid {colors.focus-ring}` | All interactive focus states |

**Shadow Philosophy**: Hims keeps shadows extremely light (0.05–0.08 opacity on pure black) — barely distinguishable from flat. Depth is primarily created through background-color contrast: dark brown canvas vs. parchment card vs. amber product tile. Shadows serve as a final layer of separation, not the primary depth cue. This keeps the visual surface clean for photography-dominant layouts.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rarely used — full-bleed image tiles, dividers |
| `sm` | 8px | Small chips, tags, minor UI elements |
| `md` | 24px | Cards, section modules, modal tops |
| `lg` | 30px | Image frames, feature containers |
| `pill` | 48px | All CTA and navigation buttons |
| `circle` | 9999px | Avatar frames, social icons, radio-style selectors |

The shape vocabulary is unambiguously soft. The dominant gesture is `{rounded.pill}` on every interactive button — 48px on ~15px-tall buttons creates a true pill. Cards at `{rounded.md}` (24px) echo that softness at a larger scale. The system deliberately avoids sharp corners on anything a user touches; clinical sharpness is reserved for dividers and full-bleed photography.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Golden amber fill (`{colors.primary}`) with deep brown text (`{colors.on-primary}`), 48px pill. The dominant CTA across every page section. Hover darkens amber to `{colors.primary-hover}` via 0.3s ease.
- **`button-secondary`** — White fill with black text, same pill shape. Used in navigation and on dark-canvas sections where amber would compete with adjacent product imagery.
- **`button-ghost`** — Frosted dark fill with white text and subtle light border, used on dark sections for secondary actions ("Do I have low T?" beside a primary CTA). The near-invisible background keeps the dark canvas texture visible.
- **`button-dark`** — Pure black fill, white text, pill shape. Used for tertiary actions and "Learn more" links in feature modules.

### Cards

- **`card`** — Parchment surface (`{colors.surface}`), 24px radius, 24px padding. Standard content card for testimonials, articles, and feature tiles.
- **`card-product`** — Amber fill (`{colors.surface-amber}`), same radius. Product listing cards that showcase prescription medication imagery against the brand's signature warm background.

### Inputs

- **`input`** — Parchment background, 30px radius (approaching pill), 2px border at low opacity. Floating label pattern with generous top padding (24px) to accommodate the label above the typed value.
- **`input-focus`** — Border shifts to `{colors.focus-ring}` (burgundy). The warm red focus state is distinctive and brand-coherent, replacing the browser blue entirely.

### Badges / Tags

- **`badge`** — Warm cream background (`{colors.primary-container}`), uppercase tracked label text (`{typography.label-ui}`), 8px radius. Used for "New," "High dose option," and category tags on product cards.

### Navigation

- **`nav`** — Switches context: white background with dark text on light-canvas pages, dark brown with white text on dark-canvas sections. Sticky positioning with 0.3s/0.6s linear transition on opacity and height during scroll.

## Do's and Don'ts

### Do

- Use `{colors.primary}` exclusively for primary CTAs — it is the single chromatic accent; diluting it weakens the brand signal
- Apply `{rounded.pill}` (48px) to every button regardless of size — the pill silhouette is load-bearing brand identity
- Pair `{colors.background}` dark sections with `{colors.on-dark}` text and `{colors.primary}` CTAs — this three-value dark module is the brand's signature composition
- Use the parchment gradient (`{colors.surface}` → `{colors.surface-soft}`) to transition from dark canvas sections to light reading zones — hard cuts feel clinical
- Set display typography with aggressive negative tracking (reference `{typography.display-hero}` and `{typography.display}`) — loosening it loses the editorial compression
- Keep shadow opacity at 0.05–0.08 maximum — depth comes from color contrast, not shadow weight
- Apply `{colors.focus-ring}` (burgundy) on all interactive focus states — never revert to browser-default blue
- Allow photography full-bleed in its column — don't cage product images in 4px rounded containers

### Don't

- Don't introduce sharp-cornered buttons or cards — even small chips should use `{rounded.sm}` (8px) minimum
- Don't use `{colors.primary}` for decorative elements, text links, or secondary badges — its power depends on scarcity
- Don't lighten the dark canvas with translucent overlays — the warm brown earns its depth from being opaque and unbroken
- Don't use a generic blue focus ring — `{colors.focus-ring}` is non-negotiable for brand coherence on form elements
- Don't place small type (below 12px) on `{colors.background}` in non-white — the warm brown and amber combination can drop below 4.5:1 at small sizes
- Don't substitute Sofia Pro display weights with system fallbacks in production — Helvetica tracked to -3.72px looks broken; the negative tracking is calibrated to Sofia Pro's specific metrics
- Don't use `{colors.surface-dark}` (navy) and `{colors.background}` (brown) in the same module without a clear transition — the two dark surfaces compete
- Don't add border-radius above 48px to buttons — it rounds back to circle and loses the pill proportions at taller button heights

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <360px | Single-column, max reduced padding |
| Mobile | 360–487px | Single-column, standard mobile padding |
| Mobile Large | 488–739px | Grid begins 2-col on product cards |
| Tablet | 768–1023px | Navigation shifts, 2-col layout standard |
| Desktop | 1024–1266px | Full desktop grid, sticky nav active |
| Large Desktop | 1392–1440px | Wider gutters, expanded hero typography |
| XL Desktop | 1720–2560px | Max-width container centered with large margins |

### Touch Targets

- All pill buttons have minimum 44px height — touch-safe by default
- Social icon buttons use 48px circle targets (`{rounded.circle}`)
- Input fields have generous padding that expands the tap area well beyond the visible text field

### Collapsing Strategy

- Hero sections collapse from 2-column (image + headline) to stacked single-column on mobile, with the image moving below the headline text
- Product card grids collapse from 4-column desktop to 2-column tablet to 1-column mobile
- Navigation collapses to hamburger at 768px; the dark canvas nav drawer slides in from the left with 0.3s linear opacity + height transition
- Display type scales down: 62px desktop → approximately 38–42px mobile, tracking adjusted proportionally

### Image Behavior

- Photography is full-bleed at all breakpoints — product images never shrink inside constrained frames
- Amber card backgrounds (`{colors.surface-amber}`) maintain their warmth regardless of image crop
- Background images use cover-fit with centered focal point

---

## Agent Prompt Guide

### Quick Color Reference

- Background (dark): `{colors.background}` (#392e25)
- Background (light): `{colors.surface-soft}` (#faf8f2)
- Text on dark: `{colors.on-dark}` (#ffffff)
- Text on light: `{colors.ink}` (#392e25)
- Brand accent / CTA: `{colors.primary}` (#ffc671)
- CTA text: `{colors.on-primary}` (#453421)
- Border: `{colors.border}` (#000000 at low opacity)
- Focus ring: `{colors.focus-ring}` (#8a3a34)

### Example Component Prompts

- "Build a hero section with background `{colors.background}`, centered headline in `{typography.display-hero}` (sofia-pro 62px weight 400 tracking -3.72px) in `{colors.on-dark}`, a subheadline in `{typography.body-large}` below it, and a primary CTA button using `{components.button-primary}` (background `{colors.primary}`, text `{colors.on-primary}`, 48px border-radius, 14px 24px padding)."
- "Create a product card with background `{colors.surface-amber}` (#ffc671), 24px border-radius (`{rounded.md}`), 20px padding, a product image centered on the amber field, a product name in `{typography.heading-sub}` (sofia-pro 29px weight 500 tracking -0.84px) in `{colors.ink}`, and a 'Get started' CTA in `{components.button-primary}`."
- "Build a parchment content card using `{components.card}`: background `{colors.surface}` (#f2ede5), 24px radius, 24px padding, heading in `{typography.heading-sub}` at `{colors.ink}`, body copy in `{typography.body}`, and a `{components.button-dark}` (black fill, white text, pill) as the card action."
- "Generate a site navigation bar with background `{colors.nav-dark.backgroundColor}` (#392e25), logo and nav links in `{colors.on-dark}` using `{typography.body-medium}` (sofia-pro 16px weight 500), a 'Log in' ghost button using `{components.button-secondary}` (white fill, black text, 48px pill), and a 'Get started' CTA using `{components.button-primary}` (amber fill, brown text, 48px pill). Nav sticks at top with 0.3s linear transition on background opacity during scroll."
- "Create a floating email capture input using `{components.input}`: background `{colors.surface-soft}`, 30px border-radius, 2px border at `{colors.border}` (rgba(0,0,0,0.19)), floating label in `{typography.caption}`, user value in `{typography.body}`, focus state switches border to `{colors.focus-ring}` (#8a3a34) via 0.15s linear transition. Place below a section heading in `{typography.heading-section}` on `{colors.surface}` background."

### Iteration Guide

1. **Start with the canvas** — establish whether the module is dark (`{colors.background}`) or light (`{colors.surface-soft}`). This determines text color and CTA variant before touching any other token.
2. **Lock the CTA** — `{colors.primary}` for the single most important action. Every other button variant (white, black, ghost) supports it; none competes.
3. **Apply the pill** — `{rounded.pill}` (48px) on every button without exception. The shape is not a stylistic option; it is the brand.
4. **Use photography as the hero** — don't frame or mask it. Let product shots sit on `{colors.surface-amber}` or full-bleed on the dark canvas.
5. **Track headings negatively** — reference `{typography.display-hero}` or `{typography.display}` exactly. Positive or zero tracking at large size reads as a different brand.
6. **Keep shadows light** — 0.05–0.08 opacity maximum. If depth is needed, shift background color rather than adding shadow weight.
7. **Gradient for transitions** — when moving from dark to light sections, bridge with a `linear-gradient({colors.surface}, {colors.surface-soft})` band rather than a hard horizontal cut.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Hims. Brand names and trademarks belong to their respective owners.