Cog Design System

General Assembly

As a Front End Engineer at General Assembly (GA), I had the pleasure of working on the development of a front end design system called Cog. Cog serves as the backbone of the user interface for GA's diverse product offerings, providing a powerful, unified design language and consistent look and feel across the platform. Cog streamlined the design process at General Assembly and enabled the org to move faster and more efficiently.

Cog Design System Dashboard

Comprehensive Documentation

One of the key factors that sets Cog apart from previous systems we built at GA is its extensive documentation. The Cog documentation portal, hosted at ga.design, covers usage guidelines, alternatives, live code examples, and property definitions for every component. This level of detail ensures that the system is used as intended and stands the test of time.

example of documentation

Reusable Components and Unified Language

Cog's thoughtfully curated set of reusable components follows well-defined guidelines, structures, and terminology. This allows for seamless design of comprehensive user experiences within the GA ecosystem. To better enable the design team we also hosted a Cog Sketch symbol library containing all low-level components and several common compositional ones, making it easy to insert symbols and maintain consistency across projects.

We also created a playroom enabling designers and other team members to quickly compose and experiment with components in the system.

cog design playroom

There is also starter kits for Create React App to help developers get started bootstrapping a new project with Cog, along with comprehensive documentation on how to use the system for existing projects.

Accessibility

Accessibility has always been a top priority in the development of the Cog Design System. To ensure that our user interface remains inclusive and accessible to all users, Cog strictly adheres to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards. By incorporating features such as sufficient color contrast, keyboard navigation, and semantic HTML markup, we've created a system that is not only visually appealing but also accommodates various needs and abilities. Our commitment to accessibility fosters a more inclusive user experience, enabling General Assembly to better serve a diverse range of customers while staying compliant with industry standards and regulations.

checking color contrast ratios

Streamlined Design & Development Process

Cog's robust design system significantly improved the efficiency of GA's design process. By utilizing reusable components and a unified language, teams were able to quickly create and iterate on designs while maintaining a consistent look and feel. This enabled engineers and designers to build critical differentiating software for GA.

Improved Aesthetics and User Experience

During the development of Cog, we meticulously tested different treatments of typography, color pairings, and example interfaces based on actual GA products. This attention to detail resulted in an aesthetically pleasing and cohesive user experience across the platform.

Continuous Improvement and Collaboration

Since its release, Cog has gone through multiple iterations and improvements, with contributions from the entire team. Cog continues to evolve as we learn from user feedback and industry trends, ensuring that the system remains cutting-edge and adaptable to the needs of GAs B2B and B2C customers.

Learn more about Cog