uswds · heymatthenry · Jan 8, 2025 · Jan 4, 2025 · Jan 4, 2025 · Jan 4, 2025
diff --git a/Gemfile b/Gemfile
@@ -10,6 +10,4 @@ gem 'html-proofer', '= 4.4.3'
 gem 'jekyll-seo-tag'
 
 gem 'rspec-core'
-gem 'rspec-expectations'
-
-gem "webrick", "~> 1.7"
+gem 'rspec-expectations'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -106,6 +106,7 @@ PLATFORMS
   arm64-darwin-21
   arm64-darwin-22
   arm64-darwin-23
+  arm64-darwin-24
 
 DEPENDENCIES
   html-proofer (= 4.4.3)
@@ -118,7 +119,6 @@ DEPENDENCIES
   liquid-c
   rspec-core
   rspec-expectations
-  webrick (~> 1.7)
 
 BUNDLED WITH
    2.5.7
diff --git a/_data/changelogs/docs-getting-started-designers.yml b/_data/changelogs/docs-getting-started-designers.yml
@@ -0,0 +1,14 @@
+title: Getting started for designers
+type: documentation
+changelogURL:
+items:
+  - date: 2025-01-08
+    summary: Added information about USWDS design kit for Figma.
+    summaryAdditional: Added download link and direct link to file hosted on Figma community. Removed links to third-party Figma kits.
+    githubPr: 3041
+    githubRepo: uswds-site
+  - date: 2025-01-08
+    summary: Updated information about USWDS design kit for Adobe XD.
+    summaryAdditional: Noted that we have stopped maintaining these assets since XD is no longer supported by Adobe.
+    githubPr: 3041
+    githubRepo: uswds-site
diff --git a/_includes/accessibility-tests/a11y-note.html b/_includes/accessibility-tests/a11y-note.html
@@ -1,14 +1,14 @@
 {% assign component_name = page.parent | default: page.title | downcase %}
 
-<div class="usa-alert usa-alert--info usa-alert--no-icon measure-5 margin-bottom-2">
+<div class="usa-alert site-alert usa-alert--info usa-alert--no-icon measure-5 margin-bottom-2">
   <div class="usa-alert__body">
     <p class="usa-alert__text text-bold">
       Test the {{ component_name }} component in your own project.
     </p>
     <p class="margin-y-1">
       USWDS tested the {{ component_name }} component for accessibility. You should test your implementation, too.
     </p>
-      <a class="usa-button margin-top-1 font-body-xs" href="{{ site.baseurl }}/components/{{ component_name | slugify }}/accessibility-tests">
+      <a class="usa-button margin-top-1 font-lang-xs" href="{{ site.baseurl }}/components/{{ component_name | slugify }}/accessibility-tests">
         Use {{ component_name }} accessibility tests
       </a>
   </div>

diff --git a/_includes/code/preview.html b/_includes/code/preview.html
@@ -45,7 +45,7 @@ <h3 class="site-preview-heading">{{ variant_name }}</h3>
 
         {% for link in include.demoLink %}
           <a
-            class="usa-button"
+            class="usa-button site-button"
             href={% include component-preview-link.html
               demoLink=link
               component=include.component %}

diff --git a/_includes/component.html b/_includes/component.html
@@ -6,7 +6,7 @@
 {% assign known_issues = site.data.issues[known_issues_key] %}
 
 {% if page.alert == true %}
-<div class="usa-alert margin-bottom-3 usa-alert--{{ page.alert-class }}">
+<div class="usa-alert site-alert margin-bottom-3 usa-alert--{{ page.alert-class }}">
   <div class="usa-alert__body">
     <h2 class="usa-alert__heading">{{ page.alert-heading }}</h2>
     <p class="usa-alert__text">

diff --git a/_includes/download-buttons-design-retired-1.0.0.html b/_includes/download-buttons-design-retired-1.0.0.html
@@ -1,5 +1,8 @@
-{% comment %}
-These `uswds-assets-*.zip` files are generated in 18F/web-design-standards-assets
-repository. See: https://github.com/uswds/uswds-assets
-{% endcomment %}
-<a class="link-download" href="{{ site.baseurl }}/files/uswds-for-designers/retired/uswds-assets-omnigraffle-1.0.0.zip" onclick="ga('send', 'event', 'Downloaded design files - OmniGraffle', 'Clicked download design files button inside site');">Download 1.0.0 design files (OmniGraffle)</a>
+<div class="link__group-download">
+  <a class="link-download" href="{{ site.baseurl }}/files/uswds-for-designers/retired/uswds-assets-omnigraffle-1.0.0.zip" onclick="ga('send', 'event', 'Downloaded design files - OmniGraffle', 'Clicked download design files button inside site');">
+  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+    <use href="{{ site.baseurl }}/assets/img/sprite.svg#file_download"></use>
+  </svg>
+  <span class="flex-1">Download 1.0.0 design files (OmniGraffle)</span>
+  </a>
+</div>
diff --git a/_includes/download-buttons-design-retired-1.6.10.html b/_includes/download-buttons-design-retired-1.6.10.html
@@ -3,6 +3,16 @@
 repository. See: https://github.com/uswds/uswds-for-designers
 {% endcomment %}
 <div class="link__group-download">
