The CMS Design System provides a robust framework for creating accessible, responsive, and Section 508 compliant websites. Built on the foundation of the U.S. Web Design System, it incorporates various CSS and React components, utility classes, and a grid framework, enabling teams to quickly prototype and deploy user-friendly websites. In this blog post, we’ll guide you through the essential steps to get started with the CMS Design System, including troubleshooting tips to overcome common issues.

Contents

• Packages
• Running Locally
• Getting Started
• Scripts
• Visual Regression Testing
• Design Assets
• Examples
• Contributing
• Contact

Packages

The CMS Design System is organized as a monorepo, hosting multiple NPM packages located in the packages directory. Below are some of the key packages available:

Name	Description
CMS Design System	The core CSS, JS, and React components for the design system.
Healthcare.gov Design System	Design system used by application teams at healthcare.gov.
Medicare.gov Design System	Design system used by application teams at medicare.gov.
CMSDS Documentation	Gatsby based CMSDS documentation site.

Running Locally

To start working with the CMS Design System locally, you will need Yarn for package management. If you haven’t installed Yarn yet, follow the guide to install Yarn.

Scripts

The following commands can be run from the root directory of the repository:

yarn install   # Installs dependencies
yarn start      # Starts a local server for development
yarn test       # Runs unit tests for all packages
yarn build      # Compiles the assets for production
yarn lint       # Runs linters for code quality

Visual Regression Testing

To ensure consistency in your components, we utilize Playwright for visual regression testing. Playwright captures screenshots of components, compares them to stored references, and helps maintain visual fidelity throughout development.

Using Docker for Testing

1. Ensure Docker is running and you are signed in.
2. Run yarn test:browser to start comparing component images.
3. If expected changes occur, run yarn test:browser -u to update the reference images.

Design Assets

All design assets, including components, styles, and design tokens, are available in the Figma library. This allows for seamless collaboration between designers and developers, ensuring your project stays visually consistent.

Examples

Examples of the design system in action can be found in the examples directory. These examples serve as practical templates for implementing various components.

Contributing

If you’re interested in contributing to the CMS Design System, please refer to the CONTRIBUTING.md document for guidelines.

Contact

For inquiries related to the CMS Design System, visit design.cms.gov/contact for a list of contact options.

Troubleshooting

If you encounter any issues while using the CMS Design System, consider the following troubleshooting steps:

• Check for proper installation of Yarn and dependencies.
• Ensure Docker is running if you’re using the Playwright testing suite.
• Verify that all necessary files are correctly configured and up to date.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.