W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Coursera
Coursera is one of the largest online learning platforms, host to university and industry partner courses, professional certificates, and full degree programs. The brand voice is considered, credentialing, and outcomes-focused — Coursera is positioned closer to a university than to a consumer app. Visually, the identity is a single deep signature blue (#0056D2 — Coursera Blue) against a light, generous White canvas, supported by a soft Bluish White surface tint and a restrained near-black ink text scale that deliberately avoids pure #000000. Typography is Source Sans Pro across body and headings, with Boutros Coursera as the bilingual / Arabic display companion.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/coursera/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/coursera/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Coursera
Coursera is one of the largest online learning platforms, host to university and industry partner courses, professional certificates, and full degree programs. The brand voice is considered, credentialing, and outcomes-focused — Coursera is positioned closer to a university than to a consumer app. Visually, the identity is a single deep signature blue (#0056D2 — Coursera Blue) against a light, generous White canvas, supported by a soft Bluish White surface tint and a restrained near-black ink text scale that deliberately avoids pure #000000. Typography is Source Sans Pro across body and headings, with Boutros Coursera as the bilingual / Arabic display companion.
Tags: coursera, education, mooc, online-learning, brand, light-first, blue, corporate
Atoms
Palette
Coursera · [email protected] · Proprietary — All Rights Reserved
Coursera's brand palette, captured from the live marketing site (coursera.org) where the Coursera Design System exposes named color tokens — most visibly the BLUE primary (#0056D2), the deep-navy text color (#1F1F1F), and the BLUISH_WHITE soft surface tint (#F3F8FF). The system is corporate, considered, and reader-friendly: a single deep signature blue against near-white surfaces with a restrained neutral grey scale. Coursera is light-first; the marketing canvas is White, with Bluish White as the surface tint and Coursera Blue as the brand action.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Source Sans 3 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Source Sans 3 ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Source Code Pro ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
coursera-blue |
Coursera Blue | #0056D2 |
bluish-white |
Bluish White | #F3F8FF |
blue-dark |
Blue Dark | #003C8F |
blue-pale |
Blue Pale | #E3EEFF |
blue-deep |
Blue Deep | #002761 |
ink-50 |
Ink 50 | #1F1F1F |
ink-100 |
Ink 100 | #303030 |
ink-300 |
Ink 300 | #616161 |
ink-500 |
Ink 500 | #757575 |
ink-700 |
Ink 700 | #9E9E9E |
white |
White | #FFFFFF |
surface |
Surface | #FAFAFA |
surface-2 |
Surface 2 | #F5F5F5 |
border |
Border | #E0E0E0 |
success |
Success | #1B8057 |
warning |
Warning | #F28100 |
error |
Error | #F44336 |
error-deep |
Error Deep | #66000F |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
bluish-white |
#F3F8FF |
surface-elevated |
white |
#FFFFFF |
text-primary |
ink-50 |
#1F1F1F |
text-secondary |
ink-300 |
#616161 |
text-tertiary |
ink-500 |
#757575 |
primary |
coursera-blue |
#0056D2 |
primary-hover |
blue-dark |
#003C8F |
accent |
coursera-blue |
#0056D2 |
accent-hover |
blue-dark |
#003C8F |
warning |
warning |
#F28100 |
warning-hover |
warning |
#F28100 |
error |
error |
#F44336 |
success |
success |
#1B8057 |
border |
border |
#E0E0E0 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
ink-50 |
#1F1F1F |
surface |
ink-100 |
#303030 |
surface-elevated |
ink-300 |
#616161 |
text-primary |
white |
#FFFFFF |
text-secondary |
surface-2 |
#F5F5F5 |
text-tertiary |
ink-700 |
#9E9E9E |
primary |
coursera-blue |
#0056D2 |
primary-hover |
bluish-white |
#F3F8FF |
accent |
bluish-white |
#F3F8FF |
accent-hover |
blue-pale |
#E3EEFF |
warning |
warning |
#F28100 |
warning-hover |
warning |
#F28100 |
error |
error |
#F44336 |
success |
success |
#1B8057 |
border |
ink-300 |
#616161 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
ink-50 |
#1F1F1F |
primary |
coursera-blue |
#0056D2 |
primary-hover |
blue-dark |
#003C8F |
accent |
coursera-blue |
#0056D2 |
accent-hover |
blue-dark |
#003C8F |
mark |
coursera-blue |
#0056D2 |
success |
success |
#1B8057 |
warning |
warning |
#F28100 |
error |
error |
#F44336 |
text-primary-light |
ink-50 |
#1F1F1F |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
ink-50 |
#1F1F1F |
surface-light |
bluish-white |
#F3F8FF |
surface-dark |
ink-100 |
#303030 |
text-secondary-light |
ink-300 |
#616161 |
text-tertiary-light |
ink-500 |
#757575 |
border-light |
border |
#E0E0E0 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.primary
- allowed: coursera-blue, blue-dark
- forbidden: bluish-white, blue-pale, blue-deep, success, warning, error
Coursera Blue (#0056D2) is the single signature primary across the entire CDS. Bluish White and Blue Pale are surface tints, not action colors; Blue Deep is a callout / hero anchor. Repurposing semantic colors (success green, warning orange, error red) as the primary action color conflicts with their established semantic meaning in the product.
colorChoice → roles.colors.text-primary-light
- allowed: ink-50, ink-100
- forbidden: black
Coursera's canonical body text on coursera.org is Ink 50 (#1F1F1F) or Ink 100 (#303030). The CDS does not use pure #000000 for body copy — the near-black scale was chosen deliberately for reader comfort on the long-form course-syllabus and reading material the platform hosts.
forbiddenTreatment → logo
- treatments: stretched, skewed, rotated, drop-shadow, recolored-non-brand, on-busy-photo, low-contrast-fill
The Coursera wordmark and Coursera Blue are precise brand assets used across institutional and partner surfaces. Skew, rotation, drop shadow, or recoloring conflict with the brand's credentialing, university-adjacent posture; the press kit on coursera.org/about/press documents the allowed treatments.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Ink 50 (#1F1F1F) on White (#FFFFFF) gives roughly 16:1 — clears AAA decisively. Coursera's long-form course-reading posture, with syllabi, transcripts, and academic prose, justifies an AAA contrast target rather than the AA floor.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.4
Source Sans Pro serves both display and prose roles on coursera.org; the typographic hierarchy is established by size and weight within a single family. A 1.4× minimum display-to-prose ratio preserves that hierarchy for course titles and module headings.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Coursera's audience includes adult learners, institutional partners, and degree-program students; consumers composing in-brand surfaces must preserve the AA contrast floor on every text-on-color combination.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 300, 400, 600, 700
The Coursera live site uses Source Sans Pro at Light (300) for hero copy, Regular (400) for body, SemiBold (600) for emphasis, and Bold (700) for headings. Source Sans 3 — the open-source successor referenced here — ships the same weight band.
contextRestriction → roles.colors.primary
- forbiddenContexts: large-fill, hero, background
- allowedContexts: cta, link, focus-ring, mark, data-viz-primary
Coursera Blue is concentrated in CTAs, links, and the mark — never as a flood-fill background. The brand canvas is the White / Bluish White surface; Coursera Blue is the accent that punctuates that surface, not replaces it.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: white, bluish-white, ink-50, blue-pale
- doesNotPairWith: warning, error, error-deep
Coursera Blue reads cleanest on White or Bluish White, or as a fill on the Ink 50 dark canvas. Placing Coursera Blue adjacent to the orange warning or red error colors introduces chromatic conflict — the cool brand blue and the warm semantic accents fight for the same eye position without resolving into hierarchy.
Provenance
- Source: https://www.coursera.org/about/press
- License:
Proprietary — All Rights Reserved - Attribution: Coursera, Inc. — visual identity captured from the deployed front-page application on coursera.org (the Coursera Design System exposes BLUE / BLUISH_WHITE / WHITE constants and the --cds-color-* / --cds-font-family-* CSS custom-property families). The Coursera press kit on dropbox.com is referenced from /about/press as the official media asset source. The Coursera logo and associated marks are property of Coursera, Inc.
- Imported:
2026-05-19 - Notes: Coursera's font stack on the live site is Source Sans Pro (open source, SIL OFL) for Latin scripts and Boutros Coursera (proprietary) for Arabic. This atom references source-sans-3@1 as the canonical body and heading face — Source Sans 3 is the maintained successor to Source Sans Pro by Adobe / Google. The Boutros Coursera bilingual companion has no open-source substitute documented here.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Coursera
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Coursera
A clear hierarchy in Coursera's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Coursera
[email protected]font · heading
Source Sans 3
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Source Sans 3
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
Source Code Pro
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ coursera-blue #0056D2 accent-hover
→ blue-dark #003C8F background-dark
→ ink-50 #1F1F1F background-light
→ white #FFFFFF border-light
→ border #E0E0E0 error
→ error #F44336 identity
→ white #FFFFFF mark
→ coursera-blue #0056D2 on-identity
→ ink-50 #1F1F1F primary
→ coursera-blue #0056D2 primary-hover
→ blue-dark #003C8F success
→ success #1B8057 surface-dark
→ ink-100 #303030 surface-light
→ bluish-white #F3F8FF text-primary-dark
→ white #FFFFFF text-primary-light
→ ink-50 #1F1F1F text-secondary-light
→ ink-300 #616161 text-tertiary-light
→ ink-500 #757575 warning
→ warning #F28100 Typography
code
→ mono Source Code Pro display
→ heading Source Sans 3 prose
→ body Source Sans 3 Palette mode mappings (from coursera)
Light mode (15 roles)
accent
→ coursera-blue accent-hover
→ blue-dark background
→ white border
→ border error
→ error primary
→ coursera-blue primary-hover
→ blue-dark success
→ success surface
→ bluish-white surface-elevated
→ white text-primary
→ ink-50 text-secondary
→ ink-300 text-tertiary
→ ink-500 warning
→ warning warning-hover
→ warning Dark mode (15 roles)
accent
→ bluish-white accent-hover
→ blue-pale background
→ ink-50 border
→ ink-300 error
→ error primary
→ coursera-blue primary-hover
→ bluish-white success
→ success surface
→ ink-100 surface-elevated
→ ink-300 text-primary
→ white text-secondary
→ surface-2 text-tertiary
→ ink-700 warning
→ warning warning-hover
→ warning Rules (9 typed constraints)
error · 6 rules
colorChoice roles.colors.primary allowed coursera-blue, blue-dark forbidden bluish-white, blue-pale, blue-deep, success, warning, error Coursera Blue (#0056D2) is the single signature primary across the entire CDS. Bluish White and Blue Pale are surface tints, not action colors; Blue Deep is a callout / hero anchor. Repurposing semantic colors (success green, warning orange, error red) as the primary action color conflicts with their established semantic meaning in the product.
colorChoice roles.colors.text-primary-light allowed ink-50, ink-100 forbidden black Coursera's canonical body text on coursera.org is Ink 50 (#1F1F1F) or Ink 100 (#303030). The CDS does not use pure #000000 for body copy — the near-black scale was chosen deliberately for reader comfort on the long-form course-syllabus and reading material the platform hosts.
forbiddenTreatment logo treatments stretched, skewed, rotated, drop-shadow, recolored-non-brand, on-busy-photo, low-contrast-fill The Coursera wordmark and Coursera Blue are precise brand assets used across institutional and partner surfaces. Skew, rotation, drop shadow, or recoloring conflict with the brand's credentialing, university-adjacent posture; the press kit on coursera.org/about/press documents the allowed treatments.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Ink 50 (#1F1F1F) on White (#FFFFFF) gives roughly 16:1 — clears AAA decisively. Coursera's long-form course-reading posture, with syllabi, transcripts, and academic prose, justifies an AAA contrast target rather than the AA floor.
fontPairing typography.display requires prose minSizeRatio 1.4 Source Sans Pro serves both display and prose roles on coursera.org; the typographic hierarchy is established by size and weight within a single family. A 1.4× minimum display-to-prose ratio preserves that hierarchy for course titles and module headings.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Coursera's audience includes adult learners, institutional partners, and degree-program students; consumers composing in-brand surfaces must preserve the AA contrast floor on every text-on-color combination.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 300, 400, 600, 700 The Coursera live site uses Source Sans Pro at Light (300) for hero copy, Regular (400) for body, SemiBold (600) for emphasis, and Bold (700) for headings. Source Sans 3 — the open-source successor referenced here — ships the same weight band.
contextRestriction roles.colors.primary forbiddenContexts large-fill, hero, background allowedContexts cta, link, focus-ring, mark, data-viz-primary Coursera Blue is concentrated in CTAs, links, and the mark — never as a flood-fill background. The brand canvas is the White / Bluish White surface; Coursera Blue is the accent that punctuates that surface, not replaces it.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith white, bluish-white, ink-50, blue-pale doesNotPairWith warning, error, error-deep Coursera Blue reads cleanest on White or Bluish White, or as a fill on the Ink 50 dark canvas. Placing Coursera Blue adjacent to the orange warning or red error colors introduces chromatic conflict — the cool brand blue and the warm semantic accents fight for the same eye position without resolving into hierarchy.
Provenance
- Source
- https://www.coursera.org/about/press
- License
Proprietary — All Rights Reserved- Attribution
- Coursera, Inc. — visual identity captured from the deployed front-page application on coursera.org (the Coursera Design System exposes BLUE / BLUISH_WHITE / WHITE constants and the --cds-color-* / --cds-font-family-* CSS custom-property families). The Coursera press kit on dropbox.com is referenced from /about/press as the official media asset source. The Coursera logo and associated marks are property of Coursera, Inc.
- Imported
2026-05-19- Notes
- Coursera's font stack on the live site is Source Sans Pro (open source, SIL OFL) for Latin scripts and Boutros Coursera (proprietary) for Arabic. This atom references source-sans-3@1 as the canonical body and heading face — Source Sans 3 is the maintained successor to Source Sans Pro by Adobe / Google. The Boutros Coursera bilingual companion has no open-source substitute documented here.