Washington Brand Design System Deep-Dive

1. Brand Overview

The University of Washington site is exactly what you’d expect from a major public institution—formal without being stiff, modern without chasing trends. Everything about the visual language says “established” and “functional.” This isn’t built for brand experimentation, it’s built to convey authority, trust, and clarity.

First impression: heavy use of strong sans-serif typography, a restrained color palette, and minimal ornamentation. It’s academic but approachable. Encode Sans Compressed at high weights drives headlines, making them loud and confident. Open Sans keeps body text readable and utilitarian.

The color story is subtle for a university brand. Yes, there’s the expected purple (encoded via rgb(75, 46, 131) borders and accents), but a surprising amount of gray lives here—#707070, #5a5a5a, #1c1c1c—forming the scaffold while occasional splashes of gold (#85754d) and blue (#0074bb) pop through in functional roles like links.

Spacing is modular, running primarily on an 8px scale. No over-the-top asymmetry—basic grid logic creates consistency. Borders are narrow, often single-pixel, with purple as a key structural color.

Buttons here are utilitarian: one variant is a circular search control (100% border-radius) with white borders and dark hover states. Another is rectangular, white on white, relying on scale transforms on hover for a subtle “move” cue.

That’s the vibe: fixed, intentional, not chasing startup flair. If you’re designing for Washington, you need to respect that institutional weight. This is for prospective students, faculty, donors—you can’t undermine trust with experimental UI. It’s about clarity, hierarchy, and maintaining brand gravity.

I like how they’ve resisted flat material minimalism in places and embraced slight shadows for interactive depth. Not everywhere—just enough to keep UI elements distinct without breaking the math of the layout. It’s a pragmatic system that underpins complex content without drawing attention away from the story.

2. Color System

2.1 Primary Colors

Washington’s “primary” isn’t screaming purple in background elements. The brand purple (rgb(75, 46, 131)) emerges primarily in borders and accented text. It’s more structural than saturative. This is key—the purple anchors identity while letting other colors do the heavy accessibility lifting.

Psychologically, purple carries academic authority and tradition. The gold/brown (#85754d) accents nod to prestige and heritage without going full metallic. The blues (#0074bb) are functional—links, navigational cues—adding needed contrast to the otherwise monochrome setup.

In comparison to competitors (say, Cal’s bright gold or Stanford’s red), Washington’s palette is quieter. That’s a choice: they rely on typography for loudness, keeping the palette clean.

2.2 Complete Palette

2.3 Color Relationships

Contrast between #0074bb links and #ffffff is excellent—well above WCAG AA large text minimum. Likewise, purple (rgb(75, 46, 131)) borders against white are clear but not high saturation, keeping structure subtle.

Gold (#85754d) on dark backgrounds works; on white, it’s borderline low contrast for 14px text, so it’s wisely used in larger elements or on darker fields.

Yellows near #ffe3xx shades are attention-grabbers—focus or hover states—never primary backgrounds. They wouldn’t work for large text at AA without a dark textual overlay.

No explicit dark mode here. Palette assumes white/light backgrounds. Any dark adaptation would need to invert structural colors (purple stays, grays lighten).

2.4 Usage Guide

What works: Purple borders + white background = strong identity. Blue links on light backgrounds—perfect. Gold accents on dark backgrounds pull heritage tone.

What to avoid: Gold on white for small text—it will fail contrast. Too much blue—breaks brand hierarchy if you overuse it outside links. Don’t flood UI with yellows—these are meant for states, not surfaces.

3. Typography

3.1 Font Families

• Encode Sans Compressed — headline, link, and button workhorse. High weights (800–900) dominate headings.
• Open Sans — body text, captions, some buttons. Functional, readable.
• Sources: Google Fonts: "Open Sans". Also variable fonts on-site.

3.2 Type Scale

3.3 Hierarchy

Biggest jump is from 50px headlines to 24px subheads. Encode Sans’ compressed letterforms mean large headlines pack tight, creating a powerful but space-efficient header.

Weights are mostly high—rarely below 600 except body text and captions. This pushes a bold visual identity.

Smallest text (13.6px in captions) sticks to Open Sans for readability at scale.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px logic, but with irregular 1–3px values for micro-alignment. Frequencies show you real-world usage.

The 10px unit dominates—that’s probably page padding and component inner margins.

4.2 Layout

Breakpoints at 500px, 600px, 700px, 768px, 992px, 1024px, 1200px, 1400px, 1600px. Classic: small mobile → tablet widths → desktop breakpoints.

The grid likely shifts at 992px (Bootstrap-esque) and 1200px—desktop container tightening.

5. Visual Elements

Border Radius

Only explicit radius is 100%—applied to the search button. Pure circular.

No subtle rounding—most buttons, inputs, containers are sharp.

Shadows

Mixed approach:

• rgba(0,0,0,0.5) 1px 1px 8px — heavier depth for overlays, modals.
• rgba(0,0,0,0.2) 0px 1px 2px — softer for small lifts.
• Others with low counts suggest shadows are rare and situational.

No shadow token system—values scattered.

Borders

Purple (rgb(75, 46, 131)) borders are key identity anchors. Frequent 0 0 1px applications—like underline dividers.

Other grays mark neutral divisions—rgb(61, 61, 61) for legends/li, rgb(209, 209, 209) for large top borders.

6. Components

6.1 Buttons

Search Button (uw-search):

• Default: transparent bg, #3d3d3d text, 100% radius, 2px solid #ffffff border.
• Hover: gold text (#85754d), dark purple bg (#201338), no border.
• Active: white text, transparent bg, no border.
• Focus: gold text, purple bg (#402770), 3px solid #94bff9 border, subtle inset shadow.

Font: Encode Sans Compressed, 17px, 600 weight.

I like the focus state here. That outline blue (#94bff9) isn’t brand but it screams accessibility.

Rectangular Button (uw-btn btn-none):

• Default: white bg, dark gray text (#5a5a5a), 11px 20px padding.
• Hover: black text, same bg, scale up 1.15, 7px outline in gray (#c3c3c3).
• Active: black text, dark bg (#373a3c), reduced opacity.
• Focus: white text, blue outline, 3px solid #94bff9, scale up.

Font: Encode Sans Compressed, 16px, 700 weight.

Transform scaling on hover/focus is rare in institutional UI—Washington uses it here to subtly increase interaction feedback.

6.2 Links

Four variants:

1. Blue (#0074bb) default, black hover.
2. White text default, black hover.
3. Purple (#4b2e83) bold links, black hover.
4. Dark gray (#5a5a5a) bold, black hover.

No underline in any state—a modern choice, but requires color to carry affordance.

6.3 Forms

Search inputs:

• Default: light gray bg (#f1f1f1), dark text (#3d3d3d), no border.
• Focus: auto outline, slightly lighter bg (#fbfbfb), darker text.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-medium: #707070;
  --color-gray-light: #eeeeee;
  --color-gray-dark: #5a5a5a;
  --color-gold-brown: #85754d;
  --color-blackish: #1c1c1c;
  --color-gray-pale: #c7c7c7;
  --color-blue-bright: #0074bb;
  --color-gray-neutral: #808080;
  --color-yellow-bright: #ffe451;
  --color-yellow-bright2: #ffe450;
  --color-yellow-gold: #ffe346;
  --color-yellow-gold2: #ffe552;
  --color-yellow-deep: #ffe13c;
  --color-yellow-gold3: #ffe452;

  /* Typography */
  --font-encode: 'Encode Sans Compressed', sans-serif;
  --font-open: 'Open Sans', sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-14: 14px;
  --space-14-5: 14.5px;
  --space-15: 15px;
  --space-20: 20px;
  --space-21: 21px;
  --space-25: 25px;
  --space-29: 29px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-60: 60px;

  /* Radius */
  --radius-full: 100%;

  /* Shadows */
  --shadow-strong: rgba(0,0,0,0.5) 1px 1px 8px 0px;
  --shadow-soft: rgba(0,0,0,0.2) 0px 1px 2px 0px;

}

8. AI Coding Assistant Prompt

# Washington Design System Specification

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

## Brand Context
Washington’s design is formal, academic, and clear. Typography is bold and compressed for headlines, clean and readable for body. Colors are restrained—purple borders, muted grays, functional blues—used with precision. Interactions are subtle: small scale transforms, hover color changes.

## Color Palette
- White: #ffffff — page background, content container surfaces
- Gray Medium: #707070 — secondary text
- Gray Light: #eeeeee — UI surfaces, section backgrounds
- Gray Dark: #5a5a5a — body text, button text
- Gold/Brown: #85754d — hover/focus accents
- Near Black: #1c1c1c — quicklinks text
- Pale Gray: #c7c7c7 — outlines
- Bright Blue: #0074bb — link text
- Neutral Gray: #808080 — hover/focus accents
- Bright Yellow: #ffe451 — hover/focus
- Bright Yellow2: #ffe450 — hover/focus
- Yellow Gold: #ffe346 — hover/focus
- Yellow Gold2: #ffe552 — hover/focus
- Deep Yellow: #ffe13c — hover/focus
- Yellow Gold3: #ffe452 — hover/focus

## Typography
Fonts:
- Headings, Links, Buttons: 'Encode Sans Compressed', sans-serif
- Body, Captions: 'Open Sans', sans-serif

Sizes:
| Element | Font | Size | Weight | Line Height | Transform |
|---------|------|------|--------|-------------|-----------|
| H1 | Encode Sans Compressed | 50px | 900 | 1.00 | uppercase |
| Subhead | Encode Sans Compressed | 24px | 800 | 1.30 | none |
| ... (follow extracted list for all)

## Spacing & Grid
Base: 8px grid with micro increments (1px, 2px, 3px).
Common: 4px, 6px, 10px, 20px for component padding.
Button padding: 11px 20px.

## Border Radius
- none: 0px — all but circular elements
- full: 100% — search button

## Shadows & Depth
- strong: rgba(0,0,0,0.5) 1px 1px 8px 0px — overlays
- soft: rgba(0,0,0,0.2) 0px 1px 2px — small lifts

## Component Specifications

### Search Button (.uw-search)
Default: bg transparent, color #3d3d3d, 100% radius, 2px solid #ffffff border
Hover: color #85754d, bg #201338, no border
Active: color #ffffff, transparent bg
Focus: color #85754d, bg #402770, border 3px solid #94bff9

### Rectangular Button (.uw-btn.btn-none)
Default: bg #ffffff, color #5a5a5a, padding 11px 20px
Hover: color #000000, scale(1.15), outline #c3c3c3 solid 7px
Active: color #000000, bg #373a3c, opacity 0.85
Focus: color #ffffff, border 3px solid #94bff9, scale(1.15)

### Links
Blue link: default #0074bb, hover #000000, no underline
Purple link: default #4b2e83, hover #000000
White link: default #ffffff, hover #000000
Dark gray link: default #5a5a5a, hover #000000

### Input Fields
Search: default bg #f1f1f1, color #3d3d3d, no border
Focus: bg #fbfbfb, color #333333, outline auto

## Layout & Responsive Rules
Breakpoints: 500px, 600px, 700px, 768px, 992px, 1024px, 1200px, 1400px, 1600px
Follow fixed container widths per breakpoint, adjust padding accordingly.

## Interaction Rules
- Transitions ~150ms ease
- Scale transform for buttons on hover/focus
- Use color change for hover states
- Focus indicators with brand blue border (#94bff9)

## DO List
- Use palette exactly
- Maintain 8px grid
- Use Encode Sans Compressed for headings
- Uppercase for important buttons/links
- Keep link colors tied to palette
- Respect breakpoints

## DON'T List
- Add custom colors
- Round corners except full circles
- Remove focus outlines
- Overuse yellow accents
- Use shadows not listed

## Code Examples

### Primary Button
```css
.btn-primary {
  background: transparent;
  color: #3d3d3d;
  padding: 11px 20px;
  border-radius: 100%;
  border: 2px solid #ffffff;
  font-family: 'Encode Sans Compressed', sans-serif;
  font-weight: 600;
  font-size: 17px;
}
.btn-primary:hover {
  background-color: #201338;
  color: #85754d;
}
.btn-primary:focus {
  background-color: #402770;
  border: 3px solid #94bff9;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #5a5a5a;
  padding: 11px 20px;
  font-family: 'Encode Sans Compressed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  border: none;
}
.btn-secondary:hover {
  transform: scale(1.15);
  outline: 7px solid #c3c3c3;
}
```

### Input Field
```css
.input-search {
  background-color: #f1f1f1;
  color: #3d3d3d;
  padding: 10px 0 10px 15px;
  border: none;
}
.input-search:focus {
  background-color: #fbfbfb;
  color: #333333;
}
```

9. Summary

TL;DR — Washington’s design system is structured like its institution: formal, modular, authoritative. Purple makes the frame, bold compressed type makes the voice, and functional blues and grays fill the body. Interaction cues are subtle but clear.

Brand Keywords:

• academic-authority
• bold-type
• restrained-color
• functional-interaction
• grid-disciplined