The CMMI Institute Design System is both a visual style guide and a library of user interface components. It guides visual and interactive consistency across systems for a cohesive web experience. Primarily used by internal development teams, the system makes building new features easier and faster. We also share it with vendors and contractors so we're all working with the same tools.

Every artifact has a sample HTML snippet that can be used to quickly add it to a page. When an update to a component or style is needed, changing it in the design system will update it everywhere else.

Below are sample artifacts from each section of the design system.

Our design principles provide the foundation upon which a system of patterns and components is built.

Components are the basic building blocks of our design system. You can put components together to form more complex patterns.

Patterns are made up of smaller components or otherwise consist of more complex blocks of functionality, but like components they are reusable design patterns, each with a corresponding block of HTML markup that will bring in all of the styles and behavior needed to realize those patterns.