HealthTap Style Guide

Brand Foundation

Color Palette

The HealthTap palette balances professional navy authority with warm, approachable tan accents. Blue Light (#5B8FD9) is the most prevalent brand blue in the newer design language — used for primary buttons, header backgrounds, hero sections, and CTA surfaces.

Navy

#143565

Navy Dark

#0E2444

Blue

#4576C2

Blue Light

#5B8FD9

PRIMARY

Tan

#BE9D7B

Tan Light

#F5EDE3

Cream

#FAF7F4

Body Text

#4A5568

Warm Gray

#6B7A8D

Border

#E8E0D8

Green

#6EA642

Green Accent Usage

Green (#6EA642) may be used sparingly as an accent color for decorative lines, thin borders, small highlights, success states, or subtle dividers. It should never dominate a section — use it to add a touch of energy alongside the primary navy/tan palette.

Decorative line

Accent border

✓ Active

Success badge

Gradients

Hero: from-cream via-white to-blue-tint

Hero (blue): from-blue-light to-blue

CTA dark: from-navy to-navy-light

CTA blue: from-blue-light to-blue

Typography

Fonts & Type Scale

Gilroy for headings and UI labels. Noto Sans for body text and captions.

Gilroy — Heading Font

Light 300 — The quick brown fox jumps over the lazy dog

Regular 400 — The quick brown fox jumps over the lazy dog

Medium 500 — The quick brown fox jumps over the lazy dog

SemiBold 600 — The quick brown fox jumps over the lazy dog

Bold 700 — The quick brown fox jumps over the lazy dog

ExtraBold 800 — DO NOT USE (max weight is Bold 700)

Black 900 — DO NOT USE (max weight is Bold 700)

Noto Sans — Body Font

Light 300 — HealthTap is a nationwide virtual primary care clinic on a mission to place a long-term doctor at every American's fingertips.

Regular 400 — HealthTap is a nationwide virtual primary care clinic on a mission to place a long-term doctor at every American's fingertips.

Medium 500 — HealthTap is a nationwide virtual primary care clinic on a mission to place a long-term doctor at every American's fingertips.

SemiBold 600 — HealthTap is a nationwide virtual primary care clinic on a mission to place a long-term doctor at every American's fingertips.

Bold 700 — HealthTap is a nationwide virtual primary care clinic on a mission to place a long-term doctor at every American's fingertips.

Type Scale

H1 Hero — 3.25rem Bold

H2 Section — 2.25rem Bold

H3 Card — 1.125rem Bold

BADGE LABEL — 0.7rem SemiBold Uppercase

Body — 1rem Regular. A dedicated, lifelong primary care doctor at every member's fingertips.

Caption — 0.875rem. Muted supporting text for secondary information.

Brand Identity

Logos

Four logo variants: full wordmark and logomark, each in blue (light bg) and white (dark bg).

Full Wordmark — Light Background

logo_blue.png

Full Wordmark — Dark Background

logo_white.png

Logomark — Light Background

logomark_blue.png

Logomark — Dark Background

logomark_white.png

Favicon

Blue H+ logomark with white outline on transparent square frame. Works on both light and dark browser tabs without distortion.

Light tab

Dark tab

32px

32px dark

Files: favicon.ico (16/32/48) · favicon_32.png · favicon_180.png (Apple) · favicon_192.png (Android) · favicon_512.png (PWA) <link rel="icon" href="/assets/logos/favicon.ico" sizes="any"> <link rel="icon" href="/assets/logos/favicon_32.png" type="image/png" sizes="32x32"> <link rel="icon" href="/assets/logos/favicon_192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/assets/logos/favicon_180.png">

Interactive Elements

Button Styles

Four button variants for different contexts and backgrounds.

Primary: bg-[#5B8FD9] text-white px-6 py-2.5 rounded-full font-semibold hover:bg-[#4576C2] Accent: bg-[#BE9D7B] text-white px-8 py-3.5 rounded-full font-bold hover:bg-[#A88B6A] shadow-lg Outline: border-2 border-[#143565] text-[#143565] px-6 py-2.5 rounded-full hover:bg-[#143565] hover:text-white Ghost: bg-white/10 text-white/90 px-4 py-2 rounded-full border border-white/15 hover:bg-white/20

Critical Rule

CSS Image Effects

ALWAYS use CSS filters for image effects. NEVER use image generation tools to modify images.

White Monotone (for dark backgrounds)

Original

filter: brightness(0) invert(1)

.logo-white { filter: brightness(0) invert(1); }

Grayscale with Hover Reveal

Hover over the logo to see the color reveal effect

.logo-muted { filter: grayscale(100%); opacity: 0.6; transition: all 0.3s; } .logo-muted:hover { filter: grayscale(0%); opacity: 1; }

White + Muted with Hover

.logo-white-muted { filter: brightness(0) invert(1); opacity: 0.7; transition: opacity 0.3s; } .logo-white-muted:hover { opacity: 1; }

Compliance & Recognition

Trust Seals

Accreditation badges and industry awards. Display in footer or trust bar sections.

HIPAA

AICPA SOC 2

Joint Commission

GDPR

CCPA

LegitScript

Fierce 15 '26

On dark background (CSS white filter applied):

Partnerships

Partner & Client Logos

16 partner logos. Displayed with grayscale filter and hover color reveal.

SelectQuote

CHM

VHC Health

AstraZeneca

Clover Health

Samsung

Albertsons

EmblemHealth

Lilly Direct

Aeroflow Health

Asembia

BCBS Nebraska

Boehringer Ingelheim

Starmark

CrowdHealth

Highmark

Media Coverage

Press & Media Logos

15 press logos for "As Seen In" sections. Same grayscale hover treatment as partners.

Forbes

Fortune

CNBC

CBS News

Fox Business

Business Insider

TechCrunch

Healthline

Fierce Healthcare

J.D. Power

Men's Health

Healthcare Innovation

MobiHealthNews

HIT Consultant

MHE

Leadership Team

Headshots

10 leadership headshots. Display in circular frames with border.

Sean Mehra

CEO

Geoffrey Rutledge

CMO

Craig Hittle

CCO

Hammad Saleem

CITO

Nataliya Novikova

CGMO

Karishma Jadeja

SVP, Product

Isaac Weaver

SVP, Practice Ops

Zainab Magdon-Ismail

VP, Customer Success

Greg Gilley

Senior AI Advisor

David Kopp

Board Member

Photography

Stock Photography

10 brand-approved stock images including hero shots, telehealth scenes, and circular portraits.

hero_doctors_phone.png

Hero shot: hand holding phone, doctor video call, floating headshots

stock2_woman_laptop_couch.png

Patient on couch with laptop, warm sunlit setting

stock3_woman_laptop_smiling.png

Woman smiling at laptop, cozy home environment

stock4_mom_child_telehealth.png

Mother with child, phone showing doctor video call

stock5_doctor_laptop_plants.png

Female doctor in white coat at laptop, HealthTap badge

stock6_mom_child_thermometer.png

Mother with child checking thermometer during video call

stock7_woman_phone_telehealth.png

Woman at table with phone showing doctor, coffee mug

portrait_patient_circle.png

Circular portrait — patient (testimonial avatar)

portrait_doctor_circle.png

Circular portrait — doctor (provider section)

Structure

Layout Patterns

Standard section patterns used across HealthTap landing pages.

Header — Floating Frosted Glass (Preferred)

Visit HealthTap.com

fixed top-0.75rem left-50% -translate-x-1/2 w-[calc(100%-2rem)] max-w-[1280px] bg-white/60 backdrop-blur-xl backdrop-saturate-150 rounded-full shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 h-14 px-6 z-50 Frosted glass: semi-transparent bg + heavy blur reveals content underneath Right side: "Visit HealthTap.com" text link (hidden on mobile) + primary CTA button Mobile: hide secondary link, show only logo + CTA Body: pt-20, html: scroll-padding-top: 5rem

Header — Classic (Alternative)

Visit HealthTap.com

Sticky top-0, bg-white/95 backdrop-blur-sm, border-b border-[#E8E0D8], h-16 Mobile: hide "Visit HealthTap.com" link, show only logo + CTA

Stats Row — Even Count (4)

-19.9%

YoY claims reduction

(-$2,760 PMPY)

57%

Care gaps closed

(90th percentile)

4.95/5

Post-visit rating

(NPS 80+)

65%

Return for >1 visit

(~2.3 visits/yr)

Desktop: grid-cols-4 (or cols matching count). Mobile: grid-cols-2, last odd item spans full width and centers.

Stats Row — Odd Count (3)

-19.9%

YoY claims reduction

(-$2,760 PMPY)

57%

Care gaps closed

(90th percentile)

4.95/5

Post-visit rating

(NPS 80+)

Odd count: 3-col on desktop, 2-col on mobile with last item spanning full width. bg-[#5B8FD9] (preferred) or bg-[#143565].

Content Card

Engage Unattributed Members

Turn "invisible" members into attributed, engaged patients with longitudinal PCP relationships.

~1 in 3 Americans has no PCP

White bg, rounded-xl, border border-[#E8E0D8], p-6 to p-8, icon in colored circle

Testimonial Card

“

HealthTap has been a star partner to collaborate with by every measure. They have worked diligently to seamlessly incorporate our technology into their workflows.

Carl Rathjen

VP Innovations & Partnerships, Clover Health

CTA Section

Let's Build Your Virtual Primary Care Strategy

Start with a focused pilot or deploy at scale.

healthtap.com

Footer

Developer Reference

CSS Variables & Font-Face

Copy-paste ready CSS for any HealthTap landing page project.

:root { --font-heading: 'Gilroy', sans-serif; --font-body: 'Noto Sans', sans-serif; --color-navy: #143565; --color-navy-dark: #0E2444; --color-blue: #4576C2; --color-tan: #BE9D7B; --color-tan-light: #F5EDE3; --color-cream: #FAF7F4; --color-body: #4A5568; --color-muted: #6B7A8D; --color-border: #E8E0D8; --color-green: #6EA642; --color-blue-light: #5B8FD9; } body { font-family: var(--font-body); color: var(--color-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } .container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }