Berkeley Design System Deep Dive

1. Brand Overview

UC Berkeley’s digital brand presence is exactly what you’d expect from one of the world’s top public universities: authoritative, minimal, and unapologetically academic. This isn’t a “startup” visual language—it’s a system built to communicate trust, heritage, and intellectual seriousness, while still feeling modern enough for a global audience.

The vibe is high‑contrast, blue‑and‑gold, with typography that’s clean and sans‑serif forward. They’ve ditched the old‑school serif‑heavy look for Inter—a variable sans that’s legible across devices and scales well from mobile to large desktop hero headlines. That choice alone says a lot: Berkeley wants clarity and accessibility first, tradition second.

Navigation is stripped down. No ornamental dividers, no unnecessary shadows. Layouts breathe thanks to a consistent 8px spacing scale and generous white space. It’s flat design with a deliberate restraint: depth comes from color contrast, not drop shadows. Components feel “engineered” rather than “decorated”—buttons are solid, confident shapes; links are explicit and underline by default; interactive states are clear and functional.

The brand audience here is wide: prospective students, faculty, media, alumni. That’s why the system is built for legibility at all sizes, with clear focus indicators and minimal motion. Berkeley’s design language is about credibility in every pixel: nothing is overdesigned, nothing is frivolous. It’s a visual system that says “we’re here to inform, not entertain”—and they’ve nailed it.

2. Color System

2.1 Primary Colors

The hero color is Berkeley Blue—#002676 (rgb(0, 38, 118))—a deep navy that carries the weight of the institution’s brand history. This isn’t a flashy tech blue; it’s darker, more grounded. It works because it contrasts strongly with white (#ffffff) for accessibility, and pairs naturally with the secondary “California Gold” accent (#fdb515).

The psychology is clear: blue conveys trust, stability, and intelligence; gold signals prestige and achievement. Competitors like Stanford lean on red for energy and tradition; MIT uses a cooler gray‑dominant palette. Berkeley’s blue/gold pairing is more formal, more emblematic.

2.2 Complete Palette

Every one of these colors appears in the extracted palette—no invented tokens.

2.3 Color Relationships

