# Healthy Together — Design System
> SaaS technology platform for government, education, and enterprise public health initiatives.
- **Canonical:** https://uiuxskills.com/library/healthy-together
- **Source:** https://www.healthytogether.co
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:15.058Z

---

---
version: alpha
name: Healthy Together
description: SaaS technology platform for government, education, and enterprise public health initiatives.
tone: Professional, authoritative, empathetic, and efficient.
color-scheme: dark
colors:
  primary: "#4541FE"
  surface: "#101722"
  surface-container: "#1A2230"
  on-surface: "#FFFFFF"
  secondary: "#F9F0FF"
  on-secondary: "#101722"
  error: "#FF3333"
  outline: "#C0C0C0"
  success: "#33FF57"
  focus-ring: "#4541FE"
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 92px
  display-md:
    fontFamily: Inter
    fontSize: 64px
  headline-lg:
    fontFamily: Inter
    fontSize: 48px
  headline-md:
    fontFamily: Inter
    fontSize: 32px
  body-md:
    fontFamily: Inter
    fontSize: 16px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
  label-md:
    fontFamily: Inter
    fontSize: 14px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 20px
  full: 16000px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#3531D1"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.on-surface}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.body-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFDADA"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.2)
  md: 0 4px 6px rgba(0,0,0,0.3)
  lg: 0 10px 15px rgba(0,0,0,0.4)
---

## Overview

Healthy Together projects a high-trust, modern aesthetic designed to replace legacy government interfaces. The visual language is professional, empathetic, and efficient, utilizing a dark-mode-first approach that emphasizes readability and clarity for complex public health initiatives.

## Colors

The color strategy relies on a high-contrast dark foundation to ensure accessibility and visual comfort. The palette is anchored by a vibrant primary accent, balanced by a neutral, deep-space background.

