---
version: alpha
name: Hims
description: Giant periwinkle display type floating on a clean clinical white page.
colors:
  on-surface-variant: "#F0F0F0"
  on-surface: "#000000"
  surface: "#FFFFFF"
  primary: "#5D48DB"
  hairline: "#E0E0E0"
typography:
  body-small:
    fontFamily: Sofia
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Sofia
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: Sofia
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  subheading:
    fontFamily: Sofia
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  heading:
    fontFamily: Sofia
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  title:
    fontFamily: Sofia
    fontSize: 81px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  display:
    fontFamily: Sofia
    fontSize: 141px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  mega:
    fontFamily: Sofia
    fontSize: 220px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  hero:
    fontFamily: Sofia
    fontSize: 280px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
rounded:
  pill-button: 52px
  large-card: 45px
  card: 30px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 22px
  xl: 90px
  2xl: 120px
---
# Hims — Style Reference
> Giant periwinkle display type floating on a clean clinical white page.

**Theme:** light

Hims runs on near-nothing and one loud gesture. The canvas is pure white, the copy is pure black, and then the hero headline detonates in a single electric periwinkle — `#5D48DB` set at display sizes that run past 200px, wordmark-huge and rounded. Everything is Sofia, one geometric sans doing all the work across two weights only (400 and 500), so the personality comes entirely from scale and color, not from typographic variety. Shapes are soft and generous: pill buttons at 52px radius, cards rounded to 30–45px, and a family of wide, low-opacity ambient shadows that let the phone mockup float rather than sit. The layout is airy to the point of luxury — vast white margins, a centered oversized headline, product shown as a single hero device against a diffuse pink-lilac glow. This is telehealth trying very hard not to look clinical: friendly, confident, and mostly empty on purpose.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#000000` | `--color-ink` | Primary text, the wordmark, and any dark surface; the default reading color on white. |
| Canvas | `#FFFFFF` | `--color-canvas` | Page background and the fill of pill buttons/cards; the dominant surface by far. |
| Periwinkle | `#5D48DB` | `--color-periwinkle` | The one signature move — display headlines and links only. This is the brand. Never dilute it across body text or backgrounds. |
| Mist | `#F0F0F0` | `--color-mist` | Muted/secondary text and faint on-photo captions; a hair off pure white, used sparingly. |
| Hairline | `#E0E0E0` | `--color-hairline` | The only border color — thin dividers and control outlines, never a fill. |

## Tokens — Typography
### Sofia — the entire type system, display through body · `--font-sofia`
Sofia (Sofia Pro) is a rounded geometric sans that carries every role here. There is no serif, no mono, no secondary family — identity is built from weight and scale alone. Headlines sit at 500 (medium) and run enormous; body and quieter labels drop to 400.
- **Substitute:** Sofia Pro, Poppins, Circular, ui-sans-serif
- **Weights:** 400 (regular), 500 (medium)
- **Sizes:** 18px, 20px, 24px, 32px, 35px, 39px, 44px, 81px, 84px, 85px, 141px, 220px, 280px
- **Line height:** tight on display (~1.0–1.05), ~1.5 on body
- **Letter spacing:** near-zero; the geometric letterforms need no tracking at any size
- **Role:** display headlines, section titles, buttons, links, and body — one family, two weights, scale does the rest.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Body small | 18px | 1.5 | 0 | `--text-sm` |
| Body | 20px | 1.5 | 0 | `--text-base` |
| Lead | 24px | 1.45 | 0 | `--text-lead` |
| Subheading | 32px | 1.2 | 0 | `--text-subheading` |
| Heading | 44px | 1.1 | 0 | `--text-heading` |
| Title | 81px | 1.05 | 0 | `--text-title` |
| Display | 141px | 1.0 | 0 | `--text-display` |
| Mega | 220px | 1.0 | 0 | `--text-mega` |
| Hero | 280px | 1.0 | 0 | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (verging on spacious)
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 22px | `--spacing-lg` |
| xl | 90px | `--spacing-xl` |
| 2xl | 120px | `--spacing-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Pill button | 52px |
| Large card | 45px |
| Card | 30px |
| Avatar / dot | 100% |
| Soft square | 20% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Float subtle | `rgba(0, 0, 0, 0.06) 0px 8px 30px 0px` | `--shadow-subtle` |
| Float soft | `rgba(0, 0, 0, 0.11) 0px 8px 127px 0px` | `--shadow-soft` |
| Float wide | `rgba(0, 0, 0, 0.12) 0px 27px 104px 0px` | `--shadow-wide` |
| Float deep | `rgba(0, 0, 0, 0.25) 0px 9px 46px 0px` | `--shadow-deep` |

### Layout
- **Page max-width:** wide/contained with generous white gutters
- **Section gap:** large — 90–120px of vertical breathing room
- **Card padding:** 0 on media cards (image bleeds to the rounded edge); pill controls use 16px 22px
- **Element gap:** comfortable; content floats in whitespace rather than packing a grid

## Components
### Download Pill
**Role:** The single header CTA ("Download now"), sitting top-right against white.
White fill (`#FFFFFF`) with black text (`#000000`) at 500 weight, 16px, radius 52px, padding 16px 22px. It reads as a floating capsule — no border, elevation implied by a soft ambient shadow rather than a hard outline. Because the page is already white, the pill relies on shape and shadow, not contrast, to register.

