>> View the full documentation site here <<
The Medicare.gov Design System contains shared design and front-end development resources for Medicare.gov applications, and is built on top of the CMS Design System (CMSDS). As a child design system, it inherits base styles, components, and guidance from the CMS Design System, while also adding its own features and customizations.
yarn add @cmsgov/ds-medicare-gov
For full documentation on installation and usage in your Medicare.gov product, please refer to our documentation site.
This site-wide design system has a much smaller group of users than the core CMS Design System. It's up to us to make it useful for our apps. It is a place to share code and collaborate across teams. It is our collective source of truth for design. If you want to contribute but need help getting started, shout in the #mgov-design-system Slack channel on the CMS Slack or open up an issue on this repo.
- Install the latest stable version of Node.js
- Install Node.js via Node Version Manager nvm (recommended but not required). Run
nvm useto easily use the correct node version for this repository. - Install Yarn for package management. Yarn helps to ensure everyone is using the same package versions.
yarn installyarn start- Will run the site locally at http://localhost:3000/
These scripts can all be run from the root level of the repo:
yarn start- Starts local server running the documentation site
- Regenerates documentation when files change
yarn build- Compiles and processes all the code and assets and copies them to the
distdirectory so that they're ready for distribution and consumption as a package
- Compiles and processes all the code and assets and copies them to the
yarn test- Runs JS unit tests
yarn test:e2e- Runs end to end tests
yarn update-snapshots- Updates Jest snapshots
yarn lint- Runs Prettier for formatting
- Lints JS using ESLint
- Lints Sass using stylelint
yarn gh-pages- Builds the documentation site and publishes it to GitHub Pages
- Note that it operates from your local version, so whatever version you have checked out will be built and deployed to GitHub Pages
As a child design system, the Medicare.gov Design System shares the same tooling and organization as the CMSDS. For more information on how to extend and customize SASS, JS, and documentation, check out the child design system example and its documentation.
You can find the Medicare design system Sketch file and related fonts in the design-assets folder.
You can also view the Medicare InVision Design System Manager design assets.
- For more information on the original Design System, check out its GitHub page.
The design system is currently being applied to some pages on Medicare.gov and project teams are actively working to apply the design system consistently across additional Medicare products.