
LeafyGreen Design System
Access an open-source design system with UI components, foundational guidelines, and accessibility resources to create intuitive and beautiful user experiences.

LeafyGreen Design System is MongoDB’s open-source solution for creating intuitive and beautiful user experiences. It provides a comprehensive set of tools and guidelines to ensure consistency and quality in digital product development.
The system features an extensive library of UI Components, ready for immediate use. These are organized into practical categories such as:
- Navigation
- Notifications
- Modals
- Display elements
- Form inputs
- Common UI Patterns
Core visual and interactive principles are defined in its Foundations. This includes guidance on:
- Typography for clarity and hierarchy.
- A comprehensive Iconography library.
- A defined Color Palette for branding and accessibility.
Additionally, LeafyGreen offers Resources like accessibility guidelines and icon creation guides. This helps teams build inclusive and polished products efficiently, maintain brand consistency, and deliver high-quality user interfaces.
Similar to LeafyGreen Design System:
Minimal Figma kit for rapid SaaS UI design.
Figma
Craft stunning SaaS interfaces with this minimal Figma UI kit. Jumpstart projects with one-time pricing & lifetime updates. Ideal for solo designers & teams.
Build faster with Tailwind CSS components & Figma.
FigmaReact+2 more
Develop websites faster with 600+ Tailwind CSS UI components, Figma designs, dark mode, RTL support, and free SVG icons & illustrations.
Build more, faster, with advanced UI components.
ReactTailwind CSS
Expand your UI toolkit with composable, accessible, open-source components. Build feature-rich interfaces like AI chatbots and collaborative canvases faster.