-  <a class="link-download" href="{{ site.baseurl }}/files/uswds-for-designers/retired/uswds-assets-ai-1.6.10.zip" onclick="ga('send', 'event', 'Downloaded design files - Illustrator', 'Clicked download design files button inside site');">Download 1.6.10 design files (Illustrator)</a>
-  <a class="link-download" href="{{ site.baseurl }}/files/uswds-for-designers/retired/uswds-assets-eps-1.6.10.zip" onclick="ga('send', 'event', 'Downloaded design files - EPS', 'Clicked download design files button inside site');">Download 1.6.10 design files (EPS)</a>
+  <a class="link-download" href="{{ site.baseurl }}/files/uswds-for-designers/retired/uswds-assets-ai-1.6.10.zip" onclick="ga('send', 'event', 'Downloaded design files - Illustrator', 'Clicked download design files button inside site');">
+    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+      <use href="{{ site.baseurl }}/assets/img/sprite.svg#file_download"></use>
+    </svg>
+    <span class="flex-1">Download 1.6.10 design files (Illustrator)</span>
+  </a>
+  <a class="link-download" href="{{ site.baseurl }}/files/uswds-for-designers/retired/uswds-assets-eps-1.6.10.zip" onclick="ga('send', 'event', 'Downloaded design files - EPS', 'Clicked download design files button inside site');">
+    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+      <use href="{{ site.baseurl }}/assets/img/sprite.svg#file_download"></use>
+    </svg>
+    <span class="flex-1">Download 1.6.10 design files (EPS)</span>
+    </a>
 </div>
diff --git a/_includes/download-buttons-design.html b/_includes/download-buttons-design.html
@@ -1,12 +1,9 @@
-{% comment %}
-These `uswds-assets-*.zip` files are generated in 18F/web-design-standards-assets
-repository. See: https://github.com/uswds/uswds-for-designers
-{% endcomment %}
 <div class="link__group-download">
   <a class="link-download"
-    href="https://github.com/uswds/uswds-for-designers/releases/download/v2.6.0/uswds-for-designers-v2.6.0.zip"
-    onclick="ga('send', 'event', 'Downloaded design files - Sketch', 'Clicked download design files button inside site');">Download the USWDS {{ site.uswds_version }} Design Kit (Sketch) [ZIP; 12.4 MB]</a>
-  <a class="link-download"
-    href="https://github.com/uswds/uswds-for-designers/releases/download/v2.6.0/uswds-for-designers-v2.6.0.zip"
-    onclick="ga('send', 'event', 'Downloaded design files - Adobe XD', 'Clicked download design files button inside site');">Download the USWDS {{ site.uswds_version }} Design Kit (Adobe XD) [ZIP; 12.4 MB]</a>
+    href="https://github.com/uswds/uswds-for-designers/releases/download/v3.0.0/uswds-for-designers-v.3.0.0.zip"
+    onclick="ga('send', 'event', 'Downloaded design files', 'Clicked download design files button inside site');">
+    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+      <use href="{{ site.baseurl }}/assets/img/sprite.svg#file_download"></use>
+    </svg>
+    <span class="flex-1">Download the USWDS Design Kits for Figma and Sketch [ZIP; 17.6 MB]</span></a>
 </div>
diff --git a/_includes/known-issues-alert.html b/_includes/known-issues-alert.html
@@ -1,4 +1,4 @@
-<div class="usa-alert margin-bottom-3 usa-alert--{{ known_issues.alert_type }}">
+<div class="usa-alert site-alert margin-bottom-3 usa-alert--{{ known_issues.alert_type }}">
   <div class="usa-alert__body">
     <p class="usa-alert__text">
       <strong>Testing has revealed some issues with this component.</strong> Learn more in the <a href="#known-issues">known issues section</a> on this page.

diff --git a/_includes/outdated-content-alert.html b/_includes/outdated-content-alert.html
@@ -1,4 +1,4 @@
-<div class="usa-alert usa-alert--warning post-outdated-content">
+<div class="usa-alert site-alert usa-alert--warning post-outdated-content">
   <div class="usa-alert__body">
     <p class="usa-alert__text">
       This page was published <strong>more than three years ago</strong> and may include broken links or outdated information.

