Stanford Brand Design System Deep Dive

Reverse-engineered from stanford.edu
Extraction date: 2025-12-13

1. Brand Overview

Stanford’s website is exactly what you’d expect from an Ivy-level institution: refined, serious, and quietly authoritative. It’s not chasing trends. It’s not trying to be playful. This is a brand that knows its place in the cultural hierarchy, and its design choices reflect that—controlled typography, muted color palette, minimal ornamentation.

The vibe is “heritage meets modern utility.” You’ll see deep reds that nod to Stanford's cardinal identity, earthy neutrals that feel academic and timeless, and typography that’s humanist but clean (Source Sans Pro). Function comes first: navigation is clear, buttons are understated, and the layout works across devices without fuss.

They’re using Bootstrap as the framework—so there’s a grid, predictable breakpoints, and utility classes—but it’s been customized enough to feel “Stanford,” not “Bootstrap default.” Font Awesome is in play for icons. The site reads as a mature, institutional system rather than a marketing-heavy or startup-style experience.

One thing that stands out: they avoid overbranding. You won’t see the cardinal red plastered everywhere—it’s used strategically, in small doses, so it retains impact. The neutrals do the heavy lifting day-to-day. This restraint is rare; most brands oversaturate their primary color. Stanford doesn’t need to shout.

Audience-wise, it’s built for prospective students, faculty, alumni, and researchers—people who value clarity over gimmicks. The design language says: “We are established. We are serious. We will be here in 100 years.”

2. Color System

2.1 Primary Colors

The main brand color here is #8c1515, a deep cardinal red. This is Stanford’s classic identity color. It’s rich, formal, and carries the weight of tradition. Psychologically, deep reds convey confidence, seriousness, and authority. In higher ed, Harvard, Oxford, and Stanford all use variations of this to signal prestige.

Stanford’s twist: they barely use it. It shows up in small accents (active button text, some headings), not as a background wash. This keeps it special and avoids fatigue.

2.2 Complete Palette

2.3 Color Relationships

This palette is low-contrast by modern WCAG standards in some cases. For example, #d5d0c0 (button background) with #5f574f (button text) is borderline for small text sizes—it’s fine for large UI labels but may fail AA for small fonts.

The cardinal reds are high contrast against light backgrounds, but they’re rarely used for text on light surfaces (smart—avoids eye strain).

There’s no dark mode here; the palette is built for light backgrounds. Inverting these colors wouldn’t work without rebalancing contrast.

2.4 Usage Guide