Contrast is king here. Berkeley Blue (#002676) versus White (#ffffff) is a near‑max contrast ratio—excellent for WCAG AAA compliance. Even gold (#fdb515) on blue passes for large text and UI elements, though for small text it’s borderline.

The palette is split into:

• High contrast pairs: Blue/White, Black/White, Blue/Gold.
• Low contrast accents: Pale golds used for subtle hover indications—good for decorative elements but avoid for body text.
• Functional neutrals: Light gray (#eaeaea) for background states, dark gray (#262626) for secondary text.

Dark mode isn’t explicitly supported—the palette is clearly optimized for a light background context.

2.4 Usage Guide

Combinations that work:

• Blue background + white text: Default CTAs, hero headlines.
• White background + blue text: Navigation, secondary CTAs.
• Blue + gold accent: Link hovers, active states.
• Black text on white: Body copy.

Avoid:

• Gold text on white—fails contrast.
• Pale golds for primary text—too low contrast.
• Blue text on black—low readability.

3. Typography

3.1 Font Families

Primary body and UI font: Inter (Google Fonts, variable). No fallbacks listed in the data, but the typical stack is Inter, sans-serif.

Secondary font: Source Serif 4 (Google Fonts) appears in sources, but not in the extracted style contexts—likely used for certain editorial sections, not core UI.

Iconography is handled via Font Awesome (brands, v5 and v6).

3.2 Type Scale

Here’s the extracted type table:

3.3 Hierarchy

They use weight jumps to signal hierarchy: 400 → 700 → 900. The largest headings (64px, weight 900) are rare—hero only. Mid‑tier headings sit around 44.8px–48px. Body text is ~20px—slightly larger than the web default, improving readability. Captions dip to 12px but never below—smart for accessibility.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Everything is a multiple or fraction of 8px.

Common values:

4.2 Layout

Breakpoints:

• 515px
• 600px
• 781px
• 782px (odd to have 781 and 782—likely a micro‑tweak for specific element behavior)

This suggests a mobile‑first approach with fine‑tuned tablet breakpoints.

5. Visual Elements

Border Radius

Values:

No large radii—clean and functional. Pill forms at 28px radius are the most decorative.

Shadows

Empty. This is a flat design system. Depth is handled via color and borders.

Borders

Functional borders only:

• 0px 0px 8px solid #002676 — strong bottom border (section divider).
• 0px 1px 1px solid #002676 — right/bottom thin borders.
• 0px 0px 1px solid #262626 — subtle divider.
• 1px solid rgba(255,255,255,0.1) — hairline divider for dark backgrounds.

6. Components

6.1 Buttons

Video Control Button (video-control--play-pause)

• Default: bg rgb(1,1,51), white text, no padding, border radius 0, border 2px transparent, font weight 700, font size 13.33px.
• Hover: text color #262626, bg initial, no border.
• Active: text white, opacity 0.85, bg initial.
• Focus: bg #002676, white text, no border.

White CTA (button--cta button--white)

• Default: bg white, text #002676, padding 12px 36px, radius 9px, font weight 700, font size 20.8px.
• Hover: text #262626, bg #002676, transform scale(1.1), outline 2px solid #002676.
• Active: opacity 0.85.
• Focus: bg #002676, white text, outline 2px solid #002676.

Blue CTA (button--cta)

• Default: bg #002676, white text, padding 12px 36px, radius 9px.
• Hover: text #262626, bg #002676, transform scale(1.1), outline 2px solid #002676.
• Active: opacity 0.85.
• Focus: bg #002676, white text, outline 2px solid #002676.

6.2 Links

• White link: default white underline, hover gold no underline.
• Blue link: default blue underline, hover gold no underline.

6.3 Forms

Search input:

• Default: bg white, text #262626, radius 28px, padding 12.6px 42px 12.6px 14px.
• Focus: outline 2px solid #002676, text color #002676.

7. Design Tokens

:root {
  /* Colors */
  --color-berkeley-blue: #002676;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-california-gold: #fdb515;
  --color-pale-gold-a: #feda8a;
  --color-pale-gold-b: #fedb8c;
  --color-pale-gold-c: #fedb8d;
  --color-light-gray: #eaeaea;
  --color-dark-gray: #262626;

  /* Typography */
  --font-inter: "Inter", sans-serif;
  --font-source-serif: "Source Serif 4", serif;

  /* Spacing */
  --space-1-6px: 1.6px;
  --space-2-6px: 2.6px;
  --space-3px: 3px;
  --space-4-8px: 4.8px;
  --space-5px: 5px;
  --space-8px: 8px;
  --space-10px: 10px;
  --space-11-2px: 11.2px;
  --space-12px: 12px;
  --space-12-6px: 12.6px;
  --space-15px: 15px;
  --space-16px: 16px;
  --space-17-6px: 17.6px;
  --space-20px: 20px;
  --space-24px: 24px;
  --space-24-8px: 24.8px;
  --space-30px: 30px;
  --space-38-4px: 38.4px;
  --space-40px: 40px;
  --space-96px: 96px;

  /* Border Radius */
  --radius-3px: 3px;
  --radius-5px: 5px;
  --radius-8px: 8px;
  --radius-9px: 9px;
  --radius-28px: 28px;
  --radius-full: 50%;

  /* Breakpoints */
  --bp-515: 515px;
  --bp-600: 600px;
  --bp-781: 781px;
  --bp-782: 782px;
}

8. AI Coding Assistant Prompt

# Berkeley Design System Specification

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

## Brand Context
Berkeley’s design language is authoritative, academic, and minimal. It uses deep blue and gold for heritage, paired with flat design principles and generous white space. Typography is clean, sans-serif, and highly legible.

## Color Palette
- Berkeley Blue: #002676 — primary CTAs, hero backgrounds, focus outlines
- White: #ffffff — page background, text on dark backgrounds
- Black: #000000 — body text, icons
- California Gold: #fdb515 — link hover, highlights
- Pale Gold A: #feda8a — subtle hover accents
- Pale Gold B: #fedb8c — subtle hover accents
- Pale Gold C: #fedb8d — subtle hover accents
- Light Gray: #eaeaea — hover/focus backgrounds
- Dark Gray: #262626 — secondary text, hover states

## Typography
Font families:
- Headings, body, UI: "Inter", sans-serif
- Secondary editorial: "Source Serif 4", serif
- Icons: "Font Awesome" (brands v5, v6)

Type sizes:

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 Hero | Inter | 64px | 900 | 1.00 | Hero titles |
| H1 Large | Inter | 49.6px | 700 | 1.13 | Large headings |
| H1 Section | Inter | 48px | 900 | 1.30 | Section hero |
| ... | ... | ... | ... | ... | ... |

Body text: 20px / 400 / 1.50  
Captions: 14px / 400–700 / 1.38–1.50

## Spacing & Grid
Base: 8px. Scale includes: 1.6px, 2.6px, 3px, 4.8px, 5px, 8px, 10px, 11.2px, 12px, 12.6px, 15px, 16px, 17.6px, 20px, 24px, 24.8px, 30px, 38.4px, 40px, 96px.

## Border Radius
- sm: 3px — small tags
- md: 8px — cards
- lg: 9px — buttons
- pill: 28px — inputs
- full: 50% — circular buttons

## Shadows & Depth
Flat design — avoid shadows. Use borders for separation.

## Component Specifications

### Primary Button (.button--cta)
Default: bg #002676, white text, padding 12px 36px, radius 9px, font-weight 700, font-size 20.8px.  
Hover: text #262626, outline 2px solid #002676, transform scale(1.1).  
Focus: bg #002676, white text, outline 2px solid #002676.  
Active: opacity 0.85.

### Secondary Button (.button--cta.button--white)
Default: bg white, text #002676, padding 12px 36px, radius 9px.  
Hover: bg #002676, text #262626, outline 2px solid #002676.  
Focus: bg #002676, white text.

### Navigation Links
White links: underline by default, hover gold no underline.  
Blue links: underline by default, hover gold no underline.

### Input Fields
Default: bg white, text #262626, radius 28px, padding 12.6px 42px 12.6px 14px.  
Focus: outline 2px solid #002676, text color #002676.

## Layout & Responsive Rules
Breakpoints: 515px, 600px, 781px, 782px. Mobile-first.  
Page padding: multiples of 8px. Section gaps: 20px–96px.

## Interaction Rules
Transitions: 150ms ease for hover/focus changes.  
Focus indicators: 2px solid outline in primary color.

## DO List
- Use ONLY colors from the palette.
- Maintain 8px grid for all spacing.
- Use Inter for all headings and body.
- Keep buttons radius at 9px—no variation.
- Use underline for all links by default.
- Ensure contrast passes WCAG AA minimum.

## DON'T List
- Don't add shadows.
- Don't mix rounded and sharp corners inconsistently.
- Don't use pale golds for body text.
- Don't use custom colors.
- Don't remove link underline except on hover.

## Code Examples

### Primary Button
```css
.button--cta {
  background: #002676;
  color: #ffffff;
  padding: 12px 36px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 20.8px;
  border: none;
  transition: all 150ms ease;
}
.button--cta:hover {
  color: #262626;
  outline: 2px solid #002676;
  transform: scale(1.1);
}
.button--cta:focus {
  background: #002676;
  color: #ffffff;
  outline: 2px solid #002676;
}
.button--cta:active {
  opacity: 0.85;
}
```

### Secondary Button
```css
.button--cta.button--white {
  background: #ffffff;
  color: #002676;
  padding: 12px 36px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 20.8px;
  border: none;
  transition: all 150ms ease;
}
.button--cta.button--white:hover {
  background: #002676;
  color: #262626;
  outline: 2px solid #002676;
  transform: scale(1.1);
}
```

### Input
```css
.search-input {
  background: #ffffff;
  color: #262626;
  border-radius: 28px;
  padding: 12.6px 42px 12.6px 14px;
  border: none;
}
.search-input:focus {
  outline: 2px solid #002676;
  color: #002676;
}
```

9. Summary

TL;DR: Berkeley’s design system is deep blue and gold, flat, and academic. It uses an 8px grid, Inter for all type, and clear, functional UI states. No shadows, no fluff—just clean, accessible design.

Brand Keywords: deep-blue-authority, gold-accent-prestige, flat-functional, academic-minimal