diff --git a/_includes/patterns/selected-content.html b/_includes/patterns/selected-content.html
@@ -3,7 +3,7 @@
   <img src="{{ site.baseurl }}/img/patterns/select-a-language-selected-content.webp"
     alt="Language selector button with the text Languages shows hover state and a dropdown menu with language options. The selected language in the dropdown is underlined on hover. The last element in the dropdown reads Selected content in additional languages.">
 </a>
-<a class="usa-button"
+<a class="usa-button site-button"
   href="{{ site.federalist_base }}/develop/iframe.html?id=components-language-selector--three-or-more-languages&amp;args=&amp;viewMode=story">
   Demo Language selector for selected multilingual content
 </a>
diff --git a/_includes/patterns/three-languages.html b/_includes/patterns/three-languages.html
@@ -3,7 +3,7 @@
   <img src="{{ site.baseurl }}/img/components/language-selector/language-selector-three-or-more.webp"
     alt="Language selector button with the text Languages shows hover state and a dropdown menu with language options. The selected language in the dropdown is underlined on hover.">
 </a>
-<a class="usa-button"
+<a class="usa-button site-button"
   href="{{ site.federalist_base }}/develop/iframe.html?id=components-language-selector--three-or-more-languages&amp;args=&amp;viewMode=story">
   Demo Language selector with three or more languages
 </a>
diff --git a/_includes/patterns/two-languages.html b/_includes/patterns/two-languages.html
@@ -3,7 +3,7 @@
   <img src="{{ site.baseurl }}/img/components/language-selector/language-selector-two-languages.webp"
     alt="Language selector button with the text Español shows default, hover, and active states" class="maxw-full width-mobile">
 </a>
-<a class="usa-button"
+<a class="usa-button site-button"
   href="{{ site.federalist_base }}/develop/iframe.html?id=components-language-selector--two-languages&amp;args=&amp;viewMode=story">
   Demo Language selector with two languages
 </a>
diff --git a/_includes/perf_example.html b/_includes/perf_example.html
@@ -1,6 +1,6 @@
 {% assign hed = include.hed | default: "h4" %}
 
-<div class="usa-alert usa-alert__info usa-alert__paragraph">
+<div class="usa-alert site-alert usa-alert__info usa-alert__paragraph">
   <div class="usa-alert__body">
     <{{ hed }} class="usa-alert__heading">Example</{{ hed }}>
     <div class="usa-alert__text">

diff --git a/_includes/security-updates.html b/_includes/security-updates.html
@@ -1,4 +1,4 @@
-<ul class="usa-collection">
+<ul class="usa-collection site-collection">
   {% for update in site.security_updates %}
     <li class="usa-collection__item">
       <div class="usa-collection__body">

diff --git a/_includes/site-card.html b/_includes/site-card.html
@@ -15,6 +15,6 @@ <h2 class="usa-card__heading font-lang-lg">{{ include.heading }}</h2>
     <p>{{ include.body }}</p>
   </div>
   <div class="usa-card__footer">
-    <a class="usa-button" href="{{ include.linkUrl }}">{{ include.linkText }}</a>
+    <a class="usa-button site-button" href="{{ include.linkUrl }}">{{ include.linkText }}</a>
   </div>
 </div>
diff --git a/_includes/touchpoint-survey-script.html b/_includes/touchpoint-survey-script.html
@@ -4,7 +4,7 @@
 
 {% assign tpLabel = "Provide feedback about this page" %}
 {% assign tpText = "Was this page helpful?" %}
-{% assign tpClasses = "usa-button usa-button--outline" %}
+{% assign tpClasses = "usa-button site-button usa-button--outline" %}
 
 <section class="touchpoints__container" role="complementary" aria-label="Page feedback">
   {% if site.env == "production" %}

diff --git a/_posts/2021-03-11-whats-next-for-uswds.md b/_posts/2021-03-11-whats-next-for-uswds.md
@@ -65,7 +65,7 @@ Though agencies start with different goals and capabilities, we discovered they
 
 
 
-<ul class="usa-icon-list usa-icon-list--size-lg margin-top-5 margin-bottom-4">
+<ul class="usa-icon-list site-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">

diff --git a/_together/02-findings.md b/_together/02-findings.md
@@ -10,6 +10,7 @@ slug: findings
 hero_title: Findings
 hero_subtitle: Teams are thinking about how to create digital experiences that embrace all users and are effective, accessible, and respectful.
 chapter: true
+excerpt: ""
 
 summary_sections:
   - heading: Current state

diff --git a/_together/03-whats-next.md b/_together/03-whats-next.md
@@ -9,6 +9,7 @@ permalink: /together/whats-next/
 slug: whats-next
 hero_title: What’s next
 hero_subtitle: Toward pattern-driven development for the design system.
+excerpt: ""
 
 chapter: true