UC Berkeley Design System

# UC Berkeley Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by UC Berkeley. "UC Berkeley Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** UC Berkeley Design System
**Owner:** UC Berkeley
**Official documentation:** https://brand.berkeley.edu/
**Visual character:** Berkeley Blue gravitas struck through with California Gold — a public-university identity that balances heritage against Nobel-grade confidence.

---

## Summary

Design system for UC Berkeley's digital platforms.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Brand identity guidance rather than a tokenized product system._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Berkeley Blue | `#003262` | `--berkeley-blue` | Primary brand color |
| California Gold | `#fdb515` | `--california-gold` | Signature accent |
| Founder's Rock | `#3b7ea1` | `--founders-rock` | Secondary blue |
| Text | `#1f1f1f` | `--berkeley-text` | Primary text |
| White | `#ffffff` | `--berkeley-white` | Page background |
| Bay Fog | `#dddddd` | `--bay-fog` | Borders and subtle fills |
| Lawrence | `#00b0da` | `--lawrence` | Bright accent |

## Typography

- **Body:** Open Sans — weights 400, 600, 700 — `'Open Sans', 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `40px` | `48px` |
| h2 | `30px` | `38px` |
| body | `16px` | `26px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Quick start (CSS)

```css
/* UC Berkeley Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://brand.berkeley.edu/ */

:root {
  /* Color */
  --berkeley-blue: #003262; /* Primary brand color */
  --california-gold: #fdb515; /* Signature accent */
  --founders-rock: #3b7ea1; /* Secondary blue */
  --berkeley-text: #1f1f1f; /* Primary text */
  --berkeley-white: #ffffff; /* Page background */
  --bay-fog: #dddddd; /* Borders and subtle fills */
  --lawrence: #00b0da; /* Bright accent */

  /* Typography */
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-h1: 40px /* line-height 48px */;
  --text-h2: 30px /* line-height 38px */;
  --text-body: 16px /* line-height 26px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;

  /* Radius */
  --radius-default: 0;
}
```

## Engineering profile

- **Source model:** Hybrid

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of UC Berkeley Design System by UC Berkeley — Design system for UC Berkeley's digital platforms. Character: Berkeley Blue gravitas struck through with California Gold — a public-university identity that balances heritage against Nobel-grade confidence. Use a primary colour near #003262, the typeface "Open Sans" (or a close equivalent), corner radius around 0, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [UC Berkeley Design System documentation](https://brand.berkeley.edu/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/berkeley-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._