Coursera DESIGN.md

Online learning with marketplace breadth, academic trust, and blue-led clarity. Coursera's public site uses a clean sans system, white and pale-blue surfaces, structured category browsing, and strong Coursera blue (#0056D2) to organize courses, certificates, degrees, and career pathways.

1. Visual Theme & Atmosphere

Overall Aesthetic

Coursera feels like digital education presented through a structured, trustworthy marketplace interface. It combines academic credibility, catalog breadth, and career-oriented conversion in a bright, orderly system.

Mood & Feeling

• Educational and trustworthy
• Career-focused and structured
• Mainstream, accessible, and global
• Marketplace-clear rather than boutique
• Supportive and progression-oriented

Design Density

Medium to high density. Coursera surfaces contain many categories, partners, and program types, but strong modular sections and familiar blue cues keep the experience navigable.

Visual Character

• White base with blue trust signals
• Partner logos and course categories as key browsing tools
• Card-based pathways for certificates and collections
• Clean educational-marketplace structure
• Friendly but not playful academic tone

2. Color Palette & Roles

Core Foundation

Support and Utility

3. Typography Rules

Font Stack

css--font-display: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Typography Philosophy

Coursera typography should feel academic, accessible, and conversion-friendly. It should support catalog exploration, educational trust, and career progression.

4. Component Stylings

Buttons

css.button-primary {
  background: #0056d2;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
}

.button-primary:hover {
  background: #0045ab;
}

.button-secondary {
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #d9e3f5;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
}

Course and Program Cards

css.program-card {
  background: #ffffff;
  border: 1px solid #d9e3f5;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0, 86, 210, 0.05);
}

Inputs

css.input {
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #d9e3f5;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 16px;
}

Component Notes

• Partner logos and educational credibility cues should stay prominent
• Course collections and professional certificates need strong modular framing
• Blue is the main orientation and trust color

5. Layout Principles

Spacing Scale

Layout Behavior

• Organize by goals: career, skills, degree, certificate, collection
• Use partner logos as a major trust and discovery tool
• Keep educational-marketplace flows clear and familiar
• Let promotions and collections stay distinct from evergreen catalog browsing

Whitespace Philosophy

Whitespace should feel structured and educational, helping a very large course marketplace remain approachable.

6. Depth & Elevation

Elevation Strategy

Coursera uses light marketplace elevation with clear program cards and soft blue support bands.

css--shadow-soft: 0 8px 18px rgba(0, 86, 210, 0.04);
--shadow-card: 0 14px 28px rgba(0, 86, 210, 0.08);

Surface Hierarchy

• White base
• Soft blue support backgrounds
• Program and collection cards
• Blue used for trust, navigation, and action

7. Do's and Don'ts

Do

• Keep the system clear, educational, and trustworthy
• Use blue to organize action and navigation
• Preserve partner and credential credibility cues
• Make large category systems easy to browse

Don't

• Do not turn Coursera into a playful consumer-ed app
• Do not bury educational trust signals under aggressive promotions
• Do not overcomplicate the browsing hierarchy
• Do not reduce the clarity of course/program cards with unnecessary decoration

8. Responsive Behavior

Breakpoints

Responsive Rules

• Keep the primary goal-selection flow obvious on mobile
• Preserve readable category and collection cards
• Stack broad educational catalog sections before shrinking them too far
• Maintain strong visual separation between courses, collections, and promotions

9. Agent Prompt Guide

Quick Reference

• White and soft-blue online-learning marketplace foundation
• Coursera blue for trust, CTAs, and navigation
• Program cards, partner logos, category rails, and clear educational hierarchy
• Academic trust with career-oriented clarity

Prompt Template

textDesign this like Coursera's current public website:
- white and soft-blue online-learning marketplace foundation
- strong Coursera-blue navigation and CTA system
- program cards, partner logos, and category browsing with clear educational hierarchy
- academic trust plus career-focused conversion cues
- structured, mainstream, highly legible learning-platform UX