{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "resources",
    "type" : "single",
    "title" : "An introduction to design systems |Digital.gov",
    "description": "An introduction to design systems",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/resources/introduction-to-design-systems/index.json","item" : [
    {"title" :"An introduction to design systems","deck" : "Learn how and why to use design systems","summary" : "If your organization needs to ensure compliance with a design standard or align to a brand, a design system can help you achieve those goals more easily than building a site from scratch. Learn how a design system can help you and what you need to know to get started.","date" : "2023-02-10T14:30:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","topics" : {
        
            "design" : "Design",
            "digital-service-delivery" : "Digital service delivery"
            },"primary_image" : { "uid" : "uswds-interfaces-dark-1200x630", "alt" :
  "A variety of colorful U.S. Web Design System interfaces and icons on a black background.", "width" :
  "1200", "height" :
  "630", "credit" :
  "", "caption" :
  "", "format" :
  "png" },"branch" : "bc-archive-content-3",
      "filename" :"introduction-to-design-systems.md",
      
      "filepath" :"resources/introduction-to-design-systems.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/resources/introduction-to-design-systems.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/resources/introduction-to-design-systems.md","slug" : "introduction-to-design-systems","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/resources/introduction-to-design-systems/","weight" : "1","content" :"\u003ch2 id=\"what-is-a-design-system\"\u003eWhat is a design system?\u003c/h2\u003e\n\u003cp\u003eA design system is a pre-built set of visual styles, features, and functions for a website, so that web designers and developers don’t have to build a site from scratch and can easily ensure quality. For example, if you need to build a website for a federal agency, you could use some pre-built components or styles from the \u003ca href=\"https://designsystem.digital.gov/how-to-use-uswds/\"\u003eU.S. Web Design System (USWDS)\u003c/a\u003e to make your job easier and improve the user experience of your agency’s website.\u003c/p\u003e\n\u003ch2 id=\"why-use-a-design-system\"\u003eWhy use a design system?\u003c/h2\u003e\n\u003cp\u003eThere are a lot of good reasons to use a design system. Many organizations use them to unify different brands with distinct but unified aesthetics. Using a design system can take the guesswork out of making your site:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eTrustworthy\u003c/strong\u003e — Your users can easily trust that your site is the one they need if you are using recognizable, standardized designs and features.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAccessible\u003c/strong\u003e — If you’re using an \u003ca href=\"https://www.section508.gov/test/\"\u003eaccessibility-tested\u003c/a\u003e design system, you can trust that you have the tools to build accessible websites, because the creators of the system have already done much of the testing for you.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCompliant\u003c/strong\u003e — The \u003ca href=\"https://designsystem.digital.gov/website-standards/\"\u003ewebsite standards\u003c/a\u003e say that agencies should use the U.S. Web Design System (USWDS), which was created to meet the unique needs of federal websites and digital services.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eEfficient\u003c/strong\u003e — Well-maintained design systems are usually tested for speed, efficiency, and compatibility with recent technology. You can usually find statistics and information about a design system’s size and performance on their website.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"how-to-start-using-a-design-system\"\u003eHow to start using a design system\u003c/h2\u003e\n\u003cp\u003eAlthough using a design system can take a lot of guesswork out of building the best site possible, you will need to make sure you’re choosing the right one before you get started. Here are some things to do before you start using a design system:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eInvestigate.\u003c/strong\u003e Ask your supervisor if a design system is already required and available within your organization. For example, if you manage a federal website, check out the \u003ca href=\"https://designsystem.digital.gov/\"\u003eU.S. Web Design System\u003c/a\u003e or your agency’s design system, such as the \u003ca href=\"https://design.va.gov/\"\u003eVA.gov Design System\u003c/a\u003e.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eCommunicate.\u003c/strong\u003e Talk with your designers, engineers, and content managers about options and what you need from a design system. Make a list and compare your options against it.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eConnect.\u003c/strong\u003e Reach out to your agency’s \u003ca href=\"https://digital.gov/resources/federal-web-council/\"\u003eFederal Web Council\u003c/a\u003e representative and digital experience delivery lead. Have a discussion about your design needs. Ask about what support they can provide.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003ePlan.\u003c/strong\u003e Consider planning incremental (or paced) adoption of the design system so that you are not overwhelmed with all of the choices at once.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003ePrioritize.\u003c/strong\u003e Focus on the most important or required elements you’ll need. Find out if you can incorporate those priority elements first.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eEvaluate.\u003c/strong\u003e Make sure the design system meets \u003ca href=\"https://www.access-board.gov/ict/\"\u003eaccessibility standards\u003c/a\u003e and your agency’s usability requirements, such as publishing an \u003ca href=\"https://www.section508.gov/manage/laws-and-policies/website-accessibility-statement/\"\u003eaccessibility statement\u003c/a\u003e.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eCollaborate.\u003c/strong\u003e Work with your designers, engineers, and content managers to implement the design system or system elements you’ve chosen. It’s a team effort to make sure that the elements you’re using from the design system work together and work well.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eIntegrate.\u003c/strong\u003e Make a plan to update your design regularly in case the design system changes or requirements are updated, and incorporate that plan into your organization’s roadmap.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eMaking these important decisions and communicating ahead of adopting a design system are key. This upfront planning will save time and effort in the long run and offer tremendous return on investment.\u003c/p\u003e\n\u003ch2 id=\"what-can-i-do-next\"\u003eWhat can I do next?\u003c/h2\u003e\n\u003cp\u003eIf you manage a federal website, be sure you understand the \u003ca href=\"https://digital.gov/resources/delivering-digital-first-public-experience/\"\u003erequirements for delivering a digital-first public experience\u003c/a\u003e.\nAlso, learn how to use the U.S. Web Design System. For example, at GSA, many web teams get started by using the Design System’s \u003ca href=\"https://designsystem.digital.gov/components/banner/\"\u003eBanner\u003c/a\u003e and \u003ca href=\"https://designsystem.digital.gov/components/identifier/\"\u003eIdentifier\u003c/a\u003e components to identify their site as an official government site.\u003c/p\u003e\n"}
  ]
}