---
title: "Hims — App design system"
variant: extended
source: https://app.forhims.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/app-forhims-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Hims — App · Design System

> Quiet white space, vivid care, one app.

**Theme:** light · **Industry:** health · **Source:** https://app.forhims.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious app landing page pairs oversized black-and-violet typography with crisp white space and soft, colorful gradients. Hand-held phone imagery and product tiles make the healthcare app feel personal and tangible.

## North star

Keep the page predominantly white and let oversized type, restrained violet accents, and carefully framed app imagery carry the story.

## Overview

The page is built on a bright white canvas, with black typography providing the main structure and a saturated violet headline acting as the first strong brand signal. Pale aqua, mint, and blue gradients appear in large showcase artwork rather than as general page backgrounds; they add color without compromising the clean, clinical feel. Sofia is used throughout in a rounded, contemporary style, with unusually large display text and compact navigation. The layout favors broad single-column compositions and generous vertical pauses: a framed hero with a centered headline and hand-held phone gives way to an expansive gradient app statement, supporting copy, and category imagery. Photography is prominent but kept within deliberate compositions, including phone screens, portraits, and product tiles. Soft shadows create separation around floating navigation and image cards; visible borders are minimal. The overall effect is calm and spacious, with color reserved for key messages and visual demonstrations.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and the open space surrounding hero, copy, and product imagery. |
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary headings, navigation, icons, and high-contrast body copy. |
| Slate Text | `#2e2e2e` | `--color-slate-text` | neutral | Muted supporting text, secondary to the main black typography. |
| Cloud Aqua | `#e8f4f7` | `--color-cloud-aqua` | accent | Pale blue end of a soft showcase gradient; not a general section fill. |
| Mist Blue | `#afcdde` | `--color-mist-blue` | accent | Intermediate blue in the pale aqua-to-blue showcase gradient. |
| Care Mint | `#6ab4a5` | `--color-care-mint` | accent | Mint gradient accent in app showcase artwork and small health-related details. |
| Sky Blue | `#86b7d4` | `--color-sky-blue` | accent | Blue gradient partner to mint in the large app artwork. |
| Bright Current | `#53aaff` | `--color-bright-current` | accent | Blue gradient highlight appearing in text within the visual showcase treatment. |
| Deep Current | `#3577bf` | `--color-deep-current` | accent | Deeper blue in the showcase text gradient, transitioning toward black. |
| Seafoam Tint | `#c0e3d8` | `--color-seafoam-tint` | accent | Pale green gradient tone in artwork, not a dominant page surface. |
| Signal Violet | `#5d48db` | `--color-signal-violet` | brand | Distinctive violet hero headline and primary branded typographic accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Soft Ink) · `--color-text-muted` → `#2e2e2e` (Slate Text) · `--color-accent` → `#5d48db` (Signal Violet) · `--color-accent-2` → `#6ab4a5` (Care Mint) · `--color-accent-3` → `#86b7d4` (Sky Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#2e2e2e` | `#ffffff` | 13.58:1 | AAA |
| `#5d48db` | `#ffffff` | 6.15:1 | AA |

### Gradients

- `linear-gradient(166.14deg, rgb(83, 170, 255) 1.38%, rgb(53, 119, 191) 38.84%, rgb(0, 0, 0) 74.76%)`
- `linear-gradient(166.14deg, rgb(232, 244, 247) 0px, rgb(175, 205, 222) 100%)`
- `linear-gradient(166.14deg, rgb(106, 180, 165) 0px, rgb(134, 183, 212) 100%)`
- `linear-gradient(166.14deg, rgb(192, 227, 216) 0px, rgb(186, 225, 220) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sofia | `--font-body` | webfont | 500 | All page typography, including hero, headings, body text, captions, and navigation. | Nunito Sans |

- **sofia:** Rounded sans character; measured weight 500. Use tight negative tracking for large headings and restrained sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.516, base 35px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 280px | 500 | 1 | -0.057em | — | sofia | Oversized statement lettering within the app showcase artwork. |
| h1 | 220px | 500 | 1 | -0.057em | — | sofia | Primary hero message, centered above the phone image. |
| h2 | 141px | 500 | 1.1 | -0.057em | — | sofia | Major section headings and large editorial statements. |
| h3 | 85px | 500 | 1.15 | -0.047em | — | sofia | Secondary feature and content headings. |
| h4 | 84px | 500 | 2.44 | -0.057em | — | sofia | Small supporting heading or emphasized short label. |
| body | 35px | 500 | 1.18 | -0.047em | — | sofia | Large supporting paragraph beneath the showcase statement. |
| caption | 14px | 500 | 1.43 | -0.017em | — | sofia | Compact labels and explanatory text around imagery. |
| nav | 14px | 500 | 1.43 | -0.017em | — | sofia | Header links and the Download now navigation action. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 6, 7, 16, 22, 40, 90, 100, 120, 135, 156, 160, 170, 200 px.
- Section rhythm 250px · element gap — · card padding — · max content width —.

The page uses a spacious, mostly single-column composition rather than a dense grid. A slim header sits above a large inset hero panel; centered display copy and phone imagery establish the opening hierarchy. Later sections alternate oversized showcase artwork, left-aligned supporting copy, and broad image-led category arrangements. Whitespace separates each narrative beat. Keep alignment deliberate and preserve the measured spacious density; specific maximum width and card padding are not established by the measurements.

## Shape & elevation

- Radius: card `74px` · nav `45px` · xs `30px` · sm `45px`
- Shadow `xl` (nav, section): `rgba(0, 0, 0, 0.12) 0px 27px 104px 0px`
- Shadow `lg` (nav): `rgba(0, 0, 0, 0.06) 0px 8px 30px 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.11) 0px 8px 127px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The page is mostly flat, with no prominent border system. Soft, broad shadows lift the floating download navigation and image-led card from the white canvas. Rounded corners are visible on cards and navigation; keep layering subtle so generous whitespace remains the primary source of separation.

