thisisdano · Apr 14, 2021 · Apr 13, 2021 · Apr 14, 2021 · Apr 14, 2021 · Apr 14, 2021
diff --git a/_data/nav.yml b/_data/nav.yml
@@ -139,8 +139,9 @@ Templates:
 
 About:
   - href: /about/
-  - href: /about/community/
+  - href: /about/key-benefits/
   - href: /about/product-values/
+  - href: /about/community/
   - href: /about/whats-new/
   - href: /about/releases/
   - href: /about/updates/

diff --git a/pages/about/key-benefits.md b/pages/about/key-benefits.md
@@ -0,0 +1,116 @@
+---
+title: Key benefits
+permalink: /about/key-benefits/
+redirect_from:
+- /key-benefits/
+layout: styleguide
+category: About
+lead: Using the U.S. Web Design System makes it easier to build accessible, mobile-friendly government websites. Here's why USWDS works for government teams.
+---
+The U.S. Web Design System (USWDS) is a toolkit of principles, guidance, and code that makes it easier to build accessible, mobile-friendly government websites. We use human-centered design to support human-centered design teams.
+
+There are many ways to build a website or service. We designed USWDS to deliver unique benefits to government teams:
+
+- [Compliance from the start](#compliance-from-the-start)
+- [Proven design solutions that users expect](#proven-design-solutions-that-users-expect)
+- [Team alignment and common goals](#team-alignment-and-common-goals)
+- [Mission focus](#mission-focus)
+- [A cross-functional design system community](#a-cross-functional-design-system-community)
+- [Effective stewardship of public resources](#effective-stewardship-of-public-resources)
+
+
+{:.border-top-05.border-primary.padding-top-2.margin-bottom-2}
+
+## Compliance from the start
+**We’re a government team that understands what government teams need, including compliance with Section 508 and 21st Century IDEA.**
+
+The [requirements for federal websites and digital services [digital.gov]](https://digital.gov/resources/checklist-of-requirements-for-federal-digital-services/) can seem confusing. That's where we can help. USWDS principles, guidance, and code meet these requirements from the start. We include accessible, mobile-friendly components out of the box. We provide tools and solutions (like [a simple way to pick accessible colors](https://designsystem.digital.gov/design-tokens/color/overview/#color-and-accessibility) or [a component that displays required links](https://designsystem.digital.gov/components/identifier/)) that make compliance simpler.
+
+The design system is built by government, for government, with government. We're focused on what government teams need, to help you do your best work. Accessibility and mobile-friendliness are at the core of our product. They’re a part of every decision. And we'll always stay up-to-date with the latest requirements and standards.
+
+
+{:.border-top-05.border-primary.padding-top-2.margin-bottom-2}
+
+## Proven design solutions that users expect
+**Don’t reinvent the wheel when it comes to buttons, forms, and other common elements. Provide a more seamless experience across both your agency and the entire federal government.**
+
+The design system helps users know what to expect when they visit federal websites. It allows you to provide consistent usability, accessibility, editorial style, and look-and-feel across your websites and digital services. This consistency delivers a more seamless, user-friendly experience (a key requirement of [21st Century Integrated Digital Experience Act (21st Century IDEA) [digital.gov]](https://digital.gov/resources/21st-century-integrated-digital-experience-act/)) and also increases trust in government.
+
+
+{:.border-top-05.border-primary.padding-top-2.margin-bottom-2}
+
+## Team alignment and common goals
+**Strengthen your team’s agreement to common principles and human-centered design right from the start.**
+
+Effective, high-performing teams typically have team agreements. The [USWDS design principles](https://designsystem.digital.gov/design-principles/) are an important starting point for any team agreement:
+
+1. Start with real user needs.
+2. Earn trust.
+3. Embrace accessibility.
+4. Promote continuity.
+5. Listen.
+
+These principles align teams across the federal government around common goals. They support and reflect requirements for federal websites and digital services, codified in the 21st Century IDEA.
+
+
+{:.border-top-05.border-primary.padding-top-2.margin-bottom-2}
+
+## Mission focus
+**Focus on your mission, not your markup.**
+
+Spend less time building from scratch and more time building solutions. USWDS speeds up the development process and helps teams concentrate on higher-level goals. Your team knows its audience and mission. USWDS adapts to your brand’s look-and-feel, editorial style guidelines, user needs, and overall digital strategy.
+
+Get off the redesign treadmill. When the design system improves, so does your project. By using the design system, your service benefits from our continuous improvement. We fix bugs, improve accessibility, and reduce technical debt at scale. Each improvement to the design system improves all design system sites.
+
+
+{:.border-top-05.border-primary.padding-top-2.margin-bottom-2}
+
+## A cross-functional design system community
+**Break down silos and grow your skills alongside web professionals across government.**
+
+As more and more agencies adopt and adapt the design system, the community of content managers, designers, and developers that use it grows. We chat, ask questions, and share solutions in a public Slack open to design system users (sign up to [join the USWDS community]({{ site.baseurl }}/about/community/)) and also through [our GitHub organization [github.com]](https://github.com/uswds). Your contributions to the community — which can range from simple questions to new components — help colleagues with their own questions and implementations.
+
+
+{:.border-top-05.border-primary.padding-top-2.margin-bottom-2}
+
+## Effective stewardship of public resources
+**Improve performance, efficiency, governance, and institutional memory.**
+
+USWDS exists to scale service expertise across the federal government, so all teams can benefit from any team's improvements. When you build with USWDS, you benefit from the experience of teams and individuals from your agency and others. What you build helps improve the design system for the next teams that use it.
+
+This process helps get the most from the teams that use the design system. It builds the institutional memory available to new teams. It promotes user-centered, data-driven  decision making and governance. It results in faster, more effective service delivery over time. Everything we invest in the design system is shared, multiplied, and compounded to the greatest extent possible. We use the scale of the federal government to help individual teams perform at their peak.
+
+We are as committed as you are to public service, and we reflect this in our product, community, and customer support.
+
+
+{:.border-top-05.border-primary.padding-top-2.margin-bottom-2}
+
+## How to make the case for USWDS
+We know that making the case for USWDS is important and sometimes difficult. Here are a few tips!
+
+<ul class="usa-icon-list usa-icon-list--size-lg margin-top-5 margin-bottom-4">
+  <li class="usa-icon-list__item margin-bottom-2">
+    <div class="usa-icon-list__icon text-ink">
+      <svg class="usa-icon" aria-hidden="true" role="img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="30" cy="30" r="30" fill="#2672DE"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.1657 36.3262L17.6016 31.762L21.9812 27.3824L26.5453 31.9465L38.0917 20.4001L42.4714 24.7798L30.925 36.3262L30.9251 36.3262L26.5454 40.7059L26.5454 40.7058L22.1657 36.3262Z" fill="white" />
+      </svg>
+    </div>
+    <div class="usa-icon-list__content">
+      <p><b>Use these key benefits listed to make the case to your team and management.</b> You may customize the themes and messages for your audience, and email us at <a href="mailto:uswds@support.digitalgov.gov">uswds@support.digitalgov.gov</a> if you have feedback on things to add or remove from this list.</p>
+    </div>
+
+  </li>
+
+  <li class="usa-icon-list__item margin-bottom-2">
+    <div class="usa-icon-list__icon text-ink">
+      <svg class="usa-icon" aria-hidden="true" role="img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="30" cy="30" r="30" fill="#2672DE"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.1657 36.3262L17.6016 31.762L21.9812 27.3824L26.5453 31.9465L38.0917 20.4001L42.4714 24.7798L30.925 36.3262L30.9251 36.3262L26.5454 40.7059L26.5454 40.7058L22.1657 36.3262Z" fill="white" />
+      </svg>
+    </div>
+    <div class="usa-icon-list__content">
+      <p><b>See the <a href="{{ site.baseurl }}/documentation/sample-contract-language/"> sample contract language for 21st Century IDEA</a></b> we published, which you may use to document requirements related to website modernization in your various contracts.</p>
+    </div>
+  </li>
+</ul>