The Indigo Design System includes the resources to create user interfaces consistent with the USAC design principles, visual language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.
The range of resources available for designers and developers include
Fonts, icons, color palettes, and design guidelines
High-quality, production-grade, semantic and accessible component markup
Cross-browser compatible CSS
Make a Request
Indigo provides an easy-to-implement starting point. But if you can't find something you need, request a style or component, and the team will design and build it if it’s applicable across the USAC portfolio.
For Developers
Indigo provides developers with a variety of methods to use and implement assets into a product or web site.
Download and Usage
The Indigo release ZIP file includes compiled assets and their source files for you to integrate into your project. These files should not be modified directly. Editing them can lead to conflicts and unexpected results when upgrading to new releases. If you need custom styles for your project you should link them as separate stylesheets from Indigo.
To use the compiled asset:
Copy the indi.css stylesheet and the indi_icons.svg icon sprite file into your code base.
Add a <link rel="stylesheet" href="indi.css"> link in the <head> of your template.
Refer to the Icons page for information on how to use icons.
To use the source files:
Source files can be found in the src directory. It contains .scss files for each component, an indi_tokens.scss variables file, a base styles directory, and all of the individual .svg icon files.
Add the contents of the styles directory to your asset pipeline and include an @import ’indi.scss’ statement in your main manifest stylesheet.
Be sure to add a link to the Web Font for either usage method above.
Integrate
You can find markup examples on the each component page. Click on the “Copy to Clipboard” link to copy the code snippet for use in your project.
<button class="indi-button indi-button--primary" type=button> Button Text </button>
Component Authoring Tips
The Indigo Design System documentation site is built using Nunjucks templating language, Sass stylesheets and a tokens file defining site variables. See the Code Standards resource page for more code authoring details, and visit the Feedback and Requests page to request access to the Indigo Design System repository.
Download the Indigo Sticker Sheet, which provides starting points for your design mock-ups inclusive of components, color palettes, icons, and basic page layouts.