### Hero Headline
**Role:** The one loud statement — "Total care. Totally different."
Sofia 500 in periwinkle `#5D48DB`, set enormous (81px scaling up toward the 220–280px display steps), centered, tight line-height. This is the brand's entire visual identity in one element. The violet appears here and essentially nowhere else at size.

### Section Heading
**Role:** Titles below the hero.
Sofia 500, ~32–44px, in ink `#000000`, tight leading, no tracking. Quieter than the hero but same family and weight — hierarchy is pure scale and color (black vs. periwinkle), not styling.

### Text Link
**Role:** Inline navigation and secondary actions.
Sofia at 18px, 400 weight, black `#000000` by default with periwinkle `#5D48DB` as the active/brand accent; no underline, no border, no radius. Understated against the loud display type.

### Media Card
**Role:** Product/program tiles (e.g. the in-app "Hard made easy" cards).
Rounded 45px (large) or 30px, image bleeds edge-to-edge, no border, zero inner padding on the media itself; overlaid captions in white or mist `#F0F0F0`. Floated on a subtle shadow so it lifts off the white page.

### Ambient Glow Field
**Role:** The diffuse pink-lilac halo behind the hero device.
A soft radial gradient bloom (no hard token — a background wash) sitting under the phone mockup. It's the only warmth on an otherwise cool white/violet/black system and exists purely to make the product photography feel alive.

### Hairline Divider
**Role:** Structural separation.
1px in `#E0E0E0`, the sole border color. Used for thin rules and control outlines — never as a fill or a heavy frame.

### Wordmark
**Role:** "hims & hers" lockup, top-left.
Solid black `#000000` SVG, medium-weight custom letterforms. Anchors the header opposite the download pill; no color, letting the periwinkle headline own the palette.

### Nav Pill (in-app)
**Role:** Category selector (e.g. "Sexual Health" active among tabs).
Pill-shaped control, light neutral fill with black text; active state distinguished by fill rather than color. Echoes the 52px-radius capsule language of the marketing CTA.

### Caption / Meta
**Role:** Small supporting text on cards (e.g. "4 weeks · 540k+ members").
Sofia 400 at 18px, mist `#F0F0F0` or reduced-opacity white over imagery — quiet, informational, never competing with the headline.

## Do's and Don'ts
### Do
- Keep the canvas pure white `#FFFFFF` and let content float in whitespace.
- Reserve periwinkle `#5D48DB` for the hero display type and links — it is precious, use it once and loud.
- Set headlines in Sofia 500 at genuinely large sizes; the scale jump (body ~20px → display 200px+) is the whole system.
- Round everything generously — 52px pills, 30–45px cards.
- Use the wide, low-opacity shadows to float elements rather than boxing them with borders.

### Don't
- Don't paint periwinkle across backgrounds, body copy, or multiple elements — dilute it and the identity collapses.
- Don't add a second typeface or a third weight; the restraint (Sofia, 400/500 only) is the point.
- Don't introduce hard borders as containers — the only border is the `#E0E0E0` hairline, used thin.
- Don't crowd the layout; if it feels dense, it's wrong.
- Don't let anything compete with the hero headline at display scale.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page background; the dominant surface. |
| 1 | Card | `#FFFFFF` | Pills and cards, separated from canvas by shadow, not color. |
| 2 | Ink surface | `#000000` | Dark inverse surfaces and the wordmark. |

## Elevation
Depth comes entirely from soft luminance shadows, not borders or color steps. Because card and canvas are both white, separation is carried by a graduated shadow family — from a tight `0 8px 30px` at 6% opacity up to a wide `0 27px 104px` at 12% and a deeper `0 9px 46px` at 25%. Elements read as floating panes on white, an intentionally weightless, premium effect.

## Imagery
Photographic product-in-context: a real hand holding a phone whose screen shows the actual app UI, set against a diffuse pink-lilac ambient glow. The imagery is warm and human where the palette is cool and graphic — that tension (soft photo warmth vs. hard periwinkle-on-white) is the brand's signature. Rounded media cards let photos bleed to a 30–45px radius. No line-art icons or illustration compete with the photography.

