University of Michigan (Umich) Design System Deep Dive

1. Brand Overview

Landing on umich.edu hits you with institutional confidence. This is a brand that's been around for over 200 years, and the design reflects that — disciplined, functional, and unmistakably tied to its heritage. The University of Michigan leans heavily into its primary identity assets: the maize and blue color scheme, clean condensed typography, and minimal ornamentation.

The vibe is academic and authoritative. It’s not trying to be trendy or overly "brand-y" in the startup sense. Everything is in service of communicating information clearly. The UI principles here seem to be:

• Identity anchors: The maize (#FFCB0B) and deep blue (#002C5A) appear where identity is crucial — hero areas, key nav elements, call-outs.
• Legibility first: The typography choices (mostly Roboto Condensed and Roboto, with Georgia as a serif fallback for certain elements) prioritize readability across devices, with plenty of uppercase headings for section clarity.
• Consistency in rhythm: Spacing decisions stick close to a small, predictable scale, preventing layout drift and maintaining alignment across breakpoints.

This is a design language for a complex, content-heavy institution. There's no indulgence in decorative flourishes — borders and rounded corners are small and neutral, shadows are rare (only one shadow style in the whole data), and link states are consistent across contexts.

Target audience here: prospective and current students, faculty, researchers, alumni. That means the layout must work equally well for quick navigation and deep reading. The color palette supports clarity over emotion. Roboto Condensed gives an efficient, space-saving feel, which makes sense for dense navigation menus and multi-column content.

They nailed institutional consistency. You can look at any component on the page and know it belongs to one cohesive system.

2. Color System

2.1 Primary Colors

The big one: Maize (#FFCB0B). It’s bold, bright, and deeply tied to Michigan's identity. Psychologically, yellow communicates optimism and attention. In higher ed it can feel warm but also urgent — it's a "pay attention" color. Compared to competitors (Harvard's crimson, Yale's dark blue), Michigan’s yellow is more extroverted.

Supporting it: Deep Blue (#002C5A). This is a trust color — think authority, knowledge, and institution. Blue balances the boldness of maize with seriousness.

2.2 Complete Palette

2.3 Color Relationships

Maize (#FFCB0B) and Deep Blue (#002C5A) are high-contrast — great for banners and titles. Accessibility-wise, maize on white is borderline for small text (WCAG AA issues), but they don’t use it for body copy — it’s decoration/accent only. Blue on white passes easily.

Neutrals (#333333, #A1A1A1, #EFEFEF) keep the whole thing balanced. The palette is not trying to support dark mode; it’s locked into light backgrounds with dark text. The one shadow is minimal, so color contrast is doing almost all the hierarchy work.

2.4 Usage Guide

• Works well: Deep Blue text on Maize background — bold and legible. Maize buttons with white text — eye-catching for CTAs.
• Avoid: Maize text on white backgrounds for small sizes — low contrast. Blue overlays on blue backgrounds — muddles hierarchy.
• Combinations to keep: Body text black / dark gray over light gray or white. Links in bright blue for recognition.

3. Typography

3.1 Font Families

• Roboto Condensed — Workhorse for headings, navigation, links. Narrower character width lets dense menus fit without wraps.
• Roboto — Used in body, some headings, links, captions. Clean sans-serif readability.
• Georgia with "Times New Roman", "Times" — Serif for certain headings and links, giving academic gravitas.
• Font Awesome 6 Brands / Free — Icon system, not text.

No Google Fonts sourcing detected in the extraction (though in practice, Roboto Condensed is a Google font). This suggests either local hosting or previous integration.

3.2 Type Scale

(Full scale includes all captions, buttons, icon fonts — see data.)

3.3 Hierarchy

The condensed styles make uppercase headings scream authority without feeling bloated. Body is mostly 16px Roboto, which is bread-and-butter readability. Heading sizes drop in ~2px steps down the hierarchy — that maintains tight rhythm and easy vertical scan.

4. Spacing & Layout

4.1 Spacing Scale

They're on a mixed 4px/8px hybrid grid, but the dominant base is 4px increments, especially in smaller UI elements. Frequent values: 4px (icon gaps), 10px (form padding), 20px (component padding), 44px (section gaps).

Consistency is clear — no wild spacing outliers except a few decimals (6.4px button radiuses, probably from design software rounding).

4.2 Layout

Breakpoints are very granular: from 320px up to 1470px, with many intermediate steps (455px, 640px, 745px, etc.). This screams "tailored responsive control" rather than generic breakpoints. They’re clearly adjusting the layout for specific device classes.

5. Visual Elements

Border Radius: Mostly 2px — tiny rounding, barely perceptible, keeps things formal. Some larger radiuses (15px on list items) and full 50% for circular avatars.

Shadow: Only one shadow recorded: rgba(0, 0, 2, 0.3) 0px 10px 30px 0px. Heavy blur, subtle tint — used sparingly.

Borders: Many dotted borders (1px dotted #8E8C8C) for lists. Solid borders in brand blues for separation.

This isn’t a soft, shadowy UI — depth comes from borders and color shifts, not material-style elevation.

6. Components

6.1 Buttons

No full button data except in inputs — but based on borders section, brand buttons often have:

• 1px solid #FFCB0B for primary style
• Border-radius: 2px or 6.4px
• Padding: multiples of spacing scale
• Hover/focus shift to hover colors (#FED439 or #005FCC)

6.2 Links

Six distinct link color systems:

• Default bright blue (#0000EE) with underline — aggressive traditional link style.
• Deep blue (#002C5A) — no underline, hover adds underline.
• Maize (#FFCB0B) — bold, brand link style.
• White (#FFFFFF) — on dark backgrounds.
• Light blue (#85BEFF) — accent links.
• Dark gray (#333333) — subtle links.

States all move to var(--cc-primary-color) on hover — probably deep blue or maize depending on context.

6.3 Forms

One search input style:

• Background: white (#FFFFFF)
• Text: black (#000000)
• Border: none
• Border-radius: 2px
• Padding: 8px top/bottom, 28px right, 10px left

No fancy focus ring — this is minimal.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray: #333333;
  --color-header-gray: #a1a1a1;
  --color-maize: #ffcb0b;
  --color-light-gray: #efefef;
  --color-light-blue: #85beff;
  --color-medium-blue: #567daa;
  --color-mid-gray: #8e8c8c;
  --color-deep-blue: #002c5a;
  --color-dark-neutral: #636363;
  --color-soft-blue: #72b4ff;
  --color-link-blue: #0000ee;
  --color-light-gray-neutral: #dddddd;
  --color-yellow-gold: #fed439;
  --color-bright-blue: #005fcc;
  --color-overlay-blue-a42: rgba(13, 87, 170, 0.427);
  --color-overlay-blue-a49: rgba(13, 87, 170, 0.494);
  --color-overlay-blue-a36: rgba(13, 87, 170, 0.357);
  --color-overlay-blue-a50: rgba(13, 87, 170, 0.498);
  --color-overlay-blue-a42b: rgba(13, 87, 170, 0.424);

  /* Typography */
  --font-roboto-condensed: "Roboto Condensed", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --font-georgia: Georgia, "Times New Roman", Times, serif;
  --fontawesome-brands: "Font Awesome 6 Brands";
  --fontawesome-free: "Font Awesome 6 Free";

  /* Spacing */
  --space-4: 4px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-44: 44px;

  /* Border Radius */
  --radius-0: 0;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-6-4: 6.4px;
  --radius-15: 15px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-main: rgba(0, 0, 2, 0.3) 0px 10px 30px 0px;
}

8. AI Coding Assistant Prompt

# Umich Design System Specification

You are a University of Michigan (Umich) design expert. Build UIs matching their visual language exactly.

## Brand Context
The University of Michigan's digital design is formal, functional, and rooted in its heritage. Color and typography are identity anchors. Depth comes from borders and contrast, not heavy shadows.

## Color Palette
- Black: #000000 — Body text, icons, outlines
- Dark Gray: #333333 — Secondary text
- Header Gray: #a1a1a1 — Headers, dividers
- Maize: #ffcb0b — Primary brand accent, key links
- Light Gray: #efefef — Background sections
- Light Blue: #85beff — Accent links
- Medium Blue: #567daa — Dividers, subtle borders
- Mid Gray: #8e8c8c — Dotted borders
- Deep Blue: #002c5a — Brand secondary, headings
- Dark Neutral: #636363 — Header text
- Soft Blue: #72b4ff — Hover link state
- Link Blue: #0000ee — Default HTML link color
- Light Gray Neutral: #dddddd — Divider backgrounds
- Yellow Gold: #fed439 — Hover/focus accent
- Bright Blue: #005fcc — Hover/focus accent
- Overlay Blue Variants (#0d57aa at various opacity) — Hover/focus overlays

## Typography
- Headings: "Roboto Condensed", sans-serif
- Body: "Roboto", sans-serif
- Serif: Georgia, "Times New Roman", Times, serif
- Iconography: Font Awesome 6 Brands / Free

### Type Sizes
| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | Roboto Condensed | 36px | 700 | 1.15 | Main titles |
| H1 alt | Roboto Condensed | 35px | 700 | 1.00 | Uppercase headlines |
| H1 narrow | Roboto Condensed | 30px | 400 | 1.15 | Nav headings |
| H2 | Roboto Condensed | 27px | 700 | 1.15 | Section headings |
| Body large | Roboto | 22px | 700 | 0.73 | Standout body |
| Body | Roboto | 16px | 400 | 1.38 | Default text |
| Caption | Georgia | 16px | 400 | 1.15 | Quotes/subtext |

## Spacing & Grid
Base unit: 4px
Scale: 4px, 8px, 10px, 15px, 20px, 44px
Usage: 4px for icon gaps, 10px for input padding, 20px for card spacing, 44px for section gaps.

## Border Radius
- None: 0 — tables, structural containers
- XS: 2px — inputs, buttons
- SM: 3px — small cards
- MD: 6.4px — buttons
- LG: 15px — list items
- Full: 50% — avatars

## Shadows & Depth
One shadow: rgba(0, 0, 2, 0.3) 0px 10px 30px 0px — used sparingly. Primarily flat surfaces.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: var(--color-maize);
  color: var(--color-black);
  padding: 8px 20px;
  border-radius: var(--radius-2);
  font-family: var(--font-roboto-condensed);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid var(--color-maize);
}
.btn-primary:hover { background: var(--color-yellow-gold); }
.btn-primary:focus { outline: 2px solid var(--color-bright-blue); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Link
```css
.nav-link {
  color: var(--color-deep-blue);
  text-decoration: none;
  font-weight: 400;
}
.nav-link:hover {
  color: var(--color-soft-blue);
  text-decoration: underline;
}
```

### Input Field
```css
.input-search {
  background: #fff;
  color: #000;
  border: none;
  border-radius: var(--radius-2);
  padding: 8px 28px 8px 10px;
}
```

## Layout & Responsive Rules
Max content width: design adapts at many breakpoints:
320px, 400px, 455px, 640px, 745px, 940px, 1000px, 1470px.
Page padding varies — tighter on mobile, expands on desktop.
Grid gaps follow spacing scale.

## Interaction Rules
- Transition timing: 150ms ease
- Focus indicators: outline in Bright Blue (#005FCC) or Maize (#FFCB0B) depending on background

## DO
- Use ONLY palette colors
- Maintain 4px spacing increments
- Keep border radiuses consistent per component
- Reserve Maize for interactive or identity elements
- Use uppercase headings where data shows

## DON'T
- Introduce shadows beyond the one existing spec
- Use Maize for body text
- Mix serif and sans in the same block
- Invent new hover colors
- Break spacing rhythm

## Code Examples

Primary Button:
```css
<button class="btn-primary">Apply Now</button>
```

Card:
```css
.card {
  background: #fff;
  padding: 20px;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-medium-blue);
}
```

Form Input:
```css
<input class="input-search" placeholder="Search">
```

9. Summary

TL;DR — Umich’s design system is disciplined: brand-forward colors (maize and blue), condensed typography for density, minimal shadows, tight spacing grid. Identity is maintained through consistent link treatments, tiny radius corners, and carefully tuned breakpoints.

Brand Keywords:

• heritage-uniformity
• academic-clarity
• color-disciplined
• grid-precise
• functional-responsiveness