Skip to content
Gabriel Garcia

Longevity Rebrand

The brand system

Nobody handed me a brand guide, so apart from Himedi’s blue, every color and font on the site was my decision.

In the brief, our CEO pointed to how longevity competitors like Function Health, Superpower and Whoop talk about their product and mission. I gave the brand a clinical, modern look to match, with deep navy backgrounds behind the imagery.

I cut the type down to two typefaces and nine text styles, with smaller sizes for the larger styles on phones.

The light focus-area colors were too pale for white button text, so I made a deeper version of each.

Typography

I chose Inter for headings, prices and controls, and DM Sans for body text.

Show the type scaleHide the type scale
Inter
Headings, prices, buttons and navigation
DM Sans
Body copy, and the default on every page I redesigned
  1. Display · 74px · 40px on phones · Hero headlines

    Insights to shape your best life

  2. H1 · 40px · 30px on phones · Section and page headlines, builder prices

    Why book through Himedi.

  3. H2 · 24px · 20px on phones · Card and panel titles, stats, totals

    The clinic’s price, or less.

  4. Body large · 17px · 15px on phones · Ledes, card copy and quotes

    A checkup in Seoul, $299

  5. Label · 15px · 14px on phones · Buttons, navigation, tabs and options

    Build my checkup

  6. Body · 14px · Body copy, panels and footer links

    A checkup in Seoul, $299

  7. Body small · 12px · Notes, descriptions and legal

    Typical saving. Varies by clinic and package.

  8. Label small · 12px · Test chips, figures and the stepper

    Complete blood count

  9. Eyebrow · 12px · Eyebrows and section labels

    Your checkup

Color

I kept Himedi’s blue as the main color and built the rest of the palette around the blue. The navies became the dark surfaces under photography and scans. I kept three accent colors for the focus areas a customer picks in the checkup builder.

Blue

  • Himedi blue

    #51749b

    Primary button fill, cart badge, links

  • Blue deep

    #3f5c7c

    Primary button hover, focus ring on light

  • Blue light

    #7ea3cc

    Supporting blue

  • Blue glow

    #9ccbf2

    Highlight figures on dark cards

  • Teal

    #5fb6c4

    Focus ring on dark surfaces, live indicator

  • Teal text

    #2c7a87

    Teal made readable as text on light

  • Gold

    #e3b765

    Warm accent, shared with the cancer focus area

Navy

  • Navy 900

    #0a1726

    Deepest surface, fixed header

  • Navy 850

    #0c1d30

    Dark surface

  • Navy 800

    #102438

    Dark surface, and the label on light buttons

  • Navy 700

    #16314e

    Dark surface step

  • Navy 600

    #1e4067

    Lightest navy, hero glow

Light surfaces and text

  • Light

    #f3f7fb

    Page background

  • Light 2

    #e8f0f8

    Behind every media box

  • Light warm

    #f7f9fb

    Alternate light surface

  • Card white

    #ffffff

    Card fill

  • Text dark

    #0f1b2d

    Body text

  • Text soft

    #33485f

    Secondary text

  • Text muted

    #5a6f88

    Tertiary and caption text

  • On dark

    #eef4fb

    Text on navy

  • On dark soft

    #c2d2e6

    Body copy on dark image cards

  • On dark mute

    #90a6c2

    Tertiary text on dark

The three focus areas

  • Heart

    #e0846f

    Heart focus area

  • Brain

    #8e7cc3

    Brain focus area

  • Cancer

    #e3b765

    Cancer focus area

The same three, deep enough for a button

  • Heart deep

    #b64227

    Fill on the heart card’s Add button

  • Brain deep

    #7059b3

    Fill on the brain card’s Add button

  • Cancer deep

    #886119

    Fill on the cancer card’s Add button

Imagery

I used three kinds of imagery, each in its own part of the site.

The clinic scene from the hero video at the top of the himedi.com homepage.

Documentary

I wanted the people in the photos to look caught mid-morning at a clinic, with nobody facing the camera. Much of the imagery was enhanced with AI, and all of it was graded a cool gray-blue.

The dark section of the himedi.com homepage that asks what you know about your body, with its macro biology image behind the focus-area tabs.

Abstract biology

In the dark section about the body, I kept the biology close-ups photoreal. The image changes with the tab a visitor picks.

The same body, two checkups comparison on the himedi.com homepage, with the whole-body scan behind its drag divider.

Diagnostic output

Behind the slider that compares an American physical with a Korean checkup, I put a whole-body scan in cold blue-white on near-black. That section made the case that a checkup in Korea was worth the trip.

Back to Longevity Rebrand