Udemy DESIGN.md
Brands
Course marketplace with strong category browsing, educational commerce clarity, and a dark-purple brand anchor. Udemy's public site combines white surfaces, black text, purple accents, and broad catalog navigation.
At a glance
- Group
- Brands
- Main color
- #a435f0Purple design systems
- Fonts
- Udemy SansSF Mono
Colors in this file
- #d1d7dc
Unnamed
- #a435f0
Unnamed
- #1c1d1f
Unnamed
- #8710d8
Unnamed
- #ffffff
Unnamed
- #f7f9fa
Unnamed
- #6a6f73
Unnamed
Course marketplace with strong category browsing, educational commerce clarity, and a dark-purple brand anchor. Udemy's public site combines white surfaces, black text, purple accents, and broad catalog navigation.
1. Visual Theme & Atmosphere
Overall Aesthetic
Udemy feels like skills learning presented as a large, accessible digital marketplace.
Mood & Feeling
- Educational
- Commercial
- Practical
- Broad
- Mainstream
Design Density
Medium to high density. Categories and offers are numerous, but the structure is familiar and retail-like.
Visual Character
- White and light-gray base
- Purple brand accents
- Course shelves and category navigation
- Broad educational-commerce framing
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--udemy-purple | #A435F0 | Primary brand accent |
--udemy-purple-deep | #8710D8 | Hover/support |
--udemy-black | #1C1D1F | Text anchor |
--udemy-white | #FFFFFF | Main surface |
--udemy-surface | #F7F9FA | Background |
--udemy-muted | #6A6F73 | Secondary text |
--udemy-border | #D1D7DC | Borders |
3. Typography Rules
Font Stack
css--font-display: "Udemy Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Udemy Sans", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;
Type Scale
Hero 52/700, H1 38/700, H2 28/700, Body 16/400, Small 14/400
Typography Philosophy
Use educational-commerce typography that supports broad browsing and trust.
4. Component Stylings
css.button-primary { background:#a435f0; color:#fff; border:none; border-radius:8px; min-height:44px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#1c1d1f; border:1px solid #d1d7dc; border-radius:8px; min-height:44px; padding:0 18px; }
.card { background:#fff; border:1px solid #d1d7dc; border-radius:14px; }
5. Layout Principles
Spacing Scale
4, 8, 12, 16, 24, 32, 48, 64px
Layout Behavior
- Lead with category and skill discovery
- Use partner/course cards and shelves
- Keep educational trust and conversion in balance
6. Depth & Elevation
Udemy uses light marketplace-card depth with clear edges rather than heavy shadow.
7. Do's and Don'ts
Do
- Keep the marketplace broad and easy to browse
- Use purple as a clear brand signal
- Preserve educational trust
Don't
- Don’t make it overly academic and formal
- Don’t clutter card shelves with decorative noise
8. Responsive Behavior
Breakpoints
- Mobile
<768px - Tablet
768px-1023px - Desktop
1024px+
Responsive Rules
- Keep course shelves readable on mobile
- Stack dense category structures before shrinking too far
9. Agent Prompt Guide
textDesign this like Udemy: white educational marketplace surfaces, purple CTA accents, broad skill-category browsing, simple course cards, and practical learning-commerce clarity.Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Nutanix
Brands · Inter
Hybrid-cloud platform design with deep purple branding, dark product surfaces, and enterprise infrastructure clarity. Nutanix’s current visual language frames platform complexity inside modular, future-oriented…
Wayfair
Brands · Inter
Home furnishings retail with broad catalog density, warm merchandising, and soft home-oriented polish. Wayfair's public site uses a white base, dark text, subtle category framing, and the Wayfair purple identity…
Heroku
Brands · Salesforce Sans
App platform design with official purple foundations, cloud-blue support, and developer-friendly deployment workflows.
Railway
Brands · Inter
Deployment platform design with dark command-center surfaces, violet infrastructure accents, and fast project-to-production workflows.
Brands · Helvetica Neue
Visual-first storytelling with a clean, content-forward chrome. Instagram's public product wraps a minimal white (or true-black dark mode) interface around a vivid gradient brand mark, letting photos and video carry…
Ocado
Brands · Source Sans Pro
Ocado is the UK's online-only grocer. Its own history begins with the words "We were founded in 2000, and just one year later, pilot deliveries had begun" — a supermarket with no shops, built on automated warehouses.…