Design system do coursera.org

---
version: alpha
name: "coursera.org"
description: "Design system extracted from https://www.coursera.org/ on 2026-09-28"
colors:
  background: "#ffffff"
  surface: "#e3eeff"
  surface-2: "#ffeac9"
  surface-3: "#dae1ed"
  foreground: "#0d0f12"
  muted-foreground: "#48546e"
  primary: "#0056d2"
  on-primary: "#ffffff"
  border: "#c1cbdb"
typography:
  headline-display:
    fontFamily: "Source Sans Pro"
    fontSize: "48px"
    fontWeight: 600
    lineHeight: "1.17"
    letterSpacing: "-0.48px"
  headline-lg:
    fontFamily: "Source Sans Pro"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "-0.06px"
  headline-md:
    fontFamily: "Source Sans Pro"
    fontSize: "14px"
    fontWeight: 600
    lineHeight: "1.29"
    letterSpacing: "-0.042px"
  body-md:
    fontFamily: "Source Sans Pro"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.43"
  label-md:
    fontFamily: "Source Sans Pro"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1"
  button:
    fontFamily: "Source Sans Pro"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.43"
rounded:
  none: "0px"
  md: "8px"
  sm: "4px"
  xl: "24px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "32px"
  6: "48px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#0056d2"
    typography: "{typography.button}"
    rounded: "8px"
    height: "48px"
    padding: "0px 0px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#0056d2"
    typography: "{typography.button}"
    rounded: "8px"
    height: "36px"
    padding: "8px 12px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "8px"
    height: "36px"
    padding: "8px 16px"
  input:
    backgroundColor: "transparent"
    rounded: "0px"
    height: "48px"
  card:
    backgroundColor: "transparent"
    rounded: "8px"
    padding: "16px"
---

# coursera.org

## Overview

Coursera | Online Courses, Certificates, & Degrees: Learn job-ready skills with online courses, Professional Certificates, Specializations, and degrees from Google, Meta, Anthropic, DeepLearning.AI, Stanford, and more. Start learning today.

Gently rounded controls, layered shadows for depth, confident display type at 48px / 600, a single blue accent on neutrals. The site ships in light mode by default. Measured from 2384 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#e3eeff` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#ffeac9` | Secondary surface |
| surface-3 | `#dae1ed` | Secondary surface |
| foreground | `#0d0f12` | Primary text |
| muted-foreground | `#48546e` | Secondary text, captions |
| primary | `#0056d2` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| border | `#c1cbdb` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#e3eeff`, `#002457`, `#0d0f12`, `#ffeac9`, `#0060eb`, `#dae1ed`, `#0056d2`.

Gradients in use: `linear-gradient(86deg, rgb(0, 96, 235) 3.56%, rgb(135, 184, 255) 40.71%, rgb(126, 216, 116) 96.44%)`; `linear-gradient(278deg, rgb(249, 245, 255) 17.86%, rgb(240, 246, 255) 75.22%)`; `linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%)`.

The accent `#0056d2` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Source Sans Pro** for h1, h2, h3, body, label, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Source Sans Pro | 48px | 600 | 1.17 | -0.48px |
| headline-lg | Source Sans Pro | 20px | 600 | 1.2 | -0.06px |
| headline-md | Source Sans Pro | 14px | 600 | 1.29 | -0.042px |
| body-md | Source Sans Pro | 14px | 400 | 1.43 | normal |
| label-md | Source Sans Pro | 12px | 400 | 1 | normal |
| button | Source Sans Pro | 14px | 400 | 1.43 | normal |

Type scale in use: 12px, 14px, 16px, 20px, 28px, 48px. Base body size 14px.

The H1 renders at 48px / 600, start aligned, up to 1px wide, tracking -0.48px. Sample: "Learn without limits".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 32, 48 (px).
- Flex and grid gaps: 4, 8, 12, 16 px.
- Content max width: 1376px, centred.
- Breakpoints: 600px, 767px, 1023px, 1024px, 1440px.
- Header: 105px tall, static, background `rgba(0, 0, 0, 0)`, bottom hairline 1px solid rgb(193, 203, 219); 8 nav links at 16px / 600 (For Individuals · For Businesses · For Universities · For Governments · Degrees · Log In · Join for Free).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgb(0, 86, 210) 0px 0px 0px 1px inset`
- shadow-2: `rgba(0, 0, 0, 0) 0px 0px 0px 1px inset`

## Shapes

- Buttons: 8px
- Inputs: 0px
- Cards and panels: 8px
- Images and media: 0px
- Radius scale: none 0px, md 8px, sm 4px, xl 24px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#0056d2`, border none, radius 8px, height 48px, padding 0px 0px, 16px / 400, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 1px inset`.

### Button, secondary

Background `#ffffff`, text `#0056d2`, border none, radius 8px, height 36px, padding 8px 12px, 14px / 700, shadow `rgb(0, 86, 210) 0px 0px 0px 1px inset`. Sample label: "Join for Free".

