WellPath

WellPath mockup preview
Click to expand

Warm, approachable, wellness-oriented — design that feels like a deep breath.

Primary Sage#7C9A6E
Secondary Lavender#B4A7D6
Tertiary Peach#FFCBA4
Neutral Warm Gray#A8A29E
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayNunito · 40px · Extra Bold

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

headlineNunito · 32px · Bold

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

subheadNunito · 22px · SemiBold

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

body LargePoppins · 18px · Regular

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

bodyPoppins · 16px · Regular

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

body SmallPoppins · 14px · Regular

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

captionPoppins · 12px · Medium

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

overlinePoppins · 11px · SemiBold

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

codeSource Code Pro · 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

Warm, approachable, wellness-oriented — design that feels like a deep breath.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Elevation & Depth

Subtle
Medium
Large
Overlay
Inner

Do's & Don'ts

Do

Use calming, supportive language (e.g., "Take your time" not "Hurry, complete now").
Ensure all color combinations meet WCAG AA contrast (4.5:1 for body text).
Use gentle animations (200-400ms ease) to create a soothing experience.
Provide ample white space between sections to reduce cognitive load.
Include optional breathing/pause animations where appropriate for mindfulness features.
Design empty states that feel warm and encouraging, not hollow.

Don't

Use alarming red (#E53E3E or similar) for non-critical states; use the soft error tone #C97A7A instead.
Use sharp, sudden transitions or jarring micro-interactions.
Display overwhelming data dumps; progressively disclose information.
Rely solely on color to convey meaning; always pair with icons or text labels.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.6 KB
Downloads 0
clean fitness healthcare light warm

Use with MCP

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

Don't have the MCP? Install it here