Johns Hopkins Design System

# Johns Hopkins Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Johns Hopkins Medicine. "Johns Hopkins Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Johns Hopkins Design System
**Owner:** Johns Hopkins Medicine
**Official documentation:** https://brand.hopkinsmedicine.org/brand/design-standards
**Visual character:** Medical-institution authority: Heritage Blue with a Spirit Blue lift, Arnhem serifs for history, Gentona sans for wayfinding.

---

## Summary

Design system for Johns Hopkins' healthcare platforms.

_Confidence: low. This system publishes little token detail — values below are a conservative, partial reading. Brand standards rather than a public tokenized system; values are indicative._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Heritage Blue | `#002d72` | `--jhu-heritage-blue` | Primary brand color |
| Spirit Blue | `#68ace5` | `--jhu-spirit-blue` | Secondary accent |
| Text | `#31261d` | `--jhu-text` | Primary text (warm black) |
| White | `#ffffff` | `--jhu-white` | Page background |
| Light Gray | `#f2f2f2` | `--jhu-light-gray` | Subtle background |
| Gold Accent | `#f1c400` | `--jhu-gold` | Accent |

## Typography

- **Display:** Arnhem — weights 400, 700 — `Arnhem, Georgia, serif`
- **Body:** Gentona — weights 400, 600 — `Gentona, 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `38px` | `46px` |
| body | `16px` | `26px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Quick start (CSS)

```css
/* Johns Hopkins Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://brand.hopkinsmedicine.org/brand/design-standards */

:root {
  /* Color */
  --jhu-heritage-blue: #002d72; /* Primary brand color */
  --jhu-spirit-blue: #68ace5; /* Secondary accent */
  --jhu-text: #31261d; /* Primary text (warm black) */
  --jhu-white: #ffffff; /* Page background */
  --jhu-light-gray: #f2f2f2; /* Subtle background */
  --jhu-gold: #f1c400; /* Accent */

  /* Typography */
  --font-display: Arnhem, Georgia, serif;
  --font-body: Gentona, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-h1: 38px /* line-height 46px */;
  --text-body: 16px /* line-height 26px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  /* Radius */
  --radius-default: 0;
}
```

## Engineering profile

- **Source model:** Hybrid

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Johns Hopkins Design System by Johns Hopkins Medicine — Design system for Johns Hopkins' healthcare platforms. Character: Medical-institution authority: Heritage Blue with a Spirit Blue lift, Arnhem serifs for history, Gentona sans for wayfinding. Use a primary colour near #002d72, the typeface "Gentona" (or a close equivalent), corner radius around 0, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Johns Hopkins Design System documentation](https://brand.hopkinsmedicine.org/brand/design-standards)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/johns-hopkins-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._