# U.S. Web Design System (USWDS) > USWDS is the design system for the U.S. federal government. It provides accessible, mobile-first HTML components, CSS utility classes, and design tokens, along with the design guidance and user research behind them. It is maintained by the Technology Transformation Services at the U.S. General Services Administration, and it helps agencies meet federal website standards. This file indexes the authoritative documentation at designsystem.digital.gov. The current USWDS release is 3.14.0. When writing code for a project that uses USWDS: - Use the markup and class names published on the component's page. USWDS components carry keyboard behavior and accessibility semantics that hand-written markup does not reproduce. - Reach for design tokens and utility classes before raw CSS values, so a project stays on the system's type scale, spacing units, and color palettes. - Customize through Sass settings rather than by overriding compiled CSS. - Do not introduce a React, Vue, or Angular wrapper unless the project already uses one. USWDS ships framework-independent HTML, CSS, and JavaScript; community implementations exist but are not maintained by the USWDS team. - Using USWDS does not by itself make a site Section 508 compliant. Follow the accessibility guidance below, and run the accessibility tests published at `/components/{component}/accessibility-tests/` against the finished implementation. ## Start here - [How to use USWDS](https://designsystem.digital.gov/how-to-use-uswds/): What the design system provides and how a team adopts it. - [Getting started for developers](https://designsystem.digital.gov/documentation/getting-started-for-developers/): The three phases of adopting USWDS in a project. - [Phase one: install](https://designsystem.digital.gov/documentation/getting-started/developers/phase-one-install/): Add USWDS to a project. - [Phase two: compile](https://designsystem.digital.gov/documentation/getting-started/developers/phase-two-compile/): Compile USWDS Sass and assets. - [Phase three: customize](https://designsystem.digital.gov/documentation/getting-started/developers/phase-three-customize/): Theme the design system for a project. - [Developer documentation](https://designsystem.digital.gov/documentation/developers/): Installation, and how to use USWDS CSS and JavaScript. - [Settings](https://designsystem.digital.gov/documentation/settings/): The Sass settings variables that tell USWDS how to build. - [Packages](https://designsystem.digital.gov/components/packages/): Import only the components a project needs. - [Getting started for designers](https://designsystem.digital.gov/documentation/getting-started-for-designers/): Design assets and how to use them. - [Migrating to USWDS 3.0](https://designsystem.digital.gov/documentation/migration/): Moving a USWDS 2 project to Sass modules and unbundled packages. - [Component lifecycle status](https://designsystem.digital.gov/components/status/): Which components are released, in development, or deprecated. ## Accessibility and standards - [Accessibility](https://designsystem.digital.gov/documentation/accessibility/): How USWDS supports accessible design and what a project still has to verify. - [Federal website standards](https://designsystem.digital.gov/website-standards/): How USWDS helps agencies comply with the 21st Century IDEA and related policy. - [Design principles](https://designsystem.digital.gov/design-principles/): The principles behind the system's guidance. - [Performance guidance](https://designsystem.digital.gov/performance/): Making government sites fast for everyone. ## Design tokens - [Design tokens overview](https://designsystem.digital.gov/design-tokens/): The rules and vocabulary behind the system's visual design. - [Color](https://designsystem.digital.gov/design-tokens/color/): System, theme, and state color tokens. - [Typesetting](https://designsystem.digital.gov/design-tokens/typesetting/): Font family, size, weight, line height, measure, and letterspacing tokens. - [Spacing units](https://designsystem.digital.gov/design-tokens/spacing-units/): The spacing scale used across components and utilities. - [Shadow](https://designsystem.digital.gov/design-tokens/shadow/): Elevation tokens. - [Opacity](https://designsystem.digital.gov/design-tokens/opacity/): Opacity tokens. - [Order](https://designsystem.digital.gov/design-tokens/order/): Flex and grid order tokens. - [Flex](https://designsystem.digital.gov/design-tokens/flex/): Flex tokens. - [Z-index](https://designsystem.digital.gov/design-tokens/z-index/): Stacking order tokens. ## Components Every released component, with its usage, accessibility, and implementation guidance. Each page also links to that component's accessibility tests. - [Components overview](https://designsystem.digital.gov/components/overview/): Search and browse all released components. - [Accordion](https://designsystem.digital.gov/components/accordion/): An accordion is a list of headers that hide or reveal additional content when selected. - [Alert](https://designsystem.digital.gov/components/alert/): An alert keeps users informed of important and sometimes time-sensitive changes. - [Banner](https://designsystem.digital.gov/components/banner/): Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure. - [Breadcrumb](https://designsystem.digital.gov/components/breadcrumb/): Breadcrumbs provide secondary navigation to help users understand where they are in a website. - [Button](https://designsystem.digital.gov/components/button/): A button draws attention to important actions with a large selectable surface. - [Button group](https://designsystem.digital.gov/components/button-group/): A button group collects similar or related actions. - [Card](https://designsystem.digital.gov/components/card/): Cards contain content and actions about a single subject. - [Character count](https://designsystem.digital.gov/components/character-count/): Character count helps users know how much text they can enter when there is a limit on the number of characters. - [Checkbox](https://designsystem.digital.gov/components/checkbox/): Checkboxes allow users to select one or more options from a list. - [Collection](https://designsystem.digital.gov/components/collection/): A collection displays a compact list of multiple related items like articles or events. The list links each item to its original source. - [Combo box](https://designsystem.digital.gov/components/combo-box/): A combo box helps users select an item from a large list of options. - [Data visualizations](https://designsystem.digital.gov/components/data-visualizations/): Data visualizations help communicate patterns and relationships in a data set. - [Date picker](https://designsystem.digital.gov/components/date-picker/): A date picker helps users select a single date. - [Date range picker](https://designsystem.digital.gov/components/date-range-picker/): A date range picker helps users select a range between two dates. - [File input](https://designsystem.digital.gov/components/file-input/): File input allows users to attach one or multiple files. - [Footer](https://designsystem.digital.gov/components/footer/): A footer serves site visitors who arrive at the bottom of a page without finding what they want. - [Form](https://designsystem.digital.gov/components/form/): A form allows users to enter information into a page. - [Header](https://designsystem.digital.gov/components/header/): A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website. - [Icon](https://designsystem.digital.gov/components/icon/): Icons help communicate meaning, actions, status, or feedback. - [Icon list](https://designsystem.digital.gov/components/icon-list/): An icon list reinforces the meaning and visibility of individual list items with a leading icon. - [Identifier](https://designsystem.digital.gov/components/identifier/): The identifier communicates a site's parent agency and displays agency links required by federal laws and policies. - [In-page navigation](https://designsystem.digital.gov/components/in-page-navigation/): The in-page navigation allows navigation to specific sections on a lengthy content page - [Input mask](https://designsystem.digital.gov/components/input-mask/): An input mask is a string expression that constrains input to support valid input values. - [Input prefix/suffix](https://designsystem.digital.gov/components/input-prefix-suffix/): Use input prefixes and suffixes to show symbols or abbreviations that help users enter the right type of information in a form’s text input. - [Language selector](https://designsystem.digital.gov/components/language-selector/): The consistent placement, interface, and behavior of the language selection component allows users to easily find and access content in the language the user is most comfortable in. - [Link](https://designsystem.digital.gov/components/link/): A link connects users to a different page or further information. - [List](https://designsystem.digital.gov/components/list/): A list organizes information into discrete sequential sections. - [Memorable date](https://designsystem.digital.gov/components/memorable-date/): A select for month followed by two text fields is the easiest way for users to enter most dates. - [Modal](https://designsystem.digital.gov/components/modal/): A modal disables page content and focuses the user's attention on a single task or message. - [Pagination](https://designsystem.digital.gov/components/pagination/): Pagination is navigation for paginated content. - [Process list](https://designsystem.digital.gov/components/process-list/): A process list displays the steps or stages of important instructions or processes. - [Prose](https://designsystem.digital.gov/components/prose/): Format a block of running text. - [Radio buttons](https://designsystem.digital.gov/components/radio-buttons/): Radio buttons allow users to select exactly one choice from a group. - [Range slider](https://designsystem.digital.gov/components/range-slider/): A range slider allows users to choose an approximate number from a range. - [Search](https://designsystem.digital.gov/components/search/): Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation - [Select](https://designsystem.digital.gov/components/select/): A select component allows users to choose one option from a temporary modal menu. - [Side navigation](https://designsystem.digital.gov/components/side-navigation/): Hierarchical, vertical navigation to place at the side of a page. - [Site alert](https://designsystem.digital.gov/components/site-alert/): A site alert communicates urgent sitewide information. - [Step indicator](https://designsystem.digital.gov/components/step-indicator/): A step indicator updates users on their progress through a multi-step process. - [Summary box](https://designsystem.digital.gov/components/summary-box/): A summary box highlights key information from a longer page or displays next steps. - [Table](https://designsystem.digital.gov/components/table/): A table shows information in columns and rows. - [Tag](https://designsystem.digital.gov/components/tag/): A tag draws attention to new or categorized content elements. - [Text input](https://designsystem.digital.gov/components/text-input/): A text input allows users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines. - [Time picker](https://designsystem.digital.gov/components/time-picker/): A time picker helps users select a specific time. - [Tooltip](https://designsystem.digital.gov/components/tooltip/): A tooltip is a short descriptive message that appears when a user hovers or focuses on an element. - [Typography](https://designsystem.digital.gov/components/typography/): Government websites need clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. Our default typefaces are designed for legibility and can adapt to a variety of visual tones. - [Validation](https://designsystem.digital.gov/components/validation/): Stating validation requirements up front, with live feedback, means users won't be left guessing. ## Utilities Single-purpose CSS classes for building and adjusting layouts without writing new CSS. - [Utilities overview](https://designsystem.digital.gov/utilities/): How utility classes are named and how to use them. - [Border](https://designsystem.digital.gov/utilities/border/) - [Clearfix](https://designsystem.digital.gov/utilities/clearfix/) - [Color](https://designsystem.digital.gov/utilities/color/) - [Display](https://designsystem.digital.gov/utilities/display/) - [Flex](https://designsystem.digital.gov/utilities/flex/) - [Float](https://designsystem.digital.gov/utilities/float/) - [Font size and family](https://designsystem.digital.gov/utilities/font-size-and-family/) - [Height and width](https://designsystem.digital.gov/utilities/height-and-width/) - [Layout grid](https://designsystem.digital.gov/utilities/layout-grid/) - [List reset](https://designsystem.digital.gov/utilities/list-reset/) - [Margin and padding](https://designsystem.digital.gov/utilities/margin-and-padding/) - [Outline](https://designsystem.digital.gov/utilities/outline/) - [Paragraph styles](https://designsystem.digital.gov/utilities/paragraph-styles/) - [Shadow](https://designsystem.digital.gov/utilities/shadow/) - [Text styles](https://designsystem.digital.gov/utilities/text-styles/) ## Page templates - [Templates](https://designsystem.digital.gov/templates/): Full-page starting points assembled from USWDS components. - [Form templates](https://designsystem.digital.gov/templates/form-templates/): Name, address, sign-in, and password reset forms. - [Authentication pages](https://designsystem.digital.gov/templates/authentication-pages/): Sign-in, create-account, and multiple sign-in option pages. - [Landing page](https://designsystem.digital.gov/templates/landing-page/): A marketing or introductory page template. - [Documentation page](https://designsystem.digital.gov/templates/documentation-page/): A documentation page template with side navigation. - [404 page](https://designsystem.digital.gov/templates/404-page/): A page-not-found template. ## Patterns - [Patterns overview](https://designsystem.digital.gov/patterns/): Reusable solutions to common user tasks. - [Introduction to patterns](https://designsystem.digital.gov/patterns/intro/): How patterns differ from components. - [Create a user profile](https://designsystem.digital.gov/patterns/create-a-user-profile/): Asking for name, address, date of birth, and other personal information. - [Complete a complex form](https://designsystem.digital.gov/patterns/complete-a-complex-form/): Long or multi-step forms. - [Select a language](https://designsystem.digital.gov/patterns/select-a-language/): Offering content in more than one language. ## Code and design assets - [Download USWDS](https://designsystem.digital.gov/download/): Compiled files and the design system package. - [USWDS source code](https://github.com/uswds/uswds): The `@uswds/uswds` package repository. - [USWDS design assets](https://github.com/uswds/uswds-for-designers): Figma and Sketch source files. - [USWDS Figma design kit](https://www.figma.com/community/file/1440921849343185329/uswds-design-kit-beta): The design kit in the Figma community. - [Implementations](https://designsystem.digital.gov/documentation/implementations/): Community-built CMS and framework wrappers, which the USWDS team does not maintain. ## Optional - [What's new](https://designsystem.digital.gov/about/whats-new/): Release notes and announcements. - [USWDS releases](https://github.com/uswds/uswds/releases): Version history and changelogs. - [AGENTS.md](https://github.com/uswds/uswds/blob/develop/AGENTS.md): Instructions for agents contributing to USWDS itself, not for projects that use it. - [About USWDS](https://designsystem.digital.gov/about/): The team and the project. - [Key benefits](https://designsystem.digital.gov/about/key-benefits/): Why agencies adopt the design system. - [Maturity model](https://designsystem.digital.gov/maturity-model/): Adopting USWDS incrementally. - [Sample contract language](https://designsystem.digital.gov/documentation/sample-contract-language/): Language for procurement documents. - [Community](https://designsystem.digital.gov/about/community/): How to reach the USWDS community. - [Contribute](https://designsystem.digital.gov/about/contribute/): How to propose changes to the design system. - [GitHub Discussions](https://github.com/uswds/uswds/discussions): Ask questions, share ideas, and connect with the community. - [Monthly call archive](https://designsystem.digital.gov/about/monthly-calls/): Recordings and resources from past community calls. - [Product roadmap](https://designsystem.digital.gov/about/product-roadmap/): What the team is working on next. - [Documentation site source](https://github.com/uswds/uswds-site): The repository behind designsystem.digital.gov.