HealHub

HealHub mockup preview
Click to expand

Friendly, colorful, community-health — care that connects everyone.

Primary Teal#0D9488
Secondary Orange#FB923C
Tertiary Purple#A855F7
Neutral Gray#6B7280
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayLexend · 40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headlineLexend · 30px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

subheadLexend · 22px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyLargeDM Sans · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyDM Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodySmallDM Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

captionDM Sans · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

overlineDM Sans · 11px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

codeFira Code · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

Friendly, colorful, community-health — care that connects everyone.

Components

Buttons

Inputs

Please enter a valid email

Elevation & Depth

Subtle
Medium
Large
Overlay
Colored

Do's & Don'ts

Do

use inclusive imagery and illustrations that represent diverse communities, ages, and abilities.
design clear, step-by-step scheduling flows that minimize the number of taps to book an appointment.
build layouts with multilingual support in mind; allow 30-40% text expansion for translations.
use the teal primary for positive health actions and the orange secondary for engagement and warmth.

Don't

bury appointment reminder settings; surface them prominently in user profiles and booking confirmations.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.9 KB
Downloads 0
clean healthcare light social warm

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/healhub and implement it in my code

Don't have the MCP? Install it here