What is Coursera's primary brand color?

Coursera's primary is voltage blue at #0056d2 — the exact hex declared by --cds-color-interactive-primary, --cds-color-blue-700, and --cds-color-callouts-background-primary. It carries the wordmark, every 'Enroll now' / 'Join for Free' primary CTA, link text in body copy, and the small enrollment-count icons under each course tile. The pressed state drops to #0048b0 (--cds-color-blue-800, --cds-color-interactive-primary-hover), and the navy callout family extends from #002761 (--cds-color-blue-950) through #003b8f (--cds-color-blue-900). The voltage blue is held back from large background fills and body text — the rest of the system runs on white canvas, a four-step gray ladder, and the pastel callout-band tints.

What typography does Coursera use, and what's the substitute?

Coursera runs a single typeface — Source Sans Pro — declared as 'Source Sans Pro, Arial, sans-serif' on --cds-font-family-body, --cds-font-family-title, and --cds-font-family-display. The hero h2 sits at 28px / weight 600 / -0.28px letter-spacing on the navy callout card; section h2s drop to 20px / weight 600 / -0.06px tracking; body runs 14px / weight 400 / 20px line-height; the primary CTA label is 14px / weight 600 / 0.14px tracking. There is a second declared family — --cds-font-family-boutros-coursera (Boutros Coursera, Tahoma) — reserved for Arabic locales. Source Sans Pro is Adobe's open-source SIL face, so it ships free on Google Fonts — no substitute is needed.

Why does Coursera use a navy hero card instead of a full-bleed band?

The hero splits a white canvas in half — a navy ('#002761') 'Start, switch, or advance your career' card on the left and a white 'Top courses' tile-stack on the right, both at 16px radius (--cds-border-radius-200). The split lets the brand show two value propositions in parallel: career pitch (navy with voltage-blue CTA inside) and discovery pitch (white with course tiles). A full-bleed navy band would dominate the page and force the course tiles below the fold; the side-by-side card composition keeps both visible at viewport-top and uses the navy color only for the action-prompt half. The same navy returns at the bottom of the page as a 91% testimonial stat panel — bracketing the marketing flow with two navy moments.

Why does Coursera use 8px rectangle buttons but 50px pill chips?

The radius vocabulary is role-split. Primary and secondary action buttons render at 8px (--cds-border-radius-100) — the rectangular silhouette reads as a workspace control, not a consumer pill. Skill and category filter chips, by contrast, render at 50px (--cds-border-radius-max) — fully capsule. The split makes the action class instantly legible: rectangles commit you to a course, capsules filter the catalog. Cards sit at 16px (--cds-border-radius-200), small input chevrons at 2px (--cds-border-radius-25), feature blocks at 24px (--cds-border-radius-300). The 8px / 50px button-vs-chip dichotomy is the geometric move that separates Coursera from pill-everywhere brands like Stripe and Linear.

What are Coursera's structural gray tones?

The neutral spine runs five steps: #0f1114 (--cds-color-grey-975, --cds-color-emphasis-neutral-background-xxstrong) for ink at frequency 2157 — the most-common color in the extraction; #5b6780 (--cds-color-grey-600, --cds-color-emphasis-neutral-content-default) for muted body and inactive nav at frequency 186; #dae1ed (--cds-color-grey-100, --cds-color-neutral-stroke-primary-weak) for the 1px hairline divider at frequency 47; #e8eef7 (--cds-color-grey-50) for surface tint and chip backgrounds at frequency 74; and #ffffff (--cds-color-neutral-background-primary) for the dominant canvas at frequency 508. The ladder is gentle — each step jumps roughly one OKLCH lightness band — so the gray surfaces never compete with the voltage blue.

Can I use this DESIGN.md to build a React learning marketplace?

Yes — the file feeds Claude, Cursor, or Copilot and the agent reproduces Coursera's specific dialect (voltage-blue rectangular CTA on white, navy callout card with inline secondary action, 50px-pill skill-chip rows, Source Sans Pro across every text role) rather than a generic shadcn theme of subdued grays and Inter headings. Every hex (#0056d2, #002761, #0f1114, #5b6780, the pastel callout tints) and every radius / spacing / typography value is a quoted token you can paste into Tailwind config, CSS variables, or your own component library. The course-tile card geometry and the side-by-side hero composition transfer directly to any catalog-driven marketplace, learning or otherwise.

Coursera Design System

Coursera's design system as a DESIGN.md file.

About Coursera DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source coursera.org

Education & Learning

Coursera's marketing surface reads as a course catalog rendered with enterprise-SaaS rigor. The canvas is white edge-to-edge; the hero is a side-by-side pair — a deep navy ("#002761") personal-pitch card on the left carrying "Start, switch, or advance your career" in Source Sans Pro at 28px / weight 600 / -0.28px tracking, and a white card on the right with three "Top courses" tiles. Every primary CTA — "Enroll now", "Join for Free" — fills with voltage blue ("#0056d2") at 8px radius, 36px height, and an uppercase-tracked label at 14px / weight 600 / 0.14px letter-spacing. The body voice drops to mid-gray ("#5b6780") for category descriptions and to near-black ("#0f1114") for course titles and the dense legal copy at the page foot.

This page packages the captured surface into one DESIGN.md file built on the Google Labs spec. Inside: 19 color tokens covering voltage blue and its pressed step, the navy callout family, white canvas plus a four-step neutral ladder, the pastel category-pill tint, three callout-band accents (purple, yellow, pink), and the success / warning / error feedback trio drawn from the 381 :root custom properties; 11 typography tokens splitting Source Sans Pro into display, h2, h3, body, action-primary, action-secondary, body-tertiary, nav, label, caption, and input roles; 6 corner radii anchored at 8px button-radius, 2px chip border, 16px card, and the 50px "max" capsule from "--cds-border-radius-max"; 9 spacing values built on the brand's 8px / 12px / 16px / 24px / 32px / 48px / 64px / 80px / 112px scale ("--cds-spacing-*"); and 18 components covering the voltage CTA, secondary button, top nav, search input, course-tile card, category-pill row, navy callout band, pastel skill chip, testimonial stat panel, and the FAQ accordion row.

A working React developer feeds this file to Claude, Cursor, or Copilot and reproduces Coursera's specific dialect — rectangular voltage-blue CTA on white, navy callout cards flanking a course-tile column, 50px pill chips for skill filters, Source Sans Pro at weight 600 for every display — instead of a generic shadcn theme. Reference the tokens inside Tailwind config or as CSS variables. Where most education brands hedge between approachable pastels and corporate-LMS gravitas, Coursera commits to a single saturated mid-blue and a navy callout band — confidence by chromatic discipline rather than illustration warmth.

What makes it distinct

Voltage blue anchor#0056d2 carries every primary CTA and link, paired with #0048b0 for the pressed state
Navy callout band#002761 owns the hero card and the 91% testimonial stat panel, never used on body text
Single-typeface dialectSource Sans Pro spans display, body, and action at weight 400 / 600 / 700, no second family
Rectangular 8px primary CTACoursera holds buttons at --cds-border-radius-100 while running 50px pill chips for category filters
Five-step neutral spine#0f1114, #5b6780, #dae1ed, #e8eef7, #ffffff carry every structural surface and hairline

Live at coursera.org

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

coursera.org

Explore Coursera

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Coursera design system FAQ

Common questions about Coursera's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Coursera — official site

The online learning marketplace whose marketing surface this DESIGN.md captures.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Coursera in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→