# The CMS Design System Docs > The CMS design system is a set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. ## Blog - [Release 10.0](https://design.cms.gov/blog/release-10.0/llms.txt): Reduced JavaScript bundle sizes, improved web components, removed deprecated font classes, and cleaned up tokens - [Release 10.1](https://design.cms.gov/blog/release-10.1/llms.txt): New web components, à la carte web component bundles, further bundle-size reductions, and analytics updates - [Release 11.0](https://design.cms.gov/blog/release-11.0/llms.txt): Figma migration, further bundle-size reductions, and replacement of privacy settings dialog - [Release 12.0](https://design.cms.gov/blog/release-12.0/llms.txt): Replacement of privacy settings dialog - [Release 13.0](https://design.cms.gov/blog/release-13.0/llms.txt): React 18 Upgrade - [Release 5.0](https://design.cms.gov/blog/release-5.0/llms.txt): Hey everyone, we're doing something new! We've saved up a program increment's worth of updates into a single release, and it's going out with a little fanfare. - [Release 6.0](https://design.cms.gov/blog/release-6.0/llms.txt): Shipping CSS instead of Sass, introducing new masked fields, streamlining ZIP code patterns, and more - [Release 7.0](https://design.cms.gov/blog/release-7.0/llms.txt): Normalizing CSS, standardizing spacing & colors, a new Dropdown, and more - [Release 8.0](https://design.cms.gov/blog/release-8.0/llms.txt): Getting ready for Open Enrollment season - [Release 9.0](https://design.cms.gov/blog/release-9.0/llms.txt): Differentiating between labels, hints, and errors, standardizing dialog close buttons, improving the drawer and dialog APIs, consolidating configuration functions, and refining typography design tokens. - [Sketch UI Kit release 6.0](https://design.cms.gov/blog/design-release-6.0/llms.txt): Sketch Cleanup / Design Debt work to improve accuracy and consistency in Sketch UI design libraries. Applies to Core, HealthCare & Medicare ## Components - [Accordion](https://design.cms.gov/components/accordion/llms.txt): An accordion is a list of headers that hide or reveal additional content when selected. - [Alert](https://design.cms.gov/components/alert/llms.txt): Alerts give feedback to users, provide critical information, and/or offer key supplementary details about a task. - [Autocomplete](https://design.cms.gov/components/autocomplete/llms.txt): Autocompletes allow users to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted), and receive one or more suggested matches in a list below the input. - [Badge](https://design.cms.gov/components/badge/llms.txt): Badges hold small amounts of information and draw attention to new or important content. - [Button](https://design.cms.gov/components/button/llms.txt): Buttons allow users to take actions from a current state to a future state. - [Card](https://design.cms.gov/components/card/llms.txt) - [Checkbox](https://design.cms.gov/components/checkbox/llms.txt): Checkboxes allow users to select one or more options from a list. - [Component analytics](https://design.cms.gov/components/analytics/llms.txt) - [Components overview](https://design.cms.gov/components/overview/llms.txt) - [Drawer & Help Drawer](https://design.cms.gov/components/drawer/llms.txt): A drawer provides a space for medium to long-form help content — content that's too long or not common enough to warrant being on the page by default. - [Dropdown](https://design.cms.gov/components/dropdown/llms.txt): Dropdowns allow users to select one option from a temporary modal menu. - [Filter Chip](https://design.cms.gov/components/filter-chip/llms.txt): Filter Chips are used to display dismissible filter chips. - [Global config](https://design.cms.gov/components/config/llms.txt) - [Hint](https://design.cms.gov/components/hint/llms.txt): Hint text is used in combination with a Label to provide extra instructions or context for form fields. - [Icon](https://design.cms.gov/components/icon/llms.txt): Icons help communicate meaning, actions, status, or feedback. - [Idle Timeout](https://design.cms.gov/components/idle-timeout/llms.txt): A component that counts down to the end of a session (behind the scenes) and shows a warning message after a set amount of time of inactivity. - [Inline Error](https://design.cms.gov/components/inline-error/llms.txt): Inline errors give validation feedback for specific form fields. - [Inset (HC.gov)](https://design.cms.gov/components/inset/llms.txt): The Inset component is meant to draw attention to important content, or to associate a block of content with another element. - [Label & Legend](https://design.cms.gov/components/label/llms.txt): Labels & legends describe individual form fields or fieldsets. - [Modal Dialog](https://design.cms.gov/components/modal-dialog/llms.txt): The dialog component can be used to focus a user's attention on a single piece of content, without taking them to a new screen. Please use with caution; view our guidance for more details. - [Month Picker](https://design.cms.gov/components/month-picker/llms.txt) - [Note Box](https://design.cms.gov/components/note-box/llms.txt): The note box highlights information with a medium visual priority using existing typography styles with a box outline. - [Pagination](https://design.cms.gov/components/pagination/llms.txt): Pagination is navigation for paginated content. - [Radio Button](https://design.cms.gov/components/radio/llms.txt): Radio buttons allow users to select exactly one choice from a group. - [Review](https://design.cms.gov/components/review/llms.txt): The review pattern is used for listing a summary of information entered by a user. Its content includes a heading, value, and edit link. - [Skip Nav](https://design.cms.gov/components/skip-nav/llms.txt): Skip navigation links allow users with screen readers to bypass long navigation lists. - [Spinner](https://design.cms.gov/components/spinner/llms.txt): Spinners signify that the application is waiting for an asynchronous operation to complete. - [Stars (M.gov)](https://design.cms.gov/components/stars/llms.txt) - [Step List](https://design.cms.gov/components/step-list/llms.txt): A step list represents a user's progression through an application or multi-page form. It serves as a table of contents and a way to quickly see where they are and what they should be working on next. - [Table](https://design.cms.gov/components/table/llms.txt): Tables show tabular data in columns and rows. - [Tabs](https://design.cms.gov/components/tabs/llms.txt): Tabs are a secondary navigation pattern, allowing a user to view only the content they're interested in. They build upon a real world metaphor, and the selected state simulates a folder being physically in front of others in the group. - [Third Party External Link](https://design.cms.gov/components/third-party-external-link/llms.txt): The third party external link component is used to notify a user that the action they are taking will take them to a new external website. - [Tooltip](https://design.cms.gov/components/tooltip/llms.txt): Tooltips provide additional information upon hover, focus or click. The information should be contextual, useful, and nonessential information. - [USA Banner](https://design.cms.gov/components/usa-banner/llms.txt): The USA banner identifies official websites of government organizations in the United States. It also helps visitors understand how to tell that a website is both official and secure. - [Vertical Navigation](https://design.cms.gov/components/vertical-navigation/llms.txt): Hierarchical, vertical navigation. ### Date Field - [Calendar Picker](https://design.cms.gov/components/date-field/date-picker/llms.txt): Date field (with calendar picker), also known as "date picker", provides single date entry with a text field or selection through a visual calendar element tied to the input. - [Multi-Input Date Field](https://design.cms.gov/components/date-field/multi-input-date-field/llms.txt): Date field (multi-input) provides date entry, spaced over three separate inputs for month, day, and year. - [Single-Input Date Field](https://design.cms.gov/components/date-field/single-input-date-field/llms.txt): Date field (single-input) provides date entry, using a text field, in a single input. ### Footer - [Healthcare.gov Footer](https://design.cms.gov/components/footer/healthcare-footer/llms.txt) - [Medicare.gov Footer](https://design.cms.gov/components/footer/medicare-footer/llms.txt) ### Header - [Healthcare.gov Header](https://design.cms.gov/components/header/healthcare-header/llms.txt) - [Medicare.gov Header](https://design.cms.gov/components/header/medicare-header/llms.txt): The Consistent Header is a shared component available for all of medicare.gov. ### Logos - [Healthcare.gov Logo](https://design.cms.gov/components/logos/healthcare-logo/llms.txt): Renders the HealthCare.gov logo in English (default) or Spanish. - [HHS Logo](https://design.cms.gov/components/logos/hhs-logo/llms.txt): Renders the HHS logo. - [Medicare.gov Logo](https://design.cms.gov/components/logos/medicare-logo/llms.txt): Renders the Medicare.gov logo. ### Text Field - [Label-Masked Field](https://design.cms.gov/components/text-field/label-masked-field/llms.txt): A label-masked field is a text-field pattern that provides instant, visual feedback about how inputed data is being interpreted without creating a noisy aural experience. - [Masked Field](https://design.cms.gov/components/text-field/masked-field/llms.txt): A masked field is an enhanced input field that improves readability by providing visual and non-visual cues to a user about the expected value. - [Text Field](https://design.cms.gov/components/text-field/text-field/llms.txt): Text fields allow users to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted). Text fields can span single or multiple lines. ## Foundation - [CSS normalization](https://design.cms.gov/foundation/css-normalization/llms.txt) - [Inverse Base](https://design.cms.gov/foundation/base/llms.txt) - [Spacing](https://design.cms.gov/foundation/spacing/llms.txt) - [System color tokens](https://design.cms.gov/foundation/system-color-tokens/llms.txt): System color tokens are the entire set of color tokens from which our themes are built. - [Theme colors](https://design.cms.gov/foundation/theme-colors/llms.txt): The design system provides a flexible color palette that meets accessible color contrast requirements. ### Layout Grid - [Breakpoints](https://design.cms.gov/foundation/layout-grid/responsive-design/llms.txt) - [Layout Grid](https://design.cms.gov/foundation/layout-grid/layout-grid/llms.txt) ### Typography - [Body](https://design.cms.gov/foundation/typography/body/llms.txt): Body text is used for the majority of the content on the website or application. - [Content](https://design.cms.gov/foundation/typography/content/llms.txt): The "ds-content" class provides an easy way to style written content on your page - [Headings](https://design.cms.gov/foundation/typography/headings/llms.txt): Headings help to provide a quick, organized way to organize the main sections of a website. - [Links](https://design.cms.gov/foundation/typography/links/llms.txt): Links connect users to a different page or further information. - [Lists](https://design.cms.gov/foundation/typography/lists/llms.txt): Lists organize written information for users sequentially. - [Typography overview](https://design.cms.gov/foundation/typography/overview/llms.txt) ## Getting Started - [Child Design Systems](https://design.cms.gov/getting-started/child-design-systems/llms.txt) - [Contribution Guidance](https://design.cms.gov/getting-started/contribution-guidance/llms.txt) - [For developers](https://design.cms.gov/getting-started/for-developers/llms.txt) ## Guidelines - [Accessibility](https://design.cms.gov/guidelines/accessibility/llms.txt) - [Design Principles](https://design.cms.gov/guidelines/design-principles/llms.txt) - [Print guidelines](https://design.cms.gov/guidelines/print-guidelines/llms.txt) - [Support Policies](https://design.cms.gov/guidelines/support-policies/llms.txt) ## Layouts - [Documentation Page](https://design.cms.gov/layouts/documentation-page/llms.txt) - [Layouts overview](https://design.cms.gov/layouts/overview/llms.txt) ### Healthcare - [One Column Page Layout](https://design.cms.gov/layouts/Healthcare/one-col-page-layout/llms.txt) ## Migration Guides - [Migrating to v2](https://design.cms.gov/migration-guides/migrating-to-v2/llms.txt) - [Migrating to v4 buttons](https://design.cms.gov/migration-guides/migrating-to-new-buttons/llms.txt): We've created a more consistent, scalable, and themable button framework for the CMS design system. - [Sass to CSS](https://design.cms.gov/migration-guides/sass-to-css/llms.txt): New features in CSS have allowed us to stop relying on Sass to share design tokens with product teams. We're now only distributing our styles as CSS. - [Separating labels, hints, and errors in v9](https://design.cms.gov/migration-guides/v9-label-updates/llms.txt): Labels, hints, and error messages are now in separate elements for better accessibility and flexibility. - [Standardizing spacing in v7](https://design.cms.gov/migration-guides/v7-spacing-updates/llms.txt): We've removed all default bottom margins to make spacing between components predictable and consistent. - [Standardizing theme colors in v7](https://design.cms.gov/migration-guides/v7-standardizing-theme-colors/llms.txt): We've updated theme colors by removing non-semantic colors red, gold, green and coolblue and standardizing colors across themes. - [Using agnostic typography classes](https://design.cms.gov/migration-guides/agnostic-typography-classes/llms.txt) ## Patterns - [404 Page Guidance](https://design.cms.gov/patterns/404-page-guidance/llms.txt): A 404 page informs users that a requested page doesn't exist. - [Patterns overview](https://design.cms.gov/patterns/overview/llms.txt) - [Phone numbers](https://design.cms.gov/patterns/phone-numbers/llms.txt) - [Table Elements](https://design.cms.gov/patterns/html-table/llms.txt): Learn how to build accessible and responsive tables using semantic HTML and CMS Design System utility classes. - [Utility Actions](https://design.cms.gov/patterns/utility-actions/llms.txt): Utility actions for a webpage including print, email, RSS and more. - [ZIP codes](https://design.cms.gov/patterns/zip-codes/llms.txt): There are approximately 41k ZIP codes in the United States. We use ZIP codes in various ways; to determine eligibility, as a way to search for services, or as part of an address. ### Forms - [Error validation](https://design.cms.gov/patterns/Forms/error-validation/llms.txt) - [Form validation](https://design.cms.gov/patterns/Forms/validation/llms.txt) - [Forms](https://design.cms.gov/patterns/Forms/forms/llms.txt) ## Using Ai - [Using LLMs.txt](https://design.cms.gov/using-ai/llms-txt/llms.txt) - [Working with Figma Code Connect](https://design.cms.gov/using-ai/figma-code-connect/llms.txt) ## Utilities - [Background Color](https://design.cms.gov/utilities/background-color/llms.txt) - [Display](https://design.cms.gov/utilities/display/llms.txt) - [Flexbox](https://design.cms.gov/utilities/flexbox/llms.txt) - [Float](https://design.cms.gov/utilities/float/llms.txt) - [Focus](https://design.cms.gov/utilities/focus/llms.txt) - [Margin](https://design.cms.gov/utilities/margin/llms.txt) - [Overflow](https://design.cms.gov/utilities/overflow/llms.txt) - [Padding](https://design.cms.gov/utilities/padding/llms.txt) - [Utilities overview](https://design.cms.gov/utilities/overview/llms.txt) - [Vertical Align](https://design.cms.gov/utilities/vertical-align/llms.txt) - [Visibility](https://design.cms.gov/utilities/visibility/llms.txt) ### Border - [Border](https://design.cms.gov/utilities/border/border/llms.txt) - [Border Radius](https://design.cms.gov/utilities/border/border-radius/llms.txt) ### Font - [Font Size](https://design.cms.gov/utilities/font/font-size/llms.txt) - [Font Style](https://design.cms.gov/utilities/font/font-style/llms.txt) - [Font Weight](https://design.cms.gov/utilities/font/font-weight/llms.txt) ### Text - [Line Height](https://design.cms.gov/utilities/text/line-height/llms.txt) - [Measure](https://design.cms.gov/utilities/text/measure/llms.txt): Line length, also called "measure", is an important part of readability. - [Text Alignment](https://design.cms.gov/utilities/text/text-align/llms.txt) - [Text Color](https://design.cms.gov/utilities/text/text-color/llms.txt) - [Text Decoration](https://design.cms.gov/utilities/text/text-decoration/llms.txt) - [Text Transform](https://design.cms.gov/utilities/text/text-transform/llms.txt) - [Word Break](https://design.cms.gov/utilities/text/word-break/llms.txt) ## Web Components - [/web-components/README](https://design.cms.gov/web-components/README/llms.txt) ### Preactement - [/web-components/preactement/LICENSE](https://design.cms.gov/web-components/preactement/LICENSE/llms.txt) - [/web-components/preactement/README](https://design.cms.gov/web-components/preactement/README/llms.txt)