## Imagery

Use polished lifestyle photography and app mockups: a hand holding a phone anchors the hero, while later sections show portraits, clinicians, and product or program tiles. Frame imagery as large, rounded visual cards or integrated showcase artwork. Gradients and tiny interface details belong within the app/product visuals; avoid turning them into unrelated decorative illustrations.

## Components

### Floating download navigation

A compact, softly elevated header action with a rounded pill shape, black Apple icon, and the label “Download now”.

### Hero statement

Centered two-line Sofia headline in Signal Violet (#5d48db), separated from the phone imagery by generous white space.

### Hand-held app phone

Large lifestyle image of a hand holding a phone, with the app interface clearly visible against the white hero.

### Gradient app showcase

Large rounded showcase artwork using measured pale aqua, mint, and blue tones, with oversized text integrated into the visual.

### Supporting copy block

Prominent left-aligned Sofia paragraph on white; gradient-colored opening text transitions into dark closing copy.

### Category icon tiles

Simple black category icons presented on pale, softly shadowed, rounded tiles.

### Program image gallery

Dense sequence of rounded vertical app and lifestyle tiles, including portraits, treatments, and product imagery.

### Measured component styles

- **Card**: transparent background · text #000000 · radius 20% · padding 0px · 500 16px sofia · shadow rgba(0, 0, 0, 0.11) 0px 8px 127px 0px
- **Navigation item** (“Total care. Totally different. it’s all ”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px sofia

## Do

- Use white as the dominant page canvas.
- Reserve Signal Violet (#5d48db) for major typographic emphasis.
- Keep the hero headline centered above app imagery.
- Use oversized, tightly tracked display typography.
- Use gradients as showcase artwork, not generic page decoration.
- Give each major content beat generous vertical breathing room.

## Don't

- Do not introduce unmeasured palette colors.
- Do not make the page dense or dashboard-like.
- Do not outline every card with a visible border.
- Do not use gradients as full-page backgrounds.
- Do not replace lifestyle app imagery with generic icons.
- Do not add decorative shadows to every text block.

## Agent prompt

Build a new health-app landing page in the Hims visual style. Use Gallery White (#ffffff) as the dominant canvas, Soft Ink (#000000) for primary text, and Signal Violet (#5d48db) as a restrained headline accent. Set rounded, contemporary sans typography similar to Sofia, with oversized tightly tracked headings and readable supporting copy. Compose the page as a spacious single-column story: a slim floating download action, centered hero statement, hand-held phone image, gradient-led app showcase, supporting copy, and image-rich category content. Keep mint and blue tones—Care Mint (#6ab4a5), Sky Blue (#86b7d4), and Cloud Aqua (#e8f4f7)—inside showcase artwork rather than broad backgrounds. Use softly elevated rounded cards, minimal borders, and generous vertical pauses. Preserve a calm clinical mood while making the app and people feel tangible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large white hero panel with centered violet headline and hand-held phone image. | brand-first message, app preview | centered headline, white canvas, soft panel shadow |
| 2 | feature-split | Large gradient showcase artwork followed by a spacious, left-aligned copy block. | benefit summary, guided discovery | mint-blue gradient, large display text, text color transition |
| 3 | category-nav | Wide image-led category row with icon tiles and visible Care, Programs, and Shop labels. | category browsing, service shortcuts | rounded icon tiles, soft shadows, horizontal category imagery |
| 4 | product-showcase | Centered heading and category icon followed by a medical statistic and image gallery. | program discovery, trust-building statistic | oversized black title, circular statistic, rounded image tiles |
| 5 | gallery | Wide, tightly arranged gallery of rounded vertical tiles with a phone-and-hand image overlapping the collection. | visual exploration, treatment discovery | portrait tiles, phone overlay, varied image colors |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/app-forhims-com