A favicon of Cookbook

Cookbook

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

Visit Cookbook
A screenshot of CookbookVisit

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:
Share:

Similar to Cookbook:

Design tokens & components for scalable, elegant products.
CompanyFigma+1 more
Access design tokens and interactive components to build modular, elegant, and accessible digital products with visual consistency at scale.
Build cohesive digital experiences, faster.
CompanyFigma+2 more
Build consistent SaaS products and digital experiences faster with a comprehensive design system. Access working code, design tools, and guidelines.
Build beautiful, accessible React UIs faster.
CompanyFigma+2 more
Build UIs faster with open-source, accessible React components. Highly customizable, leveraging Radix UI and Tailwind CSS for modern, professional interfaces.

Command Menu