Hims

About Hims

A consumer health and telehealth platform. Fits digital clinics, wellness brands, subscription healthcare, and direct-to-consumer product pages.

Request a DESIGN.md analysisCustom, made for Hims Website Starter KitBuild your site from a starter template

Design tokens

21 colors · 8 type styles

Soft orange (#ffc671) primary on a pure white (#ffffff) canvas, set in CareSans throughout. The highlights below are read from the Hims DESIGN.md in the Pass bundle, which carries all 21 color tokens, 8 type styles and the full component rules.

Colors

Primarysoft orange#ffc671
Secondarybrown#754b3d
Canvaspure white#ffffff
Inkpure black#000000

Type

CareSansDisplayweights 400, 410, 450, 460, 500, 28 to 57px
CareSansBodyweights 400, 410, 450, 460, 500, 16 to 20px

Radius

sm 16px
md 28px
pill 48px
lg 100px
full 9999px

Spacing

xs 8px
sm 12px
md 16px
lg 24px
xl 48px
xxl 96px

Components

Primary buttonbutton-primary
Primary buttons fill with soft orange (#ffc671) and carry deep brown (#453421) text, set in CareSans 14px at weight 500, with pill corners (48px) and 0px 24px padding.
Cardproduct-card
Cards sit on pure white (#ffffff) behind a pale peach (#eae1d7) hairline, with 16px corners and 24px padding.
Navigationnav-bar
The top navigation runs on pure white (#ffffff) with pure black (#000000) links, set in CareSans 16px at weight 400, in a 64px bar.

Three ways to ship a Hims-style UI.

Use in your AI builder, no-code tool, or CMS

Lovablev0BoltFramerWebflowWordPressWixSquarespace CanvaGoDaddy

Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.