Health & Wellness

---
version: alpha
name: Health & Wellness
description: A calm, accessible health product design system focused on trust, readability, and low cognitive load.
colors:
  primary: "#0D7C66"
  primary-hover: "#0A6352"
  primary-light: "#E6F5F1"
  primary-dark: "#065445"
  background: "#FAFBFC"
  surface: "#FFFFFF"
  surface-warm: "#F7F5F2"
  border: "#E2E5E9"
  border-strong: "#CBD0D6"
  text-primary: "#1A202C"
  text-secondary: "#4A5568"
  text-muted: "#A0AEC0"
  success: "#2F855A"
  success-light: "#F0FFF4"
  warning: "#C05621"
  warning-light: "#FFFAF0"
  error: "#C53030"
  error-light: "#FFF5F5"
  info: "#2B6CB0"
  info-light: "#EBF8FF"
typography:
  h1:
    fontFamily: Plus Jakarta Sans
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.3px
  h2:
    fontFamily: Plus Jakarta Sans
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  h3:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0px
  h4:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  small:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
rounded:
  sm: 8px
  md: 12px
  full: 9999px
spacing:
  base: 4px
  space-1: 4px
  space-2: 8px
  space-3: 12px
  space-4: 16px
  space-5: 20px
  space-6: 24px
  space-8: 32px
  space-10: 40px
  space-12: 48px
  gutter: 24px
  page-margin-desktop: 32px
  page-margin-mobile: 16px
  max-content-width: 960px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px
    height: 48px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
  button-primary-active:
    backgroundColor: "{colors.primary-dark}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.text-primary}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.border-strong}"
    height: 48px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.border-strong}"
    padding: 12px
    height: 48px
  card-appointment:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.border}"
    padding: 20px
  card-medication:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.border}"
    padding: 20px
  alert-info:
    backgroundColor: "{colors.info-light}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.sm}"
    padding: 16px
  alert-warning:
    backgroundColor: "{colors.warning-light}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.sm}"
    padding: 16px
  alert-error:
    backgroundColor: "{colors.error-light}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.sm}"
    padding: 16px
  alert-success:
    backgroundColor: "{colors.success-light}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

## Brand & Style

Calm is the interface and trust is the outcome. This system targets telemedicine, patient portals, and wellness products where users may be stressed, unwell, or cognitively overloaded. The visual tone is clean, warm, and professional, inspired by products such as Headspace and One Medical.

Accessibility is foundational rather than additive. The experience should reduce anxiety through plain language, predictable interactions, and generous spacing. Copy is warm and direct, error states are non-blaming, and microcopy near sensitive fields should reassure users that their data is protected.

## Colors

The palette is built around a calming teal-green primary with soft clinical neutrals. Strong red is reserved for genuinely urgent issues, while most actionable reminders use warning orange to avoid unnecessary alarm.

- Primary (`#0D7C66`) communicates confidence and wellness for primary actions and active states.
- Neutrals keep long-form health content readable: cool-tinted page background, white surfaces, and low-noise borders.
- Semantic colors are explicit and functional: success for confirmation, warning for action needed, error for urgent issues, and info for guidance.
- No dark mode is defined in this system; readability in mixed environments is prioritized.

## Typography

Typography uses **Plus Jakarta Sans** for warmth and legibility, with **JetBrains Mono** reserved for IDs and medical record-like technical data in implementation.

- Body text minimum is `16px`, with `1.7` line-height for dense instructions and forms.
- Heading scale emphasizes clear hierarchy without high visual pressure.
- Copy must favor plain terms over jargon and always include units for dosage or measurements.
- Dates should be written in non-ambiguous long form (for example, "April 6, 2026").

## Layout & Spacing

The layout uses a 12-column grid with a constrained `960px` max content width so health information feels focused and not overwhelming.

- Page margins: `32px` desktop and `16px` mobile.
- Spacing uses a `4px` base scale with generous vertical rhythm.
- Prioritize one clear primary action per screen or section.
- Use progressive disclosure for secondary details to reduce cognitive load.
- Breakpoints: mobile `<640px`, tablet `640px-1024px`, desktop `>1024px`.

## Elevation & Depth

Depth is intentionally subtle to keep the interface calm.

- `XS`: `0 1px 3px rgba(0,0,0,0.04)` for resting cards.
- `SM`: `0 2px 8px rgba(0,0,0,0.06)` for hover surfaces and menus.
- `MD`: `0 4px 16px rgba(0,0,0,0.08)` for modals.

Use borders and tonal separation before stronger shadows; avoid dramatic layering that adds visual tension.

## Shapes

The shape language is soft and reassuring:

- Inputs and buttons use `8px` rounding.
- Cards use `12px` rounding.
- Fully pill-shaped badges use `9999px`.

Rounded corners should remain consistent across components to preserve familiarity and reduce cognitive friction.

## Components

### Buttons

Primary buttons use teal with white text, `48px` minimum height, and full-phrase labels such as "Book Appointment" or "Mark as Taken." Secondary buttons keep neutral text with outlined treatment. Icon-only buttons should be avoided for core health actions.

### Inputs

Inputs are white with strong but soft borders, visible labels above fields, and helper/error text beneath. Required fields should use explicit "(required)" text, and validation should trigger on blur with human-readable feedback.

### Cards

Appointment and medication cards use soft surfaces, subtle borders, and clear hierarchy for date/time, clinician or dosage context, and next action. Medication actions should remain obvious and full-width where appropriate.

### Alerts and Status

Alerts use left-accented semantic states (info, warning, error, success) with readable contrast and calm language. Error banners should communicate safety and next steps without exposing technical codes.

### Navigation and Accessibility Patterns

Top navigation is `64px` high with clear active state treatment. Across all components, enforce minimum `48px` targets, keyboard-visible focus rings, clear labels, and no hover-only interactions.

## Do's and Don'ts

### Do

- Use plain language around a 6th-grade reading level.
- Provide clear next steps after major actions.
- Include privacy reassurance near sensitive fields.
- Keep touch targets at least `48px` and support keyboard/screen reader flows.
- Use generous spacing and simple hierarchy in dense health contexts.

### Don't

- Don't use jargon without explanation.
- Don't use urgent red or flashing motion for non-emergency notifications.
- Don't use small text for important information.
- Don't time out long forms while users are completing them.
- Don't rely on icon-only controls for critical tasks.