Udemy

Udemy's design system portrays a confident, organized learning platform. It uses a predominantly light theme with stark, dark gray typography for high contrast, ensuring readability for educational content. The visual signature comes from the judicious use of a vibrant violet accent for interaction and brand elements, creating moments of activation against the otherwise neutral canvas. Components are structured and purposeful, featuring soft-cornered cards, pill-shaped buttons, and a clear visual hierarchy that guides the user through course content. Use Deep Graphite (#2a2b3f) for primary text and main headings to ensure high contrast and readability on light backgrounds. Apply Regal Violet (#6d28d2) for all interactive link text and primary UI element accents, always maintaining a consistent visual cue for action. Round corners of most cards and content blocks to 8px for a soft and approachable aesthetic. Prioritize Canvas Background (#e9eaf2) for general page backgrounds and Surface White (#ffffff) for elevated or interactive card surfaces. Implement pill-shaped buttons (1000px radius) for filter and tag elements, paired with Deep Graphite text on Surface White. Utilize a 16px element gap for consistent vertical rhythm between distinct UI components such as cards and text blocks. Apply elevation shadows of oklch(0.6295 0.0204 306.5 / 0.08) 0px 2px 8px 0px, oklch(0.6295 0.0204 306.5 / 0.12) 0px 4px 16px 0px only for truly elevated or interactive elements, like focused buttons. Avoid using highly saturated colors for large background areas; maintain the integrity of the neutral canvas. Do not deviate from the established typography hierarchy; avoid using 'Udemy Sans' at unapproved sizes or weights for headings or body copy. Refrain from introducing custom shadows or border radii. All elevation and shape properties must adhere to the defined tokens. Do not use black or pure white for text or backgrounds unless explicitly specified; opt for the richer neutral shades like Deep Graphite or Canvas Background. Avoid excessive use of borders; let surface color and subtle spacing define boundaries between content sections. Do not create new interaction colors; Regal Violet is the primary interactive accent, and Success Orange is reserved for semantic feedback. Avoid decorative imagery that competes with the UI; visuals should support the content without overwhelming it.