# St. Jude Children's Research Hospital design system

> Captured from https://www.stjude.org/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/st-jude/). An independent analysis for reference: St. Jude Children's Research Hospital and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

St. Jude keeps a white page with black ink and uses #135cb0 blue for its care and research actions, saving #d11947 crimson for donations. One custom face, SJ Sans, runs 61.6px bold headlines and 15.2px body at a roomy 1.69 line height. Primary buttons are full pills, and a light #e6e6e6 band holds the action row.

- Theme: light
- Mood: hospital, blue, crimson, pill buttons, trustworthy
- Category: Nonprofit

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#e6e6e6` | Raised panels, bands and cards |
| Text | `#000000` | Primary ink, 21.0:1 on the background |
| Muted text | `#4d4d4d` | Supporting copy, 8.4:1 on the background |
| Accent | `#135cb0` | Primary actions |
| Border | `#135cb0` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#135cb0`, `#000000`, `#e6e6e6`, `#1a1a1a`, `#4d4d4d`, `#d11947`.

## Typography

- **SJ Sans**: display and body, 99% of the text. Use Figtree. SJ Sans is a custom face licensed to St. Jude. Figtree is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | SJ Sans | 61.6px | 700 | 1.17 | 0 |
| Heading | SJ Sans | 27.4px | 700 | 1.13 | 0 |
| Subheading | SJ Sans | 27.4px | 700 | 1.13 | 0 |
| Body | SJ Sans | 15.2px | 400 | 1.69 | 0 |
| Small | SJ Sans | 14px | 400 | 1.95 | 0 |

Sizes in use, largest first: 62px, 34px, 27px, 23px, 18px, 16px, 15px, 14px, 0px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 4px, 6px, 8px, 11px, 16px, 21px, 32px, 36px, 41px.

## Shape

Corner radii, smallest first: 4px, 8px, pill (9999px).

Shadows, most used first:

- `rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px`

## Components

### Primary button ("Refer a Patient")

- Fill: #135cb0
- Text: #ffffff, 16px at weight 700
- Border: none
- Corner: pill (9999px)
- Height: 48px, padding 0px 32px

### Secondary button ("Donate Now")

- Fill: #d11947
- Text: #ffffff, 16px at weight 700
- Border: none
- Corner: pill (9999px)
- Height: 48px, padding 0px 32px

### Card

- Fill: transparent
- Border: none
- Corner: 8px
- Shadow: `rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px`

## Do

- Split action colors by intent: blue for care and research, crimson for giving.
- Give body copy generous line height, near 1.7, for a calm medical read.
- Use full pill buttons with a heavy weight label.

## Don't

- Use the crimson anywhere except the donate actions.
- Tint the background: the page stays pure white with one grey band.
- Set headlines thin; they run at 700.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #e6e6e6;
  --color-text: #000000;
  --color-text-muted: #4d4d4d;
  --color-accent: #135cb0;
  --color-border: #135cb0;
  --font-display: "SJ Sans", "Figtree", system-ui, sans-serif;
  --text-display: 61.6px;
  --weight-display: 700;
  --font-heading: "SJ Sans", "Figtree", system-ui, sans-serif;
  --text-heading: 27.4px;
  --weight-heading: 700;
  --font-subheading: "SJ Sans", "Figtree", system-ui, sans-serif;
  --text-subheading: 27.4px;
  --weight-subheading: 700;
  --font-body: "SJ Sans", "Figtree", system-ui, sans-serif;
  --text-body: 15.2px;
  --weight-body: 400;
  --font-small: "SJ Sans", "Figtree", system-ui, sans-serif;
  --text-small: 14px;
  --weight-small: 400;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 11px;
  --space-5: 16px;
  --space-6: 21px;
  --space-7: 32px;
  --space-8: 36px;
  --space-9: 41px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.