DOCSEARCHbyAlgolia
Submit Docs

U.S. Web Design System (USWDS) Documentation Site

repository·main·Indexed 42 days ago

https://github.com/uswds/uswds-site

A Jekyll-based static site providing documentation and component examples for the U.S. Web Design System. It uses Gulp.js for task automation and integrates the USWDS npm package to render components. Includes guides for authoring 'What's new' posts, managing known issues via YAML, and configuring navigation lists and accordions.

Tokens
84.1K
Snippets
174
Records
406
Agent score
54%

What's inside USWDS Site

  1. Overview of USWDS Color Design Tokens

    main

    USWDS theme colors provide a flexible, accessible, and customizable set of color choices. The color system is organized into several categories of design tokens to help developers manage color application consistently across a site:

    • Theme Tokens: Core color palettes used for branding and primary UI elements.
    • State Tokens: Colors specifically designed to indicate UI states (e.g., hover, focus, active).
    • System Tokens: Colors used for functional system-level communication (e.g., error, warning, success, info).

  3. Understand USWDS performance research findings

    main

    The USWDS team conducted research to identify how federal agencies approach web performance. The research highlighted several key pain points and user needs that inform USWDS guidance.

    Key Pain Points

    • Resource Prioritization: Teams struggle to find time and resources for performance projects due to existing workloads.
    • Tooling Uncertainty: Lack of clarity regarding which web performance tools are government-approved (ATO/TOS compliance).
    • Communication Barriers: Difficulty communicating the value of performance to leadership and tying performance improvements to tangible results.
    • Lack of Standards: Absence of a universal target goal or mandate for web performance across agencies.

    Identified User Needs

    • Approved Tooling: Easy-to-implement, government-recommended tools that integrate into development processes.
    • Actionable Insights: Clear visibility into the causes of slow performance and specific steps to fix them.
    • Plain Language Framing: Ability to explain performance as a value-add in non-technical terms to secure investment.
    • Procurement Support: Templates for including web performance requirements in Statements of Work (SOWs) and Requests for Proposals (RFPs).
    • Accountability: Publicly accessible performance ratings using easy-to-understand scoring systems.

  4. Use the Language selector component

    main

    The language-selector component (provided by the usa-language-selector package) provides a consistent interface for users to find and access content in their preferred language. It is currently in a ready status.

    For design guidance on how to implement language selection, refer to the following pattern families:

    • Select between two languages
    • Select from three or more languages
    • Find selected content in other languages

  6. Developer documentation overview

    main
    USWDS components are built on a solid HTML foundation and use progressive enhancement. This ensures that all users have access to critical information and a robust experience even if JavaScript fails or they are using older browsers, though newer browsers will provide a more enhanced experience.

  7. Select a language patterns overview

    main

    The 'Select a language' pattern helps users access content in their preferred language, which is critical for users with Limited English Proficiency (LEP). USWDS provides several implementation patterns depending on the number of languages available and the nature of the content:

    • Select between two languages: Use this pattern when providing a simple choice between two options, such as English and Spanish.
    • Select from three or more languages: Use this pattern when users need to choose from a larger list of available languages (e.g., English, Spanish, Chinese, and Arabic).
    • Find selected multilingual content: Use this pattern when only specific pieces of content have been translated, helping users identify which content is available in their preferred language.
    • Indicate preferred languages: Use this pattern to allow users to set their language preferences for ongoing communication.

  9. Explore USWDS Typesetting design tokens

    main

    The Typesetting category in the USWDS design tokens covers the visual properties of text. You can navigate through the following sub-sections to understand specific typesetting implementations:

    • Overview: General introduction to typesetting tokens.
    • Font Family: Tokens defining the typeface stacks.
    • Font Size: Tokens for text scaling and sizing.
    • Font Weight: Tokens for text thickness.
    • Letter Spacing: Tokens for tracking/character spacing.
    • Line Height: Tokens for leading/vertical spacing between lines.
    • Measure: Tokens related to line length and text width constraints.

  10. Use the Prose component for text formatting

    main

    The prose component is used to format blocks of running text. It is part of the usa-prose package and is designed for typography, typesetting, and general body text handling (including headings, hyperlinks, and headers).

    component:
  name: prose
  status: ready
  package: usa-prose

  11. Understand the key benefits of using USWDS

    main

    The U.S. Web Design System (USWDS) provides a toolkit of principles, guidance, and code designed to help government teams build accessible, mobile-friendly websites. Key benefits include:

    • Compliance: Built-in support for Section 508 and 21st Century IDEA requirements, including accessible color picking tools and compliant components.
    • Consistency: Provides proven design solutions (buttons, forms, etc.) that create a seamless experience across federal agencies, increasing user trust.
    • Team Alignment: Offers design principles to help teams align on human-centered design goals.
    • Mission Focus: Reduces technical debt and development time by providing pre-built components, allowing teams to focus on their specific mission rather than markup.
    • Community Support: Access to a cross-functional community of developers, designers, and content managers via GitHub Discussions.
    • Resource Stewardship: Scales expertise across the federal government, ensuring improvements made by one team benefit all users of the design system.

  12. Use the Side Navigation component

    main

    The Side Navigation component (usa-sidenav) provides hierarchical, vertical navigation intended to be placed at the side of a page. It is currently marked as ready status.

    To use this component, ensure you have the usa-sidenav package installed in your project dependencies.

    package: usa-sidenav