Udemy

Overview

Udemy is a global online learning platform democratizing education through accessible, high-quality courses in technology, business, creative skills, and AI. The design system embraces a "Vibrant Minimalism" aesthetic: a bold purple-dominant color palette (#5022c3) energizes the interface while clean typography and generous white space ensure clarity and focus. The brand personality is empowering yet approachable—confident in its mission to transform careers, but never condescending. The UI celebrates learning through dynamic hero sections, intuitive course discovery, and prominent call-to-action buttons that invite action without overwhelming the user. Voice: direct, encouraging, and practical. Example: "Master in-demand skills with expert instructors—start learning today."

Colors

The color system is anchored by a signature purple primary (#5022c3) used exclusively for interactive elements, CTAs, and brand-critical focus states. This purple appears across the full Material 3 token stack: primary-container (#8072e6) for elevated states, primary-fixed (#eeeffc) for subtle backgrounds, and inverse-primary (#c0c4fc) for dark-mode contexts. Supporting accents include a vibrant green secondary (#68b631) for success states and achievement badges, and a golden yellow tertiary (#e9e729) for highlights and promotional badges. The surface stack is anchored in clean whites (#ffffff for surface, #f5f5f5 for surface-dim) with carefully calibrated grays (#e9e9e9, #d8d8d8, #c1c1c1) for dividers, outlines, and container backgrounds. On-surface text is a near-black (#1a1a1a) for maxi

Typography

The typography system uses Udemy Sans as the primary typeface, with Roboto and system fonts as fallbacks, creating a modern, accessible hierarchy. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) introduces key sections like "Learn essential career and life skills." Headline-md (28px, 600 weight) breaks up content zones. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) carries descriptive copy and course descriptions. Body-md (16px, 400 weight, 24px line-height) is the default body text, applied to all paragraph content and list items. Label-md (14px, 500 weight, 0.01em tracking) styles button text, form labels, and navigation items. Label-sm (12px, 500 weight, 0.

Layout

The layout system uses a 12-column grid with a 1200px container max-width, maintaining a fluid 24px gutter on desktop and collapsing to 16px on tablet. Page rhythm is established through consistent spacing: 40px (lg) separates major sections (hero to course grid), 24px (md) separates cards within a grid, and 12px (sm) separates inline elements. The hero section spans full-width with a vibrant purple gradient background (#5022c3 to #8072e6), containing a white card overlay (surface-container-lowest) with headline-lg copy and two CTAs. Course cards use the card component (surface, 1px outline-variant border, 24px padding, 1rem rounded) arranged in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile. White-space philosophy prioritizes breathing room: minimum 16px padding inside

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background shifts. Level 1 (Base): surface (#ffffff) with no shadow, used for the main page background and card interiors. Level 2 (Elevated Cards): surface with elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)), 1px outline-variant border (#d7d7d7), and surface-container-high background on hover. Level 3 (Modals & Overlays): modal-content with elevation.lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)), 1.5rem rounded corners, and a semi-transparent dark overlay (rgba(0, 0, 0, 0.5) with 4px blur backdrop-filter). Interactive elements

Shapes

The shape philosophy is "Soft-Technical Clarity"—rounded corners are used strategically to soften the interface while maintaining a professional, modern aesthetic. Buttons use 1rem (16px) border-radius, creating a pill-like appearance that feels approachable and clickable. Cards and modals use 1.5rem (24px) border-radius for a more generous, premium feel. Input fields use 0.5rem (8px) border-radius for a subtle, contained look. Chips and badges use 9999px (full) border-radius for a fully rounded appearance, signaling their role as discrete, removable elements. The hero section and large contai

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#5022c3) background with white text, 12px 24px padding, 48px height, and 1rem border-radius. On hover, the background shifts to #371783 (a darker purple from the primary scale) with a 0 3px 8px rgba(80, 34, 195, 0.2) shadow and 200ms ease-out transition. On active/pressed, the background becomes #281160 (even darker) with no shadow. The button-secondary component uses a transparent background with a 2px solid {colors.primary} border, {colors.primary} text, and the same padding and height. On hover, it gains a {colors.primary-fixed} (#eeeffc) background while maintaining the border. Both button variants use {typography.label-md} (14px, 500 weight) and apply cursor: pointer.

Do's and Don'ts

**Do**

• Do use {colors.primary} (#5022c3) exclusively for CTAs, links, and active states—never for backgrounds or decorative elements.
• Do maintain 24px minimum padding inside cards and 40px spacing between major sections to preserve breathing room.
• Do apply {typography.label-md} (14px, 500 weight) to all button text and form labels for consistency.
• Do use {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) for modals—never mix shadow levels.
• Do transition all interactive elements (buttons, cards, inputs) with 200ms ease-out timing for smooth, predictable motion.
• Do use 1rem (16px) border-radius on buttons and 1.5rem (24px) on cards to maintain the soft-technical aesthetic.

**Don't**

• Don't use secondary (#68b631) or tertiary (#e9e729) as primary CTAs—reserve these for badges, success states, and highlights only.
• Don't apply shadows to buttons at rest; only add {elevation.md} on hover to signal interactivity.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—custom radii break visual consistency.
• Don't mix {typography.body-md} and {typography.label-md} in the same context; use body for descriptive copy and label for UI controls.
• Don't apply text-shadow to body copy or headlines; reserve it only for small labels (label-sm) over busy backgrounds.
• Don't use {colors.on-surface-variant} (#5a5a5a) for primary text—it's reserved for secondary information and disabled states.