U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Https

Secure .gov websites use HTTPS
A lock () or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Indian Affairs Design System

This is Indian Affairs' design system. It helps us create consistent, accessible, and mobile-friendly design. Use it as a reference when you’re building web sites and web-based applications for Indian Affairs. We’ve divided the content by topic based on commonly used design elements.

IA uses the U.S. Web Design System components, design tokens, utilities, and guidance to build Indian Affairs web sites and digital services. 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. For these reasons, DO NOT use other frontend frameworks, such as Twitter Bootstrap.  

Design System Benefits 

Structure and Layout 

Use the flexible grid system to structure Indian Affairs websites, applications, and other applicable digital services. The grid is mobile-first, powered by flexbox, and based on a 12-column system. 

USWDS Layout grid 

Components

USWDS includes over 40 accessible, mobile-friendly components out of the box, ensuring consistency and saving teams the need to build everything from scratch for their web-design and -redesign projects. For more information - including examples, code, and guidance for each - visit the components page

Design Tokens 

Please consider the USWDS Design tokens documentation page when choosing typography, spacing, color, and other style elements.  

Utilities 

Utilities allow designers and developers to build and test new designs and components without abstracting their work into traditional semantic names or altering production CSS. 

They also make it possible to create element-specific overrides without writing high-specificity variants into component CSS. 

Visit the Utilities documentation page for more information, including examples.  

Get Started

Sample contract language for 21st Century IDEA

For tips on how to document requirements related to website modernization in contracts, review USWDS' sample contract language.

Was this page helpful?

This Page Was Not Helpful Because The Content:

indianaffairs.gov

An official website of the U.S. Department of the Interior

Looking for U.S. government information and services?
Visit USA.gov