Cornell Design System Deep Dive

1. Brand Overview

Cornell’s site feels like a confident institution that knows its visual language. This is not a startup trying to look trendy — it’s a 150+ year-old Ivy League university putting its heritage into pixels. The vibe is academic gravitas with modern clarity. They lean on deep reds (#b31b1b, that signature Cornell tone), clean typography from the Freight family, and a grid system that’s tight and disciplined.

The audience is broad: prospective students, faculty, alumni, press. That means the brand has to balance trustworthiness with approachability. You can’t be too flashy — academia doesn’t do neon gradients. But you also can’t be boring, especially when competing with other Ivy League sites.

The overall philosophy: keep the core brand color visible in key actions and accents, use generous white space for legibility, and let typography carry the prestige. You’ll see the red in CTAs and in focus states. Blue (#006699) appears for secondary actions. Neutrals (#cccccc, #707070) handle backgrounds and text where hierarchy needs to drop.

A nice touch: most interactive elements have clear hover and focus states. Even buttons go bold with scale transforms on hover — something you wouldn’t expect from an academic site. It’s a little injection of energy without breaking the formal tone.

Odd choice: breakpoints at 690px, 1040px, and 1921px. That’s not your standard Bootstrap 768/992/1200. They’ve clearly tuned this to their content and imagery.

2. Color System

2.1 Primary Colors

Cornell’s primary brand color is #b31b1b (RGB 179, 27, 27). This is the same tone you’ll see in their logo and print materials. Psychologically, deep red signals tradition, authority, and passion. Against a white background, it’s bold and unmistakable. Competitors like Harvard use a similar deep crimson, Yale leans on blue — so Cornell’s red is a direct heritage marker.

Secondary strong player: #006699 — a medium-dark blue used for buttons and links. It balances the warmth of the red with cool professionalism.

2.2 Complete Palette

2.3 Color Relationships

They’re working with high-contrast pairs: red on white, white on blue, black on white. This hits WCAG AA easily for most text sizes. The one watch-out is light gray (#cccccc) on white — that’s low contrast and should be reserved for non-critical UI like dividers.

Dark mode? Not implemented. The palette is clearly optimized for light backgrounds. The blues and reds would need tweaking for a dark theme.

2.4 Usage Guide

• Do pair #b31b1b with white for maximum contrast.
• Do use #006699 for secondary buttons; it plays well with red in alternating sections.
• Avoid red text on blue backgrounds — poor legibility and brand clash.
• Avoid using light gray for text longer than a few words — accessibility risk.

3. Typography

3.1 Font Families

Cornell is all-in on the Freight type family — Freight Text Pro for serif contexts, Freight Sans Pro for sans-serif UI and headings. Both are Adobe Fonts, no Google Fonts here. This choice screams “paid license, no compromises.”

Fallbacks are the same family variants (freight-sans-pro, freight-text-pro), ensuring style consistency.

3.2 Type Scale

3.3 Hierarchy

Headings swing between big serif (Freight Text Pro) and compact sans (Freight Sans Pro). This gives them flexibility: serif for storytelling, sans for functional UI. The size scale is generous — 80px hero headers down to 11px captions. Line heights vary wildly; some headings are tight (0.90), others airy (3.25). This is a deliberate hierarchy: tight lines for impact, loose lines for dense lists.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Common values:

4.2 Layout

Breakpoints:

• 690px — mobile to small tablet
• 1040px — tablet to desktop
• 1921px — ultra-wide screens

This isn’t a standard 12-column grid spec, but with Vuetify in play, they’re likely using flex-based layouts.

5. Visual Elements

• Border Radius: Very few rounded corners. Values are 2px (tiny), 50px (pills), 80px (large pill/circle). Most buttons are square (0px).
• Shadows: Two main shadow styles:
  • rgba(0,0,0,0.65) hard lateral shadows — used for dramatic hover states.
  • rgba(232,232,232,0.75) 0px 2px — subtle dividers.
• Borders: 1px solid in light gray or semi-transparent white. Used instead of shadows for depth.

6. Components

6.1 Buttons

Search Button

• Default: bg #871414, white text, padding 1px 0, no radius, no border.
• Hover: bg rgba(0,0,0,0.3)
• Focus: bg #b31b1b, dotted outline #777

Prev Button

• Default: bg rgba(0,0,0,0.6), white text, 1px border rgba(255,255,255,0.3)
• Hover: same as above but bg rgba(0,0,0,0.3)

Blue CTA (btn btn-blue)

• Default: bg #006699, white text, padding 18px
• Hover: bg rgb(199,27,16), scale 1.1, border 3px solid #ccc
• Focus: bg rgba(255,255,255,0.125), box-shadow red ring.

Red CTA (btn btn-red)

• Default: transparent bg, red text and border (3px solid #b31b1b), padding 18px
• Hover: same hover as blue CTA.

White Campaign Button (btn btn-white-campaign)

• Default: semi-transparent black bg, white border, padding 18px 30px
• Hover: same hover style as others.

6.2 Links

Five variants:

• White text, underline default, no underline on hover.
• Blue text, no underline, turns white on hover.
• Black text, turns white on hover.
• Red text, bold, turns gray on hover.
• Light gray text, thin, turns white on hover.

6.3 Forms

Search input:

• Default: bg #871414, white text, no border, padding 0 10px.
• Focus: bg same, text black, border color #006699.

6.4 Cards

No explicit card component in data, but shadows suggest hover depth, not static.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-blue-medium: #006699;
  --color-black: #000000;
  --color-gray-light: #cccccc;
  --color-red-cornell: #b31b1b;
  --color-gray-70: #707070;
  --color-blue-bright: #0099e6;
  --color-gray-88: #e0e0e0;
  --color-blue-dark: #004466;
  --color-gray-106: #6a6a6a;
  --color-blue-deep: #005580;

  /* Typography */
  --font-freight-text-pro: "freight-text-pro", serif;
  --font-freight-sans-pro: "freight-sans-pro", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-pill: 50px;
  --radius-lg-pill: 80px;

  /* Shadows */
  --shadow-hard-sides: rgba(0,0,0,0.65) -10px 0px 0px 0px, rgba(0,0,0,0.65) 10px 0px 0px 0px;
  --shadow-subtle-bottom: rgba(232,232,232,0.75) 0px 2px 0px 0px;
}

8. AI Coding Assistant Prompt

# Cornell Design System Specification

System Prompt:
You are a Cornell design expert. Build UIs matching their visual language exactly.

Brand Context:
Cornell’s design language is academic, authoritative, and precise. It uses deep red as a heritage marker, balanced by professional blues and clean typography from the Freight family. Layouts follow an 8px grid with minimal rounded corners.

Color Palette:
- White: #ffffff — Backgrounds, text on dark
- Medium Blue: #006699 — Secondary buttons, links
- Black: #000000 — Body text, icons
- Light Gray: #cccccc — Borders, dividers
- Cornell Red: #b31b1b — Primary CTAs, focus rings
- Gray 70: #707070 — Secondary text
- Bright Blue: #0099e6 — Accent CTAs
- Gray 88: #e0e0e0 — Panel backgrounds
- Dark Blue: #004466 — Hover/focus states
- Gray 106: #6a6a6a — Subtle hover text
- Deep Blue: #005580 — Hover/focus states

Typography:
Fonts:
- Headings: "freight-text-pro", serif
- UI & body: "freight-sans-pro", sans-serif

Sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 80px | 400 | 1.38 | Hero titles |
| H1 | 56px | 700 | 0.90 | Section titles |
| H1 | 40px | 400 | 1.25 | Large serif headings |
| Body | 18px | 400 | 1.40 | Body text |
| Caption | 14px | 700 | — | Labels |

Spacing & Grid:
Base: 8px. Scale: 1px, 5px, 12px, 16px, 18px, 24px, 28px, 30px, 48px, 60px, 80px.
Use multiples for all component paddings and margins.

Border Radius:
- sm: 2px — small controls
- pill: 50px — pill buttons
- lg-pill: 80px — large circular UI

Shadows & Depth:
- Hard sides: rgba(0,0,0,0.65) -10px 0px, +10px 0px
- Subtle bottom: rgba(232,232,232,0.75) 0px 2px

Component Specifications:

Primary Button (Red):
Default: bg #b31b1b, color #fff, padding 18px, border 3px solid #b31b1b, radius 0px  
Hover: bg rgb(199,27,16), color #ccc, transform scale(1.1), border 3px solid #ccc  
Focus: bg rgba(255,255,255,0.125), box-shadow #b31b1b 0 0 0 5px

Secondary Button (Blue):
Default: bg #006699, color #fff, padding 18px, border none  
Hover: same hover as primary  
Focus: same focus as primary

Navigation Links:
White variant: underline default, no underline on hover  
Blue variant: no underline, turns white on hover

Input Fields (Search):
Default: bg #871414, color #fff, padding 0 10px, border none  
Focus: bg #871414, color #000, border-color #006699

Layout & Responsive Rules:
Breakpoints: 690px, 1040px, 1921px  
Page padding: multiples of 8px  
Grid gap: 24px for cards

Interaction Rules:
Transition: 150ms ease on hover/focus changes  
Focus indicators: dotted outline or red ring  
Scaling on hover: 1.1 for buttons

DO List:
- Use only palette colors
- Maintain 8px grid
- Use Freight fonts for all text
- Keep corners sharp unless pill style
- Apply hover transforms to interactive buttons
- Use clear focus states

DON'T List:
- Add unapproved colors
- Mix serif and sans in same heading
- Use shadows outside defined styles
- Round corners arbitrarily
- Skip focus indicators

Code Examples:

```css
.btn-red {
  background: transparent;
  color: #b31b1b;
  padding: 18px;
  border-radius: 0;
  border: 3px solid #b31b1b;
  font-weight: 700;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-red:hover {
  background: rgb(199,27,16);
  color: #ccc;
  transform: scale(1.1);
  border: 3px solid #ccc;
}
.btn-red:focus {
  background: rgba(255,255,255,0.125);
  box-shadow: #b31b1b 0 0 0 5px;
}

.input-search {
  background: #871414;
  color: #fff;
  border: none;
  padding: 0 10px;
}
.input-search:focus {
  color: #000;
  border-color: #006699;
}
```

9. Summary

TL;DR — Cornell’s design system is heritage-driven with deep red and disciplined typography, anchored on the Freight family. It’s academic but not static — hover states bring life, and the 8px grid keeps it tight.

Brand Keywords: heritage-academic, red-authority, typographic-precision, grid-disciplined, subtly-energetic