• Works well: Cardinal red (#8c1515) as accent on neutral beige backgrounds. High visual impact, heritage feel.
• Avoid: Neutral light (#e3dfd5) text on beige—too little contrast.
• Safe combos: Text black (#2e2d29) on light neutral (#e3dfd5); deep neutral (#5f574f) on beige (#d5d0c0).
• Danger zone: Hover browns are subtle—don’t use as standalone text colors. They’re meant for interactive feedback, not static content.

3. Typography

3.1 Font Families

Stanford uses Source Sans Pro across the board, with Arial as the fallback. This is a humanist sans—legible, approachable, but still formal enough for academia. No serif here, which is a notable choice—many universities lean on serifs for tradition. Going sans keeps the site modern.

No Google Fonts import detected here (likely self-hosted). No variable font usage.

3.2 Type Scale

3.3 Hierarchy

The big jump from 45px H1 to 20px subheading is stark—it creates clear visual separation. The rest of the scale sits tightly between 13–16px for functional text (links, captions, buttons). This keeps UI elements compact and legible.

Line heights are tight for headings (1.10) and more open for body/link text (1.4–1.6), which improves readability without feeling airy.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Most values are multiples: 3px, 4px, 5px, 5.6px, 8px, 10px, etc.

4.2 Layout

Breakpoints:

• 480px
• 767px / 768px
• 991px / 992px
• 1199px / 1200px

Bootstrap grid, so expect .container max-widths at these breakpoints. No unusual responsive behavior—classic mobile-first scaling.

5. Visual Elements

• Border Radius: 4px for buttons. That’s it. No other radii recorded. This is a flat, minimal corner system—slightly softened but not pill-shaped.
• Shadows: Two inset shadows for subtle depth:
  • rgba(0,0,0,0.2) 0px 4px 8px -8px inset
  • rgba(0,0,0,0.2) 0px 4px 8px -2px inset
    Mostly for input or container depth, not for cards.
• Borders: 1px solid rgb(213, 208, 192) used for dividers (hr).

6. Components

6.1 Buttons

Only one defined variant: .btn btn-u btn-block.

• Default:

  • Background: #d5d0c0
  • Text: #5f574f
  • Padding: 8px 13px
  • Border radius: 4px
  • Border: none
  • No shadow
  • Font: 15px, weight 400

• Hover:

  • Background: rgb(63, 60, 48) (~#3f3c30)
  • Text: #2e2d29
  • Border: 1px solid #dddddd
  • Opacity: 0.8

• Active:

  • Background: #4d4a3b
  • Text: #820000

• Focus:

  • Background: #4d4a3b
  • Text: #ffffff
  • Outline: #0098db solid 2px
  • Box-shadow: rgba(0,0,0,0.075) inset + #ce8483 glow
  • Border: 1px solid #dddddd
  • Opacity: 0.9

6.2 Links

Three link styles:

1. Dark text (#2e2d29), underline always.
2. Neutral dark (#5f574f), no underline default, underline on hover.
3. Neutral light (#e3dfd5), no underline default, underline on hover.

6.3 Forms

No input styles in data—likely default Bootstrap with minimal overrides.

6.4 Cards

No dedicated card component in extracted data—probably using Bootstrap panels or plain divs with spacing.

7. Design Tokens

:root {
  /* Colors */
  --color-neutral-dark: #5f574f;
  --color-neutral-light: #e3dfd5;
  --color-cardinal-deep: #820000;
  --color-cardinal-classic: #8c1515;
  --color-text-black: #2e2d29;
  --color-neutral-beige: #d5d0c0;
  --color-hover-brown-1: #644a43;
  --color-hover-brown-2: #634c45;
  --color-hover-brown-3: #644c45;

  /* Typography */
  --font-family-base: "Source Sans Pro", Arial;
  --font-size-h1: 45.0001px;
  --font-size-lg: 20px;
  --font-size-md: 16px;
  --font-size-button: 15px;
  --font-size-sm: 14px;
  --font-size-xs: 13px;
  --line-height-tight: 1.10;
  --line-height-normal: 1.40;
  --line-height-loose: 1.60;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-5-6: 5.6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-30: 30px;
  --space-50: 50px;
  --space-430: 430px;

  /* Radius */
  --radius-sm: 4px;

  /* Shadows */
  --shadow-inset-1: rgba(0, 0, 0, 0.2) 0px 4px 8px -8px inset;
  --shadow-inset-2: rgba(0, 0, 0, 0.2) 0px 4px 8px -2px inset;
}

8. AI Coding Assistant Prompt

# Stanford Design System Specification

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

## Brand Context
Stanford's design language is restrained, academic, and rooted in heritage. Colors are muted neutrals with strategic cardinal red accents. Typography is modern sans-serif for clarity and accessibility.

## Color Palette
- Neutral Dark: #5f574f — Link text, default button text
- Neutral Light: #e3dfd5 — Inverted text, subtle backgrounds
- Cardinal Deep: #820000 — Active button text, key accents
- Cardinal Classic: #8c1515 — Heritage accents
- Text Black: #2e2d29 — Default body text
- Neutral Beige: #d5d0c0 — Button background
- Hover Brown 1: #644a43 — Hover/focus background
- Hover Brown 2: #634c45 — Alternate hover tone
- Hover Brown 3: #644c45 — Slight hover variation

## Typography
Font Family: "Source Sans Pro", Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 45.0001px | 300 | 1.10 | Page titles |
| Subheading | 20px | 400 | 1.60 | Section headings |
| Subheading Light | 20px | 300 | 1.40 | Secondary headings |
| Link Large | 20px | 300 | 1.40 | Main nav links |
| Link Medium | 16px | 400 | 1.00 | UI links |
| Button | 15px | 400 | 1.43 | CTAs |
| Link Small | 14px | 400 | 1.60 | Body links |
| Caption | 14px | 400 | 1.60 | Notes, metadata |
| Caption Bold | 14px | 600 | 1.00 | Uppercase labels |
| Link XS | 13px | 400 | 1.00 | Minor links |
| Caption XS | 13px | 400 | 1.50 | Fine print |

## Spacing & Grid
Base: 8px grid
Scale: 3px, 4px, 5px, 5.6px, 8px, 10px, 11px, 12px, 18px, 20px, 22px, 30px, 50px, 430px

## Border Radius
- sm: 4px — Buttons

## Shadows & Depth
- inset-1: rgba(0,0,0,0.2) 0px 4px 8px -8px inset
- inset-2: rgba(0,0,0,0.2) 0px 4px 8px -2px inset

## Component Specifications

### Primary Button
Default: background #d5d0c0, color #5f574f, padding 8px 13px, radius 4px, no border  
Hover: background #3f3c30, color #2e2d29, border 1px solid #dddddd, opacity 0.8  
Active: background #4d4a3b, color #820000  
Focus: background #4d4a3b, color #ffffff, outline #0098db solid 2px, box-shadow rgba(0,0,0,0.075) inset, #ce8483 glow, border 1px solid #dddddd, opacity 0.9  

### Navigation Links
Style 1: #2e2d29, underline always  
Style 2: #5f574f, no underline default, underline hover  
Style 3: #e3dfd5, no underline default, underline hover  

## Layout & Responsive Rules
Breakpoints: 480px, 767px, 768px, 991px, 992px, 1199px, 1200px  
Bootstrap grid system  

## Interaction Rules
Transitions: 150ms ease for state changes  
Focus indicators: 2px solid outline in #0098db  
Hover states: subtle background darkening

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid spacing
- Keep button radius at 4px
- Use Source Sans Pro for all text
- Keep cardinal red accents minimal
- Use underline for important links

## DON'T List
- Add new colors
- Use shadows outside specified inset types
- Round corners beyond 4px
- Overuse cardinal red
- Remove link hover underline

## Code Examples

### Button
```css
.btn-primary {
  background: #d5d0c0;
  color: #5f574f;
  padding: 8px 13px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 15px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #3f3c30;
  color: #2e2d29;
  border: 1px solid #dddddd;
  opacity: 0.8;
}
.btn-primary:focus {
  background: #4d4a3b;
  color: #ffffff;
  outline: 2px solid #0098db;
  box-shadow: rgba(0,0,0,0.075) 0px 1px 1px inset, #ce8483 0px 0px 6px;
}

Card

.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 20px;
}

Input

.input {
  border: 1px solid #d5d0c0;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  border-color: #0098db;
  outline: none;
}

---

## 9. Summary  

**TL;DR**: Stanford’s design system is restrained, neutral-heavy, with cardinal red used sparingly for heritage impact. Typography is modern sans-serif, spacing is on an 8px grid, and components are understated but precise.  

**Brand Keywords**: heritage-modern, neutral-academic, restrained-UI, bootstrap-customized, cardinal-accent