Topics

A design system helps us build websites faster and more consistently. It gives us a clear structure and reusable parts, so we don’t have to start from scratch every time.

It also helps:

• Keep everything looking and working the same
• Make websites easier to use
• Save time and resources
• Keep teams working toward the same goals

We use a flexible 12-column grid system to build Indian Affairs websites and apps. It’s mobile-first and powered by flexbox, which means it works well on all screen sizes.

Learn more about the USWDS Layout Grid

The U.S. Web Design System (USWDS) includes over 40 ready-to-use components like buttons, forms, and menus. These are:

• Accessible
• Mobile-friendly
• Easy to use

They help teams build websites faster and more consistently.

• Explore USWDS Components

Design tokens are rules for things like colors, fonts, and spacing. They help keep the look and feel of our websites consistent.

• See USWDS Design Tokens

Utilities are tools that help developers test and build designs quickly. They let you make changes without writing new CSS or changing the main code.

• View Utilities Documentation

To keep our websites accessible and consistent, do not do the following in text areas:

Don’t add extra HTML

Even if it follows USWDS rules, adding HTML can break the layout or make it hard for others to edit. If you need new features, submit a request to the Web Team.

Don’t add custom CSS

We follow USWDS styles for fonts, colors, and layout. Adding your own CSS can break the design and make the site look inconsistent.

Don’t add USWDS or custom classes

Misspelled or misplaced classes can break the layout. If someone edits the page later and doesn’t know the class is there, it can cause problems.

Don’t add JavaScript, jQuery, PHP, or other code

The Drupal system isn’t built to handle this kind of code in text areas. It can break the page or cause errors. If you need a feature, contact the Web Team.

Don’t change the layout with extra divs or classes

Changing the layout can break the page and make it look different from the rest of the site.

Note: These kinds of edits can be lost during updates or content changes. To avoid problems, let the Web Team handle all code and layout changes. This keeps things running smoothly for everyone.

Need help writing contracts for website updates?

• Check out USWDS’ sample contract language