*   **Primary (#4541FE):** The core brand accent used for main CTAs and interactive highlights.
*   **Surface (#101722):** The primary background color for the entire site.
*   **Surface-container (inferred) (#1A2230):** A slightly lighter surface variant used to define cards and distinct content containers.
*   **On-surface (#FFFFFF):** The primary text color, providing high contrast against the dark background.
*   **Secondary (#F9F0FF):** A soft, light-toned secondary color for buttons and subtle UI highlights.
*   **On-secondary (#101722):** Text color for elements placed on the secondary background.
*   **Error (inferred) (#FF3333):** Semantic color for error states.
*   **Outline (inferred) (#C0C0C0):** Border and divider color for structural separation.
*   **Success (inferred) (#33FF57):** Semantic color for success states.
*   **Focus-ring (inferred) (#4541FE):** The standard indicator for keyboard focus states.

## Typography

The design uses the Inter typeface exclusively, relying on size and weight to build a clear, authoritative hierarchy.

*   **Display-lg (observed):** Hero headline size for maximum impact.
*   **Display-md (inferred):** Secondary headline size for major section titles.
*   **Headline-lg (inferred):** Standard section headers.
*   **Headline-md (inferred):** Sub-section headers.
*   **Body-md (observed):** Standard body text for paragraphs and descriptive content.
*   **Body-sm (inferred):** Small supporting text for captions or metadata.
*   **Label-md (inferred):** Button labels and UI controls.

## Layout

The layout is built on a 4px base unit, ensuring consistent rhythm and spacing across all viewports. The site utilizes a centered, max-width container to keep content focused.

*   **Grid & Spacing:** Use the `spacing` scale (xs: 4px to 2xl: 48px) to maintain vertical rhythm.
*   **Page Pattern:** The standard section order is: `nav` → `hero` → `social-proof` → `features` → `impact` → `testimonials` → `footer`.
*   **Hero Composition:** Centered, large-scale headline with a single primary CTA and a secondary CTA button below.
*   **Responsive Behaviour:** Mobile-first design; navigation collapses into a menu drawer on smaller viewports.

## Elevation & Depth

Elevation is used sparingly, relying on color contrast (`surface` vs `surface-container`) as the primary method for depth. When shadows are required, they are subtle and single-layered.

*   **Elevation.sm:** Small card lift.
*   **Elevation.md:** Standard dropdowns and popovers.
*   **Elevation.lg:** Modals and drawer overlays.

## Shapes

The design system uses a rounded corner philosophy to balance professional authority with approachability. 

Buttons utilize `{rounded.full}` to create a pill shape, which signals interactivity and modernity. Cards and containers use `{rounded.lg}` to soften their edges while maintaining a structured, enterprise-grade feel.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An action-oriented component using `{colors.primary}` as the background and `{typography.label-md}` for text. Use this for the single most important action on a page.

### Card
A container using `{colors.surface-container}` and `{rounded.lg}`. Use this to group related information or features; it provides the primary structural unit for the page.

### Input Field
A form control using `{colors.surface}` background and `{rounded.md}`. It should trigger the `{colors.focus-ring}` border color when active to ensure accessibility.

### Badge
A small label component using `{colors.secondary}` and `{typography.body-sm}`. Use these for status indicators or category tags.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for body text. |
| Apply `{typography.display-lg}` for hero headlines only. | Never use `{typography.body-sm}` for primary navigation. |
| Use `{rounded.full}` for all primary and secondary buttons. | Avoid sharp corners (0px) on buttons; always use `{rounded.full}`. |
| Maintain consistent `{spacing.md}` between card elements. | Do not mix too many font weights; stick to the hierarchy. |
| Use `{colors.surface-container}` for card backgrounds. | Avoid using `{colors.error}` for non-destructive actions. |
| Ensure all text on `{colors.surface}` meets contrast standards. | Do not exceed the max-width container for main content. |
| Use `{colors.outline}` for subtle dividers. | Do not use `{colors.secondary}` for primary action buttons. |
| Apply `{elevation.md}` for card hover states. | Avoid heavy, multi-layered shadows that clutter the UI. |

## Content Style

CTA labels are imperative and action-oriented (e.g., "Schedule a Demo"). They should be concise and clearly communicate the outcome of the click.

Headings are direct, benefit-focused, and authoritative. They avoid fluff, aiming to explain the value of the platform immediately to government stakeholders.

Copy density is kept low. Use short, scannable paragraphs and frequent headers to break up text. Bullet points are preferred over long blocks of prose to maintain a high-efficiency reading experience.

## Imagery & Icons

The brand uses a mixed treatment of high-quality photography, clean vector icons, and minimalist illustrations. Icons are stroke-based, rounded, and simple, maintaining a consistent line weight that aligns with the modern, tech-forward aesthetic. Photography should focus on human-centered, authentic moments that reflect the impact of the platform on real people.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Healthy Together, a professional, authoritative, and empathetic enterprise public health SaaS platform. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.headline-md}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or raw font sizes.
2. Use only the component variants defined under `components:`. Buttons always use `{rounded.full}`; cards always use `{rounded.lg}`; inputs always use `{rounded.md}`. Do not invent additional shapes or variants.
3. Follow the Elevation & Depth narrative: prefer `{colors.surface}` vs `{colors.surface-container}` contrast for depth first; apply `{elevation.sm}`, `{elevation.md}`, or `{elevation.lg}` only when the spec calls for shadow.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.primary}` for body text, or `{colors.secondary}` for a primary CTA), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values override the inferred spec values.

## Output contract

**Must:**
- Use named tokens for every color, type style, radius, spacing, and elevation decision.
- Include hover, focus, and disabled states for all interactive components where the spec defines them — including `button-primary-hover`, `input-field-focus`, and `link-hover`.
- Apply `{motion.duration-short}` / `{motion.easing-standard}` to state transitions.
- Keep CTA copy imperative and concise, matching the Content Style section.
- Ensure all text on `{colors.surface}` meets WCAG 4.5:1 contrast minimum.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values absent from the spec.
- Use generic utility defaults when a brand token exists.
- Apply `{typography.display-lg}` outside of hero headline contexts.
- Use `{colors.error}` or `{colors.success}` for non-semantic purposes.
- Add emoji, filler copy, or marketing language.
- Rewrite existing page copy, button labels, or headings, or alter navigation structure.

## When in doubt
- Ask the user before introducing any token not present in the spec.
- Prefer composing existing components over adding new tokens or variants.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for ambiguous text, default to `{colors.on-surface}`.
- For unspecified breakpoints, apply mobile-first layout with a single breakpoint at 768px; collapse navigation into a drawer below that threshold per the Layout section.
- Inferred tokens are approximations — flag them if precision matters for the output.