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.
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.
