# Humana — Design System
> A leading health insurance provider offering Medicare, dental, vision, and Medicaid plans with a focus on wellness and accessible care.
- **Canonical:** https://uiuxskills.com/library/humana
- **Source:** https://www.humana.com/
- **Category:** Healthcare
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 78%
- **License:** MIT
- **Last updated:** 2026-07-28T15:46:40.426Z

---

---
version: alpha
name: Humana
tagline: Live your best life with a Humana Medicare plan
description: >-
  Health insurance and Medicare plan provider focusing on accessible, warm, and trustworthy digital
  experiences.
tone: Warm, professional, accessible, and trustworthy.
color-scheme: light
colors:
  primary: "#1D4F76"
  secondary: "#EFF5E6"
  accent: "#5C9A1B"
  background: "#EFF5E6"
  surface: "#EFF5E6"
  surface-bright: "#FFFFFF"
  on-primary: "#FFFFFF"
  on-surface: "#3A3B3D"
  outline: "#D1D5DB"
  error: "#FF3D00"
  success: "#5C9A1B"
typography:
  display-lg:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 50px
    fontWeight: 700
    lineHeight: "1.2"
  display-md:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.25"
  headline-lg:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 28px
    fontWeight: 700
    lineHeight: "1.3"
  headline-md:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 24px
    fontWeight: 600
    lineHeight: "1.3"
  headline-sm:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 20px
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
  label-md:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 14px
    fontWeight: 600
    lineHeight: "1.2"
  label-sm:
    fontFamily: FS Humana, Calibri, sans-serif
    fontSize: 12px
    fontWeight: 600
    lineHeight: "1.2"
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  swatch-primary:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-background:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    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: 0px 1px 2px rgba(0, 0, 0, 0.1)
  md: 0px 4px 6px rgba(0, 0, 0, 0.1)
  lg: 0px 10px 15px rgba(0, 0, 0, 0.1)
---

## Overview

Humana's visual identity focuses on warmth, accessibility, and professional trust, catering heavily to seniors and individuals seeking health insurance. The interface pairs soft, health-evoking green tones with highly legible typography to project vitality, security, and clarity. The overall experience is designed to feel welcoming and easy to navigate, reducing cognitive load for users making critical healthcare decisions.

## Colors

The color palette relies on natural, calming greens and deep, authoritative blues to balance health-oriented vitality with corporate security. High-contrast pairings are strictly maintained to ensure the interface meets strict accessibility standards for older demographics.