### Button, primary

Background `#0056d2`, text `#ffffff`, border none, radius 8px, height 36px, padding 8px 16px, 14px / 600, shadow `rgb(0, 86, 210) 0px 0px 0px 1px inset`. Sample label: "Try Coursera for Busines".

### Input

Height 48px, background `transparent`, border 0px solid #0d0f12, radius 0px, 16px text, padding 12px 0px.

### Card

Background `transparent`, border 1px solid #c1cbdb, radius 8px, padding 16px, no shadow. Typical size about 324×226px.

### Link

Colour `#ffffff`, no underline at rest, weight 600.

## Dark Mode

Both themes exist; the default render is light and the dark theme was reached via class theme-dark. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#ffffff` | `#ffffff` |
| surface | `#e3eeff` | `#e3eeff` |
| surface-2 | `#ffeac9` | `#ffeac9` |
| surface-3 | `#dae1ed` | `#dae1ed` |
| foreground | `#0d0f12` | `#0d0f12` |
| muted-foreground | `#48546e` | `#48546e` |
| primary | `#0056d2` | `#0056d2` |
| on-primary | `#ffffff` | `#ffffff` |
| border | `#c1cbdb` | `#c1cbdb` |

Dark-theme shadows: `rgb(0, 86, 210) 0px 0px 0px 1px inset`; `rgba(0, 0, 0, 0) 0px 0px 0px 1px inset`

The dark pass changed the page but the result still reads as light; check the dark screenshot.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1376px | -1px | 16px | 48px, 0 lines, start | 105px, 7 links, 2 CTA | media below text | 3→1 col; 3→3 col; 2→2 col | content-width |
| laptop 1024px | 960px | -1px | 16px | 48px, 0 lines, start | 65px, hamburger (Open Navigation Menu), 1 CTA | media below text | 3→3 col; 2→2 col; 2→2 col | content-width |
| tablet 768px | 736px | -1px | 16px | 32px, 0 lines, start | 65px, hamburger (Open Navigation Menu), 1 CTA | text only | 3→3 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 366px | -1px | 16px | 32px, 0 lines, start | 65px, hamburger (Open Navigation Menu) | text only | 3→3 col; 2→1 col; 2→1 col | content-width |

- H1 goes 48px → 32px (67%), 0 → 0 lines.
- Nav collapses to a hamburger by 390px (first seen at 1024px); header 105px → 65px.
- Hero: media below text → text only.
- Card grids: 3 columns → 3 columns on phones (gap 16px → 16px).
- Body text stays 16px at every width.
- Phone side gutter -1px.
- Horizontal overflow at 1440, 1024, 768, 390px (the source has a responsive bug; do not copy it).

## Interaction & Motion

85 elements carry transitions; typical 0.3s with cubic-bezier(0, 0, 0.5, 1), mostly on all, transform, width. 2 running keyframe animations (onetrust-fade-in 0.4s 1; mui-auto-fill-cancel 0.01s 1).

- Hover on button-primary: no visible change; cursor pointer.
- Hover on button-secondary ("Join for Free"): no visible change; cursor pointer; transition none | 0s | ease.
- Hover on nav-link ("For Individuals"): background transparent → #ffffff, text #ffffff → #0d0f12, border #ffffff → #0d0f12, icon/inner colour → #0d0f12; cursor pointer.
- Hover on body-link ("Google Data Analytics"): text #0d0f12 → #0b408b, border #0d0f12 → #0b408b, moves up 4.5px; cursor pointer.
- Hover on input: no visible change; cursor text.
- Focus on button-primary: outline 1px solid rgba(0, 0, 0, 0), offset 2px.
- Focus on body-link: outline 1px solid rgba(0, 0, 0, 0), offset 2px.
- Focus on input: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Tooltips: above the trigger, 0px gap, centered on trigger; transparent on #0d0f12, 16px/400, radius 0px, padding 0px 0px, yes (span.cds-197, 20x8); appears after a delay; removed instantly on leave; shows about 300ms after hover.
- Hover/click menus: below the trigger, 74px gap, shifted left; transparent, radius 0px, padding 0px 0px, shadow none; 20 items, 24px tall, 14px, padding 0px 0px; appears after a delay; hides within 400ms of leaving (transition or unmount).
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#0056d2` for actions and focus; never paint large areas with it.
- Do keep body text at 14px in Source Sans Pro.
- Do match corner radii per element class (buttons 8px, cards 8px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.