Q&A from the March 2024 USWDS monthly call

[finekatie]

At the March 2024 monthly call, USWDS developers shared how to build new components that look and feel consistent with existing USWDS components. You can use this USWDS tutorial to follow along. We also invited the federal community to participate in research with USWDS. If you don’t see your question about the March call answered, feel free to discuss further here.

Questions from the March 2024 monthly call

• Do I need any specific tech to use this tutorial?
• How do the color families work? I thought you could change $theme-color-primary-family to indigo instead of $theme-color-primary, $theme-color-primary-light etc but couldn't get it to work.
• My agency has custom icons. How can I use them with USWDS?
• I’ve worked with USWDS and some agency specific design systems built on top of USWDS. For example, VA Design System (VADS) & identity design system (Login.gov). Are these design systems extended in the same way you’ve demonstrated? Are there any tips on how to apply the takeaways from this tutorial to agency specific design systems built on top of USWDS?
• Would gov contractors be welcome to join in the UX research?

[finekatie]

Q: Do I need any specific tech to use this tutorial?

A: You do need a few tech-related capabilities:

• The ability to access a terminal on your computer (a way to bring files from GitHub to your computer and manipulate them)
• A text editor
• A web browser and the ability to copy (clone) from GitHub to edit locally in your text editor

Your IT department can help you figure out how you can do this. Learn more in the GitHub repo.

[finekatie]

Q: How do the color families work? I thought you could change $theme-color-primary-family to indigo instead of $theme-color-primary, $theme-color-primary-light, etc., but I couldn't get it to work.

A: You're right to think that should have worked. It doesn't work like that yet. We are aiming to add that capability in the next major version of the design system.

[finekatie]

Q: My agency has custom icons. How can I use them with USWDS?

A: You can treat them just like regular images. Alternatively, you can add them to the sprite with the uswds-compile tool. We recently added a new setting that allows you to pull in icons into the sprite sheet. Look at the README on the uswds- compile repo for path settings.

[finekatie]

Q: I’ve worked with USWDS and some-agency specific design systems built on top of USWDS (e.g., VA Design System). Are these design systems extended in the same way you’ve demonstrated? Are there any tips on how to apply the takeaways from this tutorial to agency-specific design systems built on top of USWDS?

A: We haven’t seen all design systems based off of USWDS, so it’s hard for us to say for sure. Check with your local design system team to find out how that design system in particular is built, and if it extends USWDS in the way we discussed. If they’re unclear, feel free to drop us a line at uswds@gsa.gov.

Tips for how to apply the takeaways:

• Use USWDS-specific solutions when possible (i.e. theme settings, mixins, design tokens)
• If and when you begin to write custom code and styles, be careful how many USWDS styles you’re overriding — customizations can increase the complexity of updating USWDS versions.
• It’s also important to continuously test for accessibility, especially when beginning to override USWDS styles

[finekatie]

Q: Would gov contractors be welcome to join in the federal UX research?

A: We wish we could include contractors in this research, but unfortunately we can’t right now.