Columbia Design System

# Columbia Design System — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: partial
confidence: low
verified_at: unknown
source_page: https://www.designsystems.one/design-systems/columbia-design
sources:
  - https://usability.cuit.columbia.edu/content/columbia-design-system
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Columbia University. "Columbia 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:** Columbia Design System
**Owner:** Columbia University
**Official documentation:** https://usability.cuit.columbia.edu/content/columbia-design-system
**Visual character:** Ivy identity anchored by the famous pale Columbia Blue, applied conservatively across university web properties.

---

## Summary

Design system for Columbia University's digital platforms.

_Editorial confidence: low. This system publishes little token detail — values below are a conservative, partial reading. Columbia's design system documentation is thin publicly; values are a partial reading. Field-level evidence: 0/42 claims source-linked, 0/42 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=columbia-design)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Columbia Blue | `#b9d9eb` | `--columbia-blue` | Signature light blue |
| Primary Blue | `#1d4f91` | `--columbia-primary` | Links and primary actions |
| Text | `#222222` | `--columbia-text` | Primary text |
| White | `#ffffff` | `--columbia-white` | Page background |
| Light Gray | `#f5f5f5` | `--columbia-light-gray` | Subtle background |
| Border | `#d9d9d9` | `--columbia-border` | Borders |

## Typography

- **Body:** Georgia / system — weights 400, 700 — `Georgia, 'Times New Roman', serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `36px` | `44px` |
| body | `16px` | `26px` |

## Spacing

Base unit: `8px`

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

## Corner radius

| Name | Value |
| --- | --- |
| default | `3px` |

## Quick start (CSS)

```css
/* Columbia Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://usability.cuit.columbia.edu/content/columbia-design-system
   Reference scope: Columbia's design system documentation is thin publicly; values are a partial reading.
   Field evidence: https://www.designsystems.one/api/style-spec?system=columbia-design */

:root {
  /* Color */
  --columbia-blue: #b9d9eb; /* Signature light blue */
  --columbia-primary: #1d4f91; /* Links and primary actions */
  --columbia-text: #222222; /* Primary text */
  --columbia-white: #ffffff; /* Page background */
  --columbia-light-gray: #f5f5f5; /* Subtle background */
  --columbia-border: #d9d9d9; /* Borders */

  /* Typography */
  --font-body: Georgia, 'Times New Roman', serif;

  /* Type scale */
  --text-h1: 36px; /* line-height 44px */
  --text-body: 16px; /* line-height 26px */

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

  /* Radius */
  --radius-default: 3px;
}
```

## 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 Columbia Design System by Columbia University — Design system for Columbia University's digital platforms. Character: Ivy identity anchored by the famous pale Columbia Blue, applied conservatively across university web properties. Use a primary colour near #1d4f91, the typeface "Georgia / system" (or a close equivalent), corner radius around 3px, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Columbia Design System documentation](https://usability.cuit.columbia.edu/content/columbia-design-system)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/columbia-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._