Yale Design System

# Yale 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 Yale University. "Yale 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:** Yale Design System
**Owner:** Yale University
**Official documentation:** https://yaleidentity.yale.edu/
**Visual character:** Scholarly Ivy restraint: one authoritative Yale Blue, serif YaleNew headlines over the Mallory sans, and centuries of brand equity worn lightly.

---

## Summary

Design system for Yale University's digital platforms.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Yale publishes identity guidance, not a tokenized product system; scale values are indicative._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Yale Blue | `#00356b` | `--yale-blue` | Primary brand color |
| Medium Blue | `#286dc0` | `--yale-medium-blue` | Links and accents |
| Text Gray | `#4a4a4a` | `--yale-text` | Primary text |
| White | `#ffffff` | `--yale-white` | Page background |
| Light Gray | `#f9f9f9` | `--yale-light-gray` | Alternate sections |
| Border Gray | `#dddddd` | `--yale-border` | Hairlines |
| Accent Green | `#5f712d` | `--yale-green` | Secondary accent |

## Typography

- **Display:** YaleNew — weights 400, 700 — `YaleNew, Georgia, 'Times New Roman', serif`
- **Body:** Mallory — weights 400, 500, 700 — `Mallory, 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `42px` | `50px` |
| h2 | `30px` | `38px` |
| h3 | `22px` | `30px` |
| body | `17px` | `28px` |

## Spacing

Base unit: `8px`

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

## Corner radius

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

## Quick start (CSS)

```css
/* Yale Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://yaleidentity.yale.edu/ */

:root {
  /* Color */
  --yale-blue: #00356b; /* Primary brand color */
  --yale-medium-blue: #286dc0; /* Links and accents */
  --yale-text: #4a4a4a; /* Primary text */
  --yale-white: #ffffff; /* Page background */
  --yale-light-gray: #f9f9f9; /* Alternate sections */
  --yale-border: #dddddd; /* Hairlines */
  --yale-green: #5f712d; /* Secondary accent */

  /* Typography */
  --font-display: YaleNew, Georgia, 'Times New Roman', serif;
  --font-body: Mallory, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-h1: 42px /* line-height 50px */;
  --text-h2: 30px /* line-height 38px */;
  --text-h3: 22px /* line-height 30px */;
  --text-body: 17px /* line-height 28px */;

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

  /* 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 Yale Design System by Yale University — Design system for Yale University's digital platforms. Character: Scholarly Ivy restraint: one authoritative Yale Blue, serif YaleNew headlines over the Mallory sans, and centuries of brand equity worn lightly. Use a primary colour near #00356b, the typeface "Mallory" (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

- [Yale Design System documentation](https://yaleidentity.yale.edu/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/yale-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._