{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Introducing USWDS 2.0 |Digital.gov",
    "description": "Introducing USWDS 2.0",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2019/04/08/introducing-uswds-2/index.json","item" : [
    {"title" :"Introducing USWDS 2.0","deck" : "Reinvent the experience, not the wheel","summary" : "Today’s update introduces a powerful toolkit of new features to help make creating useful, consistent digital services faster, simpler, and more fun.","date" : "2019-04-08T09:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"dan-williams" : "Dan Williams","maya-benari" : "Maya Benari"},"topics" : {
        
            "accessibility" : "Accessibility",
            "design" : "Design",
            "mobile" : "Mobile",
            "product-and-project-management" : "Product and project management",
            "software-engineering" : "Software engineering",
            "user-experience" : "User experience"
            },"featured_image" : { "uid" :
  "uswds-2-illio-feature-image-black", "alt" :
  "A colorful collection of screens and interface components" },"branch" : "bc-archive-content-3",
      "filename" :"2019-04-08-introducing-uswds-2.md",
      
      "filepath" :"news/2019/04/2019-04-08-introducing-uswds-2.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2019/04/2019-04-08-introducing-uswds-2.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2019/04/2019-04-08-introducing-uswds-2.md","slug" : "introducing-uswds-2","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2019/04/08/introducing-uswds-2/","content" :"\u003cp\u003eToday, we’re launching \u003ca href=\"https://v2.designsystem.digital.gov/\"\u003eU.S. Web Design System 2.0\u003c/a\u003e (USWDS 2.0), a new foundation for the future of our design system. This new version was designed to make it easier for any project to integrate USWDS and use it to support your mission and the needs of your audience.\u003c/p\u003e\n\u003cp\u003eUSWDS is a library of code, tools, and guidance to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices. USWDS 2.0 is an important update to the design system — it introduces a powerful toolkit of new features to help make creating useful, consistent digital services faster, simpler, and more fun.\u003c/p\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-feature-image-black.png\"alt=\"A colorful collection of screens and interface components\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eWe’re proud that USWDS currently powers nearly \u003ca href=\"https://v2.designsystem.digital.gov/getting-started/showcase/all/\"\u003e200 federal websites\u003c/a\u003e and we’re committed to making the design system work better for \u003cem\u003eany\u003c/em\u003e federal website. With USWDS 2.0 we’re introducing a design system that’s built to grow with your needs — to help teams build better, more engaging websites for the American public.\u003c/p\u003e\n\u003cp\u003eOver the last two years, we’ve listened to the designers and developers using USWDS. We’ve conducted interviews with project teams, listened to public feedback, and paid attention to the issues in our \u003ca href=\"https://github.com/uswds/\"\u003eGitHub repos\u003c/a\u003e. We’ve conducted our own research on how designers and developers communicate with each other, and the tools they use to prototype. This research and feedback shaped our priorities for USWDS 2.0:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eEncourage modular, iterative, user-centered design\u003c/li\u003e\n\u003cli\u003ePromote accessibility and mobile friendliness\u003c/li\u003e\n\u003cli\u003eDevelop a consistent design language\u003c/li\u003e\n\u003cli\u003eSupport designing with flexibility and coherence\u003c/li\u003e\n\u003cli\u003eLead with dependable guidance\u003c/li\u003e\n\u003cli\u003eAllow teams to prototype and build quickly\u003c/li\u003e\n\u003cli\u003eEstablish a reliable foundation for growth\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eSo, what’s new in USWDS 2.0?\u003c/p\u003e\n\u003cbr/\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-easier-incremental-adoption-alt.png\"alt=\"Side by side illustrations show before-and-after examples of a web page. One has the original page and the other shows that page with just a few design system components added\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"easier-incremental-adoption\"\u003eEasier Incremental Adoption\u003c/h2\u003e\n\u003ch3 id=\"add-a-component-not-a-headache\"\u003eAdd a component, not a headache\u003c/h3\u003e\n\u003cp\u003eYou don’t need to totally redesign your existing site to \u003ca href=\"https://v2.designsystem.digital.gov/documentation/\"\u003eget started with USWDS\u003c/a\u003e. Adding USWDS 2.0 doesn’t mean breaking existing site functionality, so it’s easier to make incremental changes. Our components and code play well with existing styles, and it’s easy to adapt our default styles to a look-and-feel appropriate to your audience.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eIsolated class-based styling won’t affect your existing styles\u003c/li\u003e\n\u003cli\u003eIsolated class-based styling\u003c/li\u003e\n\u003cli\u003eCustomizable base font size\u003c/li\u003e\n\u003cli\u003eSupports custom typefaces\u003c/li\u003e\n\u003cli\u003eProvides resilient, modular components\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr/\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-practical-design-tokens-alt.png\"alt=\"An illustration of three designers and developers using design tokens to communicate their intention. They move from themes to components to a finished website.\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"practical-design-tokens\"\u003ePractical Design Tokens\u003c/h2\u003e\n\u003ch3 id=\"a-common-language-for-designers-and-developers\"\u003eA common language for designers and developers\u003c/h3\u003e\n\u003cp\u003eDesign and development are all about decision making. Making decisions and communicating these details with the team takes time and has a cost, both in money and energy. \u003ca href=\"https://v2.designsystem.digital.gov/design-tokens/\"\u003eUSWDS 2.0 design tokens\u003c/a\u003e are the common building blocks of visual design decisions (like color, typescale, and spacing units) that all USWDS projects share. By using design tokens, designers and developers spend more time solving problems and less time fussing over pixels, eyedroppering hex codes, and redlining.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eDesign tokens are a common language between designers and developers\u003c/li\u003e\n\u003cli\u003eCreates simple standardized palettes\u003c/li\u003e\n\u003cli\u003eMakes for a streamlined handoff\u003c/li\u003e\n\u003cli\u003eAllows a faster response to feedback\u003c/li\u003e\n\u003cli\u003eIntegrates with best-practice guidance\u003c/li\u003e\n\u003cli\u003eProvides coherent and expressive palettes\u003c/li\u003e\n\u003cli\u003eEven spacing units (based on 8px) yield reliable spacing and centering\u003c/li\u003e\n\u003cli\u003eTypescale outputs consistently and predictably, regardless of typeface\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr/\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-accessible-color-system-alt.png\"alt=\"Two rows of colors from light to dark and their accessible color combinations.\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"an-accessible-color-system\"\u003eAn Accessible Color System\u003c/h2\u003e\n\u003ch3 id=\"from-aa-large-to-aaa-section-508-contrast-made-simple\"\u003eFrom AA Large to AAA: Section 508 contrast made simple\u003c/h3\u003e\n\u003cp\u003eMaking a good color decision means making an accessible color decision. The \u003ca href=\"https://v2.designsystem.digital.gov/design-tokens/color/overview/\"\u003eUSWDS 2.0 color system\u003c/a\u003e makes it simple and predictable to pick accessible color pairs. Each USWDS system color has a numeric grade (like the \u003ccode\u003e50\u003c/code\u003e in \u003ccode\u003ered-50\u003c/code\u003e). The difference between any two grades is what we call the magic number. Colors with magic numbers of 40+ achieve AA Large contrast, magic numbers of 50+ achieve AA contrast, and magic numbers of 70+ achieve AAA contrast.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eMagic number makes contrast decisions a snap\u003c/li\u003e\n\u003cli\u003eEncourages accessible color choices for your mission and brand\u003c/li\u003e\n\u003cli\u003eSupports practical project theme palettes\u003c/li\u003e\n\u003cli\u003eIs the foundation for expressive color families\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr/\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-expressive-theming-alt.png\"alt=\"An illustration shows five images of websites at different screen sizes, ranging from small to large — each with a different look and feel.\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"expressive-theming\"\u003eExpressive Theming\u003c/h2\u003e\n\u003ch3 id=\"powered-by-your-mission-and-user-needs\"\u003ePowered by your mission and user needs\u003c/h3\u003e\n\u003cp\u003eEvery project is different. Different audiences, different missions, and different goals require different solutions. USWDS 2.0 helps teams reinvent the experience without reinventing the wheel with a flexible design system that encourages customization consistent with our best-practice guidance. Because using user-centered design to adapt our defaults and build new things shouldn’t mean abandoning USWDS guidance altogether.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eNormalized typefaces allow custom typeface support\u003c/li\u003e\n\u003cli\u003eIt’s easier to match your brand to USWDS\u003c/li\u003e\n\u003cli\u003eCustom settings power themeable layouts\u003c/li\u003e\n\u003cli\u003eIntegrated with tokens and utilities\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr/\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-powerful-utility-classes-alt.png\"alt=\"This illustration shows another before-and-after example of how a website can use utility classes to change the styles of site elements. Five stylized examples of code are given below the two versions of the page.\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"powerful-utility-classes\"\u003ePowerful Utility Classes\u003c/h2\u003e\n\u003ch3 id=\"prototype-faster-to-get-your-designs-in-front-of-real-users\"\u003ePrototype faster to get your designs in front of real users\u003c/h3\u003e\n\u003cp\u003eBuilding and testing a prototype is an invaluable step to understanding how real people use our services. Utility classes are a modern way to use USWDS design tokens to rapidly test a new idea, make tweaks to existing components, or design in code. \u003ca href=\"https://v2.designsystem.digital.gov/utilities/\"\u003eUSWDS utilities\u003c/a\u003e help teams deliver actionable prototypes quickly and consistently, and make quick modifications to production components without writing high-specificity CSS.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eBuild new components or modify old ones without touching production CSS\u003c/li\u003e\n\u003cli\u003eUses modular, atomic, and mobile-first design\u003c/li\u003e\n\u003cli\u003eOptimized for legibility and comprehension\u003c/li\u003e\n\u003cli\u003eSophisticated customization options\u003c/li\u003e\n\u003cli\u003eEasy to transfer into production Sass with integrated functions and mixins\u003c/li\u003e\n\u003cli\u003e25 KB gzipped, but optional\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr/\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-simplified-12-column-layout-grid-alt.png\"alt=\"An illustration shows a yellow 12-column grid system overlaid on a colorful website.\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"simplified-12-column-layout-grid\"\u003eSimplified 12-Column Layout Grid\u003c/h2\u003e\n\u003ch3 id=\"a-simple-powerful-flexible-grid\"\u003eA simple, powerful, flexible grid\u003c/h3\u003e\n\u003cp\u003eLayout grids give any website visual coherence. The \u003ca href=\"https://v2.designsystem.digital.gov/utilities/layout-grid/\"\u003eUSWDS 2.0 layout grid\u003c/a\u003e is a familiar flexbox-powered grid that gives predictable control to designers and developers. The grid’s simple, nestable structure means any component and any layout, large or small, can implement a grid in a snap — and its mobile-first layout options make them customizable to any screen or situation.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eSimilar to Bootstrap 4 and Foundation\u003c/li\u003e\n\u003cli\u003eUses a familiar row and column–based structure\u003c/li\u003e\n\u003cli\u003eBuilt with Flexbox\u003c/li\u003e\n\u003cli\u003ePredictable and nestable\u003c/li\u003e\n\u003cli\u003eDesigned to be mobile-first and responsive\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr/\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-public-sans-hello-alt.png\"alt=\"The word Hello displayed in Public Sans as though being edited in a font editor.\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"introducing-public-sans\"\u003eIntroducing Public Sans\u003c/h2\u003e\n\u003ch3 id=\"a-free-open-source-typeface-from-uswds\"\u003eA free, open source typeface from USWDS\u003c/h3\u003e\n\u003cp\u003eUSWDS 2.0 adds built-in support for custom typefaces, and sometimes you need one that’s simple, neutral, and isn’t Helvetica. \u003ca href=\"https://github.com/uswds/public-sans\"\u003ePublic Sans\u003c/a\u003e is an open source, free license typeface (SIL Open Font License 1.1) designed and maintained by USWDS, adapted from Libre Franklin. Just as with our components, we intend Public Sans to be an example of how to design an accessible open source typeface with contributions and feedback from the public — to deliver a useful, neutral, sans serif and continuously improve it.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eA neutral typeface for interfaces, headings, and body text\u003c/li\u003e\n\u003cli\u003eA consistent alternative to system fonts or other neutral sans serifs\u003c/li\u003e\n\u003cli\u003eDeveloped for outcome-based continuous improvement just like our components\u003c/li\u003e\n\u003cli\u003eDesigned for legibility and readability\u003c/li\u003e\n\u003cli\u003eFeatures tabular numerals for data design\u003c/li\u003e\n\u003cli\u003eFree and open source\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr/\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-2-illio-built-to-grow-alt.png\"alt=\"An expanding geometric flower formed from the USWDS logo.\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"built-to-grow-designed-to-adapt\"\u003eBuilt to Grow, Designed to Adapt\u003c/h2\u003e\n\u003ch3 id=\"a-stable-foundation-for-the-future\"\u003eA stable foundation for the future\u003c/h3\u003e\n\u003cp\u003eUSWDS 2.0 is built to grow and designed to adapt. It exists to help teams build new things and explore new solutions — to be more useful to any federal website and to adapt to new problems and new insights. Our new release is the foundation for the future of the design system and a way to maintain predictable, reliable coherence in an ever-changing world of new technology and evolving expectations. We can’t wait to see what you build with it.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eNo new components, but all new components\u003c/li\u003e\n\u003cli\u003eConsistent, predictable BEM naming\u003c/li\u003e\n\u003cli\u003eOverhauled documentation\u003c/li\u003e\n\u003cli\u003eStreamlined development process\u003c/li\u003e\n\u003cli\u003eEasier to integrate new components from outside projects\u003c/li\u003e\n\u003cli\u003ePrepared to grow and adapt to user needs and industry best practices\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eLike any true 2.0, this is a living product. We’ll continue to test our decisions and assumptions with real-world feedback as it develops and evolves. We encourage you to explore USWDS 2.0, contribute your own code and ideas, and leave feedback on \u003ca href=\"https://github.com/uswds/uswds/issues\"\u003eGitHub\u003c/a\u003e, \u003ca href=\"mailto:uswds@gsa.gov\"\u003eemail\u003c/a\u003e, or our \u003ca href=\"https://chat.18f.gov/\"\u003eSlack channel\u003c/a\u003e. And join our new mailing list by sending an email to \u003ca href=\"mailto:uswds-subscribe-request@listserv.gsa.gov\"\u003euswds-subscribe-request@listserv.gsa.gov\u003c/a\u003e. We’ll use your input to continuously improve the system with ongoing regular releases. We’re listening.\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003eUSWDS is a team effort, built in the open for the public good. A heartfelt thank you to everyone who contributes to the project and whose work supports and inspires our own — your passion, smarts, and support are invaluable. We can’t do it without you.\u003c/p\u003e\n\u003cp\u003eA sincere thanks to Sara Cope, Stephanie Green, Jeremy Zilar, Jacob Parcell, Toni Bonitto, Andre Francisco, Dahianna Salazar Foreman, Wesley Thompson, Adam Biagianti, John Donmoyer, Brian Hurst, Steve Walker, Jen Thibault, Aviva Oskow, Christine Bath, Austin Hernandez, Nick Ng, Eddie Tejeda, Amir Reavis-Bey, Miguel Sousa, Scott Kellum, Eli Altman, Aaron Borden, Andrew Dunkman, Sawyer Hollenshead, Sha Hwang, Jared Cunha, Matt Langan, Heather Battaglia, T. Carter Baxter, Matt Yoder, David Way, nolawi, Amber Reed, Shawn Allen, Micah Taylor, Scott Weber, Brendan Sudol, Brandon Ruffridge, Atul Varma, Maria Marrero, bet4a, Robert Romore, Dave Methvin, Nick Schonning, cathrowe, fat32, Juliette Cezzar, Pablo Stanley, Eric Ronne, Ryan Thurlwell, Linzi Berry, Sam Soffes, Pablo Impallari, and Dave Crossland.\u003c/p\u003e\n"}
  ]
}