Health.mil Brand Design System Deep Dive

1. Brand Overview

Health.mil is the public-facing portal for the Military Health System (MHS). This isn’t a consumer wellness brand selling yoga mats—it’s the official site for a massive, highly structured healthcare network serving military personnel, their families, and retirees. The design is built for clarity, authority, and accessibility under serious operational constraints. Everything here has to work for users who might be checking it from a base hospital kiosk or a mobile device in the field.

The vibe: institutional but not cold. They lean on strong blues for trust and stability, white for cleanliness, and occasional bright accents to break monotony. No fluff—this is a site where someone comes to find policy documents, facility info, or healthcare guidance, and the design reflects that. Visual hierarchy is tight, typography is highly legible, and interactive states are clearly defined (even exaggerated) to meet accessibility guidelines.

Philosophy: Function over form, but still branded. The Military Health System seal is prominent, the palette is disciplined. Spacing follows an 8px mental grid, with occasional odd-ball fractional values creeping in (likely legacy or component-specific overrides). Buttons animate with scale changes on hover/focus—an unusual choice for a government site, but it works to signal interactivity.

Audience: Service members, healthcare professionals, policy makers, and the public. Accessibility is non-negotiable—contrast levels are high, link styles are obvious, and there’s no reliance on subtle color differences alone for states. The typography stack is utilitarian: Archivo Narrow with Arial Narrow/Arial fallback. This keeps text compact and readable across devices and resolutions.

Overall, Health.mil’s design system is a blend of military formality and practical UX. It’s built to be trusted, fast to parse, and impossible to misunderstand. I’d call it “authoritative clarity”—you know you’re on an official site within seconds, and you can spot every clickable element instantly.

2. Color System

2.1 Primary Colors

The primary brand color is #3060aa (rgb(48, 96, 170)), a mid-blue used in hero images, text highlights, and interactive elements. Blue here communicates trust, stability, and professionalism—a safe play for healthcare. Compared to civilian healthcare brands, it’s less teal (which often signals wellness) and more navy, aligning with military aesthetics.

Accent colors include #5dc1eb (light blue) for secondary emphasis (hero spot titles), and #ff9900 (orange) for urgent or high-visibility links. White (#ffffff) dominates as background and text color for clarity.

There’s also a functional red #790000 (rgb(121, 0, 0)) used in buttons, paired with a hover/focus state #006bb6 (rgb(0, 107, 182))—a strong blue shift that signals interaction without losing legibility.

2.2 Complete Palette

2.3 Color Relationships

Contrast is high across the board. White text on #3060aa or #790000 backgrounds easily meets WCAG AAA for large text and likely AA for smaller sizes. Black on white is the default for content; blue/orange accents are always paired with white or black for readability.

No dark mode is evident—this is a light-first design. The palette is small and controlled, meaning accessibility is easier to maintain. The hover/focus blues are darker than the base blue, reinforcing interaction states.

2.4 Usage Guide