## Layout
Contained-but-airy: an oversized centered hero headline over vast white margins, header split between the black wordmark (left) and a white download pill (right). Product is presented as a single floated device, not a feature grid. Vertical rhythm is generous (90–120px section gaps). The nav is minimal — wordmark plus one CTA — trusting whitespace and scale to carry hierarchy.

## Typography Signature
One family, two weights, and an enormous dynamic range. Sofia at 400 handles the quiet layer (body, captions, links ~18–24px); Sofia at 500 handles everything that matters, scaling from ~32px section titles to 220–280px display. The signature move is the sheer size of the hero set in a single saturated periwinkle — it turns a headline into a graphic element. Line-height stays near 1.0 on display so the giant words lock into a tight block, and near-zero tracking keeps the rounded geometric forms clean. Restraint (no serif, no third weight, no color beyond one violet) is what makes the loudness legible.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#000000` / surface: `#FFFFFF` (shadow-separated) / border: `#E0E0E0` / accent: `#5D48DB` / muted text: `#F0F0F0` / primary action: white pill with black text (no distinct CTA fill color)

## Example Component Prompts
1. **Hero headline**: Centered display heading in Sofia 500, color `#5D48DB`, size clamped from 81px up to 220px, line-height 1.0, near-zero letter-spacing, on a pure `#FFFFFF` background with large white margins above and below.
2. **Download pill**: A capsule button, white fill `#FFFFFF`, black text `#000000` at 500 weight 16px, border-radius 52px, padding 16px 22px, no border, lifted by shadow `rgba(0,0,0,0.06) 0 8px 30px`.
3. **Media card**: Rounded card, radius 45px, image bleeds edge-to-edge with zero padding, overlaid caption in `#F0F0F0` at 18px Sofia 400, floated on shadow `rgba(0,0,0,0.12) 0 27px 104px`.
4. **Ambient hero device**: A phone mockup centered over a soft radial pink-lilac glow on white, product screen showing app UI, no hard border, generous whitespace around it.
5. **Section title**: Sofia 500 heading, color `#000000`, ~44px, line-height 1.1, no tracking, left-aligned, with a `#E0E0E0` 1px hairline divider below.

## Similar Brands
- **Cash App** — oversized single-color display type on a plain canvas, letting one saturated hue own the whole identity.
- **Oura** — clean clinical wellness whitespace with soft floated product photography.
- **Calm** — diffuse pastel glow fields behind product, warmth against a minimal system.
- **Ro** — direct-to-consumer telehealth that swaps sterile-medical for friendly, rounded, human design.
- **Poppin / Poppins-era brands** — rounded geometric sans, generous radii, and a playful-but-premium consumer tone.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-canvas: #FFFFFF;
  --color-periwinkle: #5D48DB;
  --color-mist: #F0F0F0;
  --color-hairline: #E0E0E0;

  /* Typography — Families */
  --font-sofia: 'Sofia', 'Sofia Pro', 'Poppins', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-sm: 18px;
  --text-base: 20px;
  --text-lead: 24px;
  --text-subheading: 32px;
  --text-heading: 44px;
  --text-title: 81px;
  --text-display: 141px;
  --text-mega: 220px;
  --text-hero: 280px;
  --leading-display: 1.0;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 22px;
  --spacing-xl: 90px;
  --spacing-2xl: 120px;

  /* Border Radius */
  --radius-pill: 52px;
  --radius-card-lg: 45px;
  --radius-card: 30px;
  --radius-round: 100%;
  --radius-soft: 20%;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.06) 0px 8px 30px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.11) 0px 8px 127px 0px;
  --shadow-wide: rgba(0, 0, 0, 0.12) 0px 27px 104px 0px;
  --shadow-deep: rgba(0, 0, 0, 0.25) 0px 9px 46px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink: #000000;
  --color-canvas: #FFFFFF;
  --color-periwinkle: #5D48DB;
  --color-mist: #F0F0F0;
  --color-hairline: #E0E0E0;

  /* Typography — Families */
  --font-sofia: 'Sofia', 'Sofia Pro', 'Poppins', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-sm: 18px;
  --text-base: 20px;
  --text-lead: 24px;
  --text-subheading: 32px;
  --text-heading: 44px;
  --text-title: 81px;
  --text-display: 141px;
  --text-mega: 220px;
  --text-hero: 280px;
  --leading-display: 1.0;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 22px;
  --spacing-xl: 90px;
  --spacing-2xl: 120px;

  /* Border Radius */
  --radius-pill: 52px;
  --radius-card-lg: 45px;
  --radius-card: 30px;
  --radius-round: 100%;
  --radius-soft: 20%;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.06) 0px 8px 30px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.11) 0px 8px 127px 0px;
  --shadow-wide: rgba(0, 0, 0, 0.12) 0px 27px 104px 0px;
  --shadow-deep: rgba(0, 0, 0, 0.25) 0px 9px 46px 0px;
}
```