
Cookbook
Build consistent, accessible digital experiences with a comprehensive system of styles and scalable components. Create intuitive interfaces guided by user-centric principles.

Explore a comprehensive design system for crafting digital experiences, structured around Brad Frost's Atomic Design methodology. This system employs a unique food-themed analogy: 'Ingredients' for foundational styles, 'Recipes' for individual components, and 'Entrees' for more complex component assemblies. The Ingredients include a carefully curated system of type (like Poppins and Open Sans) and color styles (such as primary Red and active Teal), all designed with accessibility at their core. This ensures that digital experiences are inclusive for all users. The Recipes and Entrees provide a library of scalable components that bring consistency and predictability to interactions across various products. These include:
- Badges: Small indicators for important information.
- Buttons: Actionable touchpoints for user engagement.
- Review ribbons: Star-based displays for business ratings.
- Selections: UI elements for choosing features or options. Guiding the design process are key principles like 'Don’t make me think!' and 'Make me feel understood,' which help in creating intentional, clear, and user-centric designs that build trust and help users achieve their goals effectively.
Categories:
Similar to Cookbook:
Unified framework for cohesive product interfaces.
CompanyFigma+1 more
Establish consistent UI foundations across a product ecosystem. Unify diverse experiences with a comprehensive framework covering styles, expression, content, and accessibility.
Craft inclusive web apps with a proven design system.
CompanyFigma+1 more
Build intuitive, accessible web experiences at scale. Access UI guidelines, React components, design resources, and dev tools for faster, inclusive development.
Craft consistent e-commerce UIs with flexible React primitives.
CompanyFigma+2 more
Build consistent user interfaces for e-commerce applications with a React-based design system. Access components, hooks, icons, and utilities.