• Primary Buttons: Default #790000 with white text. Hover/focus changes to #006bb6.
• Links: Several color schemes—white, primary blue, dark gray, orange, light blue—each with strong hover contrasts.
• Backgrounds: Always white or light neutral; no colored page backgrounds.
• Avoid: Pairing orange (#ff9900) with light blue (#5dc1eb)—low contrast, visually messy.
• Best combos: Primary blue (#3060aa) with white, dark red (#790000) with white, light blue (#5dc1eb) with black.

3. Typography

3.1 Font Families

Primary font: Archivo Narrow and Archivo Narrow Bold, with fallbacks to Arial Narrow and Arial. This is a condensed sans-serif—efficient for space-limited layouts, especially in navigation and headings. No Google or Adobe Fonts loading—likely self-hosted or OS-provided.

3.2 Type Scale

3.3 Hierarchy

They keep heading weights at 400—not heavier—relying on size, letter spacing, and uppercase transforms to signal hierarchy. This keeps the condensed font from feeling overly dense. Line heights are tight for headings (1.10–1.25), looser for body/link text (1.60) for readability. The condensed face allows more content per line without feeling cramped—critical for navigation-heavy layouts.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid mindset, but with fractional oddities.

4.2 Layout

Responsive breakpoints: from 400px up to 1920px (400, 440, 480, 500, 600, 650, 700, 750, 820, 850, 1000, 1100, 1180, 1300, 1320, 1500, 1800, 1920). This is a fine-grained approach—probably to fine-tune navigation and hero layouts.

No explicit max width given, but with breakpoints up to 1920px, desktop layouts likely stretch wide. Mobile nav toggles and collapsible submenus are part of the system.

5. Visual Elements

Border Radius System

Values:

• 0px 0px 6px — used for list items
• 0px 0px 0px 6px — mobile site search
• 0px 4px 4px 0px — submit sitewide search
• 0px 6px 0px 0px — headings
• 0px 0px 6px 6px — generic divs
• 4px 0px 0px 4px — inputs
• 6px — buttons, nav toggles, skip links
• 6px 6px 0px 0px — links
• 6px 0px 0px — spans
• 8px — dialogs
• 50% — circular buttons/icons

Rounded corners are selective—mostly on interactive elements. Structural containers stay square.

Shadows

High-contrast shadows used sparingly:

• rgba(0, 0, 0, 0.15) 0px 8px 22px 0px
• rgba(0, 0, 0, 0.5) 0px 10px 8px 0px
• Others with varying opacity and blur for insets and emphasis.

They’re not flat—shadows are visible on dialogs and hover states.

Borders

White borders dominate—often to separate items on dark backgrounds. Occasionally black or gray for dividers. Some odd widths (3px, 5px) for specific elements.

6. Components

6.1 Buttons

Default (Primary):

• Background: #790000
• Text: #ffffff
• Padding: 8px 20px
• Border-radius: 6px
• Border: none
• Font-size: 16px, weight: 400

Hover:

• Background: #006bb6
• Color: #ffffff
• Outline: transparent solid 4px
• Border: 1px solid #656567
• Transform: scale(1.25) — aggressive hover feedback

Active:

• Background: #bc243d

Focus:

• Background: #006bb6
• Border: 2px solid #790000
• Transform: scale(1.25)

6.2 Links

Multiple styles:

1. White text, underline; hover to black.
2. Primary blue (#3060aa), underline; hover to white.
3. Dark navy (#001c2f), no underline; hover to underline black.
4. Orange (#ff9900), no underline; hover to underline black.
5. Light blue (#5dc1eb), underline; hover to underline black.

States are consistent—hover always changes color and often toggles underline.

6.3 Forms

No text input styles extracted—likely defaults with light customizations. Inputs have 4px radius left corners, matching search fields.

6.4 Cards

Padding around 24px, shadows for elevation. No hover scale—shadows do the work.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-primary-blue: #3060aa;
  --color-light-blue: #5dc1eb;
  --color-orange: #ff9900;
  --color-dark-gray: #545456;
  --color-hover-blue: #005fcc;
  --color-black: #000000;
  --color-dark-red: #790000;
  --color-active-red: #bc243d;

  /* Typography */
  --font-archivo-narrow: 'Archivo Narrow', 'Arial Narrow', Arial;
  --font-archivo-narrow-bold: 'Archivo Narrow Bold', 'Arial Narrow', Arial;

  /* Spacing */
  --space-1_6: 1.6px;
  --space-2: 2px;
  --space-3_2: 3.2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-6_4: 6.4px;
  --space-8: 8px;
  --space-8_8: 8.8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-80: 79.6562px;
  --space-90: 90.2656px;
  --space-134: 134.031px;

  /* Border Radius */
  --radius-0_0_6: 0px 0px 6px;
  --radius-0_0_0_6: 0px 0px 0px 6px;
  --radius-0_4_4_0: 0px 4px 4px 0px;
  --radius-0_6_0_0: 0px 6px 0px 0px;
  --radius-0_0_6_6: 0px 0px 6px 6px;
  --radius-4_0_0_4: 4px 0px 0px 4px;
  --radius-6: 6px;
  --radius-6_6_0_0: 6px 6px 0px 0px;
  --radius-6_0_0: 6px 0px 0px;
  --radius-8: 8px;
  --radius-50: 50%;

  /* Shadows */
  --shadow-1: rgba(0, 0, 0, 0.15) 0px 8px 22px 0px;
  --shadow-2: rgba(0, 0, 0, 0.5) 0px 10px 8px 0px;
  --shadow-3: rgba(0, 0, 0, 0.25) 5px 5px 15px 0px;
  --shadow-4: rgba(0, 0, 0, 0.5) 4px 4px 20px 0px;
  --shadow-5: rgba(0, 0, 0, 0.6) 4px 4px 20px 0px;
  --shadow-6: rgb(84, 84, 86) 0px 0px 6px 0px;
  --shadow-7: rgb(172, 172, 172) 0px 0px 6px 0px;
  --shadow-8: rgb(46, 58, 79) 0px 0px 10px 0px inset;
  --shadow-9: rgba(0, 0, 0, 0.85) 4px 4px 20px 0px;
}

8. AI Coding Assistant Prompt

# Health.mil Design System Specification

You are a Health.mil design expert. Build UIs matching their visual language exactly.

## Brand Context
Military Health System’s public portal—design prioritizes clarity, authority, and accessibility. Uses condensed, legible typography, high-contrast colors, and clear interaction states. Audience includes service members, healthcare professionals, and the public.

## Color Palette
- White: #ffffff — Backgrounds, text
- Primary Blue: #3060aa — Hero images, headings, interactive elements
- Light Blue: #5dc1eb — Secondary highlights, hero spot titles
- Orange: #ff9900 — Highlighted links, urgent accents
- Dark Gray: #545456 — Secondary text, dividers
- Hover Blue: #005fcc — Hover/focus states for buttons
- Black: #000000 — Body text, hover link states
- Dark Red: #790000 — Primary button default
- Active Red: #bc243d — Button active state

## Typography
Font families:
- Headings: 'Archivo Narrow Bold', 'Arial Narrow', Arial
- Body/Links/Buttons: 'Archivo Narrow', 'Arial Narrow', Arial

Type sizes:
| Element   | Size | Weight | Line Height | Use |
|-----------|------|--------|-------------|-----|
| H1        | 28px | 400    | 1.10        | Page titles |
| H1        | 24px | 400    | 1.20        | Section titles |
| Link      | 20px | 400    | 1.60        | Navigation |
| Button    | 16px | 400    | 1.40        | CTAs |
| Caption   | 14px | 400    | 1.60        | Small labels |

## Spacing & Grid
Base: 8px grid.
Values: 4px, 6px, 8px, 9px, 10px, 12px, 15px, 16px, 20px, 24px, 28px, 32px, 80px, 90px, 134px.
Use multiples for padding, margins, gaps. Button padding: 8px vertical, 20px horizontal.

## Border Radius
- none: 0px — tables, square containers
- sm: 4px — inputs
- md: 6px — buttons, nav toggles
- lg: 8px — dialogs
- full: 50% — circular icons/buttons

## Shadows & Depth
Use provided rgba shadows for elevation. Example: rgba(0,0,0,0.15) 0px 8px 22px 0px for cards.

## Component Specifications

### Primary Button
Default:
- background: #790000
- color: #ffffff
- padding: 8px 20px
- border-radius: 6px
- font: Archivo Narrow, 16px, weight 400
Hover:
- background: #006bb6
- border: 1px solid #656567
- transform: scale(1.25)
Focus:
- same as hover, plus border: 2px solid #790000
Active:
- background: #bc243d

### Links
Style 1: White underline, hover to black.
Style 2: Blue underline, hover to white.
Style 3: Orange no underline, hover to underline black.

### Inputs
Border-radius: 4px left corners, white background, 1px border on focus.

### Cards
Padding: 24px, shadow: rgba(0,0,0,0.15) 0px 8px 22px 0px.

## Layout & Responsive Rules
Breakpoints: 400px–1920px, fine-grained adjustments for nav and hero.

## Interaction Rules
- Transition: 150ms ease for state changes
- Hover: color + underline changes
- Focus: clear outline or border changes

## DO
- Use only palette colors
- Maintain 8px grid
- Condensed font for all text
- High contrast for text
- Clear hover/focus states

## DON'T
- Add new colors
- Mix sharp and rounded corners in the same element
- Reduce contrast
- Remove hover/focus feedback

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #790000;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 6px;
  font-family: 'Archivo Narrow', 'Arial Narrow', Arial;
  font-size: 16px;
  font-weight: 400;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #006bb6;
  border: 1px solid #656567;
  transform: scale(1.25);
}
.btn-primary:focus {
  background: #006bb6;
  border: 2px solid #790000;
  transform: scale(1.25);
}
.btn-primary:active {
  background: #bc243d;
}
```

Card:
```css
.card {
  background: #ffffff;
  padding: 24px;
  border-radius: 6px;
  box-shadow: rgba(0,0,0,0.15) 0px 8px 22px 0px;
}
```

Input:
```css
.input {
  border-radius: 4px 0 0 4px;
  border: 1px solid #545456;
  padding: 8px;
  font-family: 'Archivo Narrow', 'Arial Narrow', Arial;
}
.input:focus {
  border-color: #3060aa;
  outline: none;
}
```

9. Summary

TL;DR: Health.mil’s design system is tight, formal, and functional. Blues and reds signal trust and urgency, condensed typography maximizes space, and interaction states are bold enough for any context. It’s military-grade clarity—nothing ambiguous, everything intentional.

Brand Keywords: official-authoritative, high-contrast, condensed-legible, military-formal, functional-accessible