I am a huge fan of the US Web Design System and all the potential it has to offer in creating some standardization among US government websites. One of the features I like most is while providing a baseline it isn’t as rigid as some of the design systems from other governments. I know there will be some that see this as a weakness, but I think it will ultimately be its greatest strength allowing other to extend and improve the baseline. Already designers and developers have provided valuable feedback and enhancements that are already part of version 2 or will be in the near future.

With version 2 of the system scheduled to be released very soon, I just wanted to document some of the work I have been doing. Most of the improvements and enhancements I have needed are freely visible and available on my stphnwlkr.dev website. I had created quite a number of enhancements for version 1 that became part of VA’s Office of Information and Technology website and version 2 is essentially a new system requiring a great deal of rework. As it turns out, version 2 has so many new features and utilities available, most of the extended items I created, especially the utilities, are no longer necessary. Some features like tables and accordions needed some additional styling for color variety, and I have created some grid-based cards. Other new features are merely works in progress and USWDS team builds out tab component, and other new features. The recent decision to move completely to BEM means I will need to go back and reevaluate some of my code to more accurately follow the BEM principles..

One of my favorite features of version 2 is the extended color palette. With 373 colors available, almost every color need is now covered.

Unfortunately, turning on all the system colors causes the css to balloon in size going from 500k uncompressed to 1.6MB, but minified (1mb) and using gzip (147k) the delivery is extremely fast.

Another new feature was the extended font families, but I have opted to only use system fonts which really speeds up the site and looks almost identical to the available families. The one exception is the serif font and I have yet to decide if I will add that back.

As I add new features I intend to post more articles.

Featured image by Domenico Loia

Featured image by: 

Let me know what you think about this post.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share This Story!

Related articles

  • Read Using Formidable Forms to Add Issues to GitHub

    December 5, 2018