Brand

The Hi Doctor brand

One green voice, one colour for every treatment. Everything you need to write about or show Hi Doctor correctly.

Current logo files
Colours, gradients and washes
Type and voice principles

Logo

The mark and wordmark

The isotype is a layered two-tone cross: a solid vertical bar over a lighter horizontal bar. The primary logo pairs it with the rounded lowercase wordmark.

Inverse

Primary horizontalSVG

Inverse

IsotypeSVG

Stacked lockupSVG

App iconSVG

Category marks

Weight loss

Hair growth

Sexual health

Dermatology

Logo rules

Clear space

Keep a space equal to the height of the isotype's cross arm around the lockup. Never recolour the cross, stretch, outline or add other medical symbols.

Isotype: keep one cross arm of clear space on every side; minimum size 20 px.

Colour

Category colours

Brand green is Hi Doctor's voice. Each treatment has its own colour.

Brand green#157a5c

Weight loss blue#2b5fd0

Hair orange#c04a22

Sexual health rose#bf3468

Skin violet#7b4fd6

Colour

Gradients

Light, one hue plus white. Never rainbow, never dark. They re-tint on category pages because they read the page accent.

gradient-heroEvery hero, behind the transparent header.

gradient-bandThe light band that replaced dark sections.

gradient-ctaIn-content CTA panels, guides and emails.

gradient-progressProgress bars, goal meters, pathway lines.

Category and product cards

gradient-category-card · wlWeight loss cards, with an unbranded pen without text and a white glow.

gradient-category-card · hairHair growth cards, with an unbranded product without text and a white glow.

gradient-category-card · shSexual health cards, with an unbranded product without text and a white glow.

gradient-category-card · dermSkin cards, with an unbranded product without text and a white glow.

Chroma washes

Background images

Soft chroma washes sit behind heroes, feature splits and product still-lifes. Use the brand green set on company pages and the category set on treatment pages.