* `{colors.primary}` (#1D4F76): Deep trust blue used for corporate branding, links, and focused interactive states.
* `{colors.secondary}` (#EFF5E6): Soft light green used as a gentle background and surface tint to group related content.
* `{colors.accent}` (#5C9A1B): Vibrant green used for primary call-to-actions, branding, and success states.
* `{colors.background}` (#EFF5E6): The primary background color of the main hero and content sections.
* `{colors.surface}` (#EFF5E6): Soft green surface container for cards and content blocks.
* `{colors.surface-bright}` (inferred) (#FFFFFF): Pure white surface for high-contrast content cards and input fields.
* `{colors.on-primary}` (inferred) (#FFFFFF): High-contrast white text used on primary accent backgrounds.
* `{colors.on-surface}` (#3A3B3D): Dark grey text used for body copy to ensure high readability and accessibility.
* `{colors.outline}` (inferred) (#D1D5DB): Light grey used for borders, dividers, and subtle structural lines.
* `{colors.error}` (#FF3D00): Vibrant red used for error states, alerts, and critical notifications.
* `{colors.success}` (inferred) (#5C9A1B): Vibrant green used for success badges and positive feedback.

## Typography

The typography system relies on FS Humana (with Calibri as a fallback) to deliver clean, highly legible sans-serif letterforms. Generous line-heights and clear scale steps are prioritized to accommodate users with visual impairments.

* `{typography.display-lg}`: Large display heading used exclusively for main hero statements.
* `{typography.display-md}`: Medium display heading used for secondary section titles.
* `{typography.headline-lg}` (inferred): Large headline for content blocks and card titles.
* `{typography.headline-md}` (inferred): Medium headline for standard sub-sections.
* `{typography.headline-sm}` (inferred): Small headline for minor cards and group titles.
* `{typography.body-md}`: Standard body copy size for optimal readability.
* `{typography.body-sm}` (inferred): Smaller body copy for secondary descriptions and legal disclaimers.
* `{typography.label-md}` (inferred): Medium label size for buttons and form labels.
* `{typography.label-sm}` (inferred): Small label size for badges and micro-copy.

## Layout

* **Grid & Spacing:** Layouts use a structured, accessible grid with a standard max-width container (typically 1200px) and generous padding to prevent crowding. Spacing relies on an 8px base unit, with standard margins utilizing `{spacing.xl}` and `{spacing.2xl}` to separate distinct sections.
* **Section Order:** Pages follow a top-to-bottom flow of nav → hero → features → cta-section → footer.
* **Hero Pattern:** Features an asymmetric hero composition with a soft green background (`{colors.background}`) on the left containing the headline and primary CTA, and a large, rounded-corner family photograph on the right.
* **Responsive Behavior:** Multi-column grids collapse into single-column stacks on smaller viewports to accommodate older users, paired with a mobile-friendly navigation drawer.

## Elevation & Depth

Depth is conveyed primarily through flat, high-contrast containers and color blocks rather than heavy shadows, keeping the interface clean and legible. The elevation system uses subtle, single-layer shadows across three levels, all of which are visually inferred:

* `elevation.sm`: Used for subtle card lift and interactive hover states.
* `elevation.md`: Applied to dropdown menus, popovers, and navigation elements.
* `elevation.lg`: Reserved for modal overlays and drawer components.

## Shapes

The brand employs a deliberate mix of sharp and organic shapes to balance professional structure with a friendly, welcoming aesthetic. Standard interactive components like input fields, secondary buttons, and small badges use sharp corners with `{rounded.sm}` or `{rounded.md}` to maintain a clean, enterprise-grade layout.

In contrast, primary call-to-action buttons utilize `{rounded.full}` to create friendly, approachable touch targets. Large imagery containers and content blocks feature soft, organic corners with `{rounded.xl}` to make the visual experience feel warm and non-threatening.

## 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
The primary call-to-action button is a fully rounded pill using `{rounded.full}` with a background of `{colors.accent}` and text in `{colors.on-primary}` styled with `{typography.label-md}`. It is used exclusively for the main, high-priority user actions on a page, such as plan exploration or enrollment.

### badge-error
This small badge uses `{colors.error}` as its background, `{rounded.sm}` corners, and `{typography.label-sm}` for text. Use this component sparingly to highlight critical warnings, system errors, or urgent notifications.

### badge-success
A status indicator featuring `{colors.success}` as its background, `{rounded.sm}` corners, and `{typography.label-sm}` text. Use this to indicate positive states, successful form submissions, or active, verified plan statuses.

### card-default
A standard content container featuring a background of `{colors.surface}`, text in `{colors.on-surface}`, and `{rounded.md}` corners with `{spacing.md}` padding. Use this to group related informational content or secondary features on a soft green background.

### card-bright
A high-contrast content container utilizing a background of `{colors.surface-bright}`, text in `{colors.on-surface}`, and `{rounded.md}` corners with `{spacing.md}` padding. Use this for interactive elements, input forms, or cards that need to stand out against a `{colors.background}` canvas.

### divider
A thin structural line with a height of 1px and a background of `{colors.outline}`. Use this component to separate distinct content blocks or list items within a single container to maintain clear visual hierarchy.

### button-secondary
An interactive element styled with `{typography.label-md}`, a background of `{colors.secondary}`, and `{rounded.md}` corners with `{spacing.sm}` vertical and `{spacing.md}` horizontal padding. Use this for secondary actions, alternative choices, or navigation links that do not require the visual weight of `{button-primary}`.

### swatch-primary
A small visual block of `{colors.primary}` with `{rounded.sm}` corners and a fixed size of 32px. Use this in design systems, color pickers, or theme selectors to represent the brand's primary corporate color.

### swatch-background
A visual block of `{colors.background}` with `{rounded.sm}` corners and a fixed size of 32px. Use this within documentation or theme settings to represent the default canvas color.

### swatch-on-surface
A visual block of `{colors.on-surface}` with `{rounded.sm}` corners and a fixed size of 32px. Use this in documentation or theme settings to represent the primary text and high-contrast icon color.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.accent}` for all primary call-to-action buttons like `{button-primary}`. | Never use `{colors.primary}` for primary action buttons, reserving it for links and focus states. |
| Ensure body text uses `{colors.on-surface}` on light backgrounds to maintain high accessibility contrast. | Do not apply heavy shadows like `{elevation.lg}` to standard `{card-default}` components; keep elevation subtle. |
| Apply `{rounded.full}` to `{button-primary}` components to maintain the friendly, organic brand aesthetic. | Do not mix sharp corners on `{button-primary}` components; always avoid `{rounded.sm}` for primary CTAs. |
| Use `{colors.secondary}` as a soft background tint to group related content sections. | Do not use `{colors.primary}` as a full-screen background color, which causes high visual strain. |
| Use `{typography.display-lg}` exclusively for main hero headings. | Avoid using `{typography.body-sm}` for critical informational copy to ensure readability for seniors. |
| Separate distinct content blocks with a `{divider}` using `{colors.outline}` to maintain structure. | Never use `{colors.error}` for non-critical decorative elements or standard badges. |
| Use `{card-bright}` with `{colors.surface-bright}` when placing interactive forms over a `{colors.background}` canvas. | Do not stack multiple content blocks without clear separation using `{spacing.xl}` or a `{divider}`. |
| Use `{typography.body-md}` for primary body copy to ensure optimal readability. | Do not use `{typography.label-sm}` for long-form body text, reserving it only for badges and labels. |

## Content Style

CTA labels must be action-oriented, clear, and direct. Use imperative verbs such as "Explore", "Find", "Create", and "Learn" to guide the user without ambiguity. Keep button copy concise and focused on the immediate next step.

Headings must maintain an empathetic, clear, and reassuring tone. Phrasing should focus on living a healthy life and making insurance easy to understand, avoiding complex industry jargon or overly technical terms.

Copy density should remain low to medium. Utilize short paragraphs, bullet points, and clear hierarchical headings to ensure high readability and scannability, particularly for senior demographics.

## Imagery & Icons

Imagery must be warm, authentic, and photographic, featuring diverse families and seniors captured in bright, natural lighting. Avoid sterile studio shots or overly stylized graphics. Photos should be paired with organic leaf-pattern overlays and housed in soft-curved containers utilizing `{rounded.xl}` to reinforce the welcoming, human-centric aesthetic of the brand.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Humana, a warm, trustworthy, and highly accessible enterprise health insurance brand serving seniors. 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}`, `{spacing.lg}`, `{rounded.full}` — never hardcode hex values, pixel sizes, or font stacks.
2. Restrict components to the defined list: `button-primary`, `button-secondary`, `card-default`, `card-bright`, `badge-error`, `badge-success`, `divider`, and swatches. Do not invent variants.
3. Follow the Shapes notes: `{rounded.full}` on `button-primary`, `{rounded.sm}` on inputs and `button-secondary`, `{rounded.xl}` on large image containers.
4. Consult the Do's and Don'ts as authoritative rules. If a user request conflicts — for example, asking for a sharp-cornered primary button or using `{colors.primary}` as a CTA background — surface the conflict explicitly before proceeding.
5. Apply the Layout notes: max-width container of 1200px, generous padding, multi-column grids that collapse to single-column on mobile.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, and typography decision.
- Render `button-primary` with `{colors.accent}` background, `{colors.on-primary}` label, and `{rounded.full}` radius.
- Cover hover, focus, and disabled states for all interactive components where the spec defines them; use `{colors.primary}` for focus rings.
- Use `{colors.on-surface}` for all body copy on light backgrounds; maintain minimum 4.5:1 contrast.
- Separate content blocks with a `{divider}` styled in `{colors.outline}`.
- Apply `{typography.display-lg}` only to main hero headings.
- Match CTA copy style: imperative verbs (Explore, Find, Learn), short phrasing.

**Must NOT:**
- Use `{colors.primary}` as a button background.
- Invent colors, radii, or type scales absent from the spec.
- Use generic utility defaults when a brand token exists.
- Apply heavy shadows to cards; keep elevation subtle.
- Use `{typography.body-sm}` for critical informational copy.
- Rewrite, replace, or invent page copy, headings, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- Ask the user before introducing any value not defined in the spec.
- Prefer composing existing components over creating new tokens.
- For ambiguous backgrounds, default to `{colors.surface}` for grouped sections and `{colors.surface-bright}` for high-contrast cards.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px per the Layout notes.
- Tokens marked "(inferred)" in spec prose are approximations; if an authoritative theme file exists, it takes precedence.