Coursera

Overview

Coursera is a global learning platform that democratizes access to world-class education through online courses, professional certificates, specializations, and degrees. The design system embodies "Accessible Professionalism"—a philosophy that combines institutional trust with modern clarity. The aesthetic is rooted in clean typography, generous whitespace, and a vibrant cobalt blue (#0056d2) that signals actionable moments and brand presence. The UI evokes confidence and approachability: users should feel empowered to explore, enroll, and progress through their learning journey without friction. The brand personality is encouraging yet grounded—never patronizing, always respectful of the learner's time and ambition. Voice example: "Master in-demand skills with courses from Google, Meta, and Stanford—start learning today, at your pace."

Colors

The color system is anchored by a primary cobalt blue (#0056d2) used exclusively for interactive elements—call-to-action buttons, links, focus states, and brand moments. This blue is derived from the meta theme-color tag and appears in the live computed styles on all primary CTAs (backgroundColor: rgb(0, 86, 210)). Secondary blue (#3860be) and tertiary green (#68b631) provide supporting accent roles for secondary actions and success states. The surface stack is built on pure white (#ffffff) for the main canvas, with a carefully calibrated gray hierarchy: surface-container-low (#f0f0f0) for subtle backgrounds, surface-container-highest (#d8d8d8) for strong contrast dividers. On-surface text is a near-black (#0d0f12), ensuring WCAG AAA contrast (18:1) against white. The outline system uses #

Typography

The type system uses Source Sans Pro exclusively, a humanist sans-serif that balances professionalism with warmth. The hierarchy spans from display (56px, 600 weight, -0.02em tracking) for hero headlines down to label-sm (12px, 500 weight, 0.03em tracking) for metadata and badges. Body text is set at 16px with 400 weight and 24px line-height (1.5x), ensuring readability at all screen sizes and accessibility compliance. Headlines use 600 weight with tighter line-heights (1.33x) to create visual emphasis without sacrificing legibility. Letter-spacing is negative on large sizes (-0.02em on display, -0.015em on headline-lg) to tighten the visual color and create sophistication; it becomes positive (0.01–0.03em) on small labels to improve clarity. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05

Layout

The layout uses a 12-column fluid grid with a max-width of 1440px, centered on the viewport. The gutter is consistently 24px (md spacing token), applied symmetrically on left and right. Container padding is 24px on desktop, reducing to 16px on tablet (600px+) and 12px on mobile to preserve content breathing room. Section separation uses lg spacing (40px) for major rhythm breaks (hero to featured courses, featured courses to footer), md spacing (24px) for subsection breaks within a section. Cards and components use md padding (24px) internally, with sm gutters (12px) between nested elements. The grid is fluid below 1024px, allowing cards to reflow from 3 columns to 2 to 1 as needed. Hero sections span full-width with internal content constrained to container-max. Whitespace is treated as a

Elevation & Depth

Depth is conveyed through a subtle shadow system and strategic use of background color shifts rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow, representing the primary canvas. Level 2 (Cards, Inputs): 1px solid border in outline-variant (#e2e2e2) plus box-shadow: 0 1px 6px rgba(15, 17, 20, 0.1), 0 1px 4px rgba(15, 17, 20, 0.1)—a soft, close shadow that suggests subtle lift. Level 3 (Modals, Dropdowns, Hover States): box-shadow: 0 3px 10px rgba(15, 17, 20, 0.2), 0 3px 10px rgba(15, 17, 20, 0.2)—a more pronounced shadow with greater blur and spread, cre

Shapes

The shape philosophy is "Soft Geometric"—rounded corners are applied judiciously to soften the interface without sacrificing clarity or professionalism. Buttons and primary CTAs use lg radius (1rem / 16px), creating a friendly, approachable appearance while remaining clearly clickable. Cards and containers use lg radius (16px) for consistency with buttons, establishing a cohesive visual language. Input fields use DEFAULT radius (0.5rem / 8px), a subtle rounding that suggests interactivity without overwhelming. Badges and chips use full radius (9999px), creating a pill shape that signals status

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#0056d2) background with {colors.on-primary} (white) text, {typography.label-md} (14px, 600 weight), {rounded.lg} (16px), and padding 8px 16px, resulting in a 40px height. Hover state transitions backgroundColor to {colors.primary-container} (#1a73e8) over 200ms. Active state deepens to #0041a8. Focus state adds a 3px outline in rgba(0, 86, 210, 0.3). Secondary buttons use transparent background with {colors.primary} text and a 1px solid border in {colors.primary}; hover state fills the background with {colors.surface-container-low} (#f0f0f0). All buttons use cursor: pointer and disable pointer-events when disabled, with opacity: 0.5 applied.

Containers & Surfaces Cards are the pri

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0056d2) exclusively for interactive elements—buttons, links, focus states—to create a consistent, scannable interface.
• Do maintain 24px gutter spacing between major sections and 12px between nested components to create visual breathing room and improve scannability.
• Do apply {rounded.lg} (16px) to all primary buttons and cards to signal friendliness and approachability without sacrificing professionalism.
• Do use Source Sans Pro at 16px with 24px line-height (1.5x) for body text to ensure WCAG AAA readability and accessibility compliance.
• Do layer shadows using the elevation scale (sm/md/lg) to create clear depth hierarchy; never use multiple shadows on a single element.
• Do apply focus states with a 3px outline in rgba(0, 86, 210, 0.3) on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use colors other than {colors.primary} (#0056d2) for primary CTAs; secondary and tertiary colors are reserved for supporting actions and status indicators.
• Don't apply border-radius greater than {rounded.lg} (16px) to cards or containers; reserve {rounded.full} (9999px) for badges and chips only.
• Don't use shadows darker than {elevation.md} (0 3px 10px rgba(15, 17, 20, 0.2)) on standard cards; reserve {elevation.lg} for modals and floating elements.
• Don't set line-height below 1.5x on body text (16px × 1.5 = 24px minimum); tighter leading reduces readability and accessibility.
• Don't mix font families; Source Sans Pro is the only typeface used across the system—no serif, script, or monospace fonts.
• Don't apply opacity below 0.5 to disabled buttons; use opacity: 0.5 with cursor: not-allowed to maintain clarity and accessibility.