Indigo Design System v1.2.0

Getting Started with Indigo


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:
      1. Copy the indi.css stylesheet and the indi_icons.svg icon sprite file into your code base.
      2. Add a <link rel="stylesheet" href="indi.css"> link in the <head> of your template.
      3. Refer to the Icons page for information on how to use icons.
    • To use the source files:
      1. 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.
      2. 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.

For Designers

  1. Designers can browse guidelines on visual style including color, typography, iconography, and space.
  2. Review the Components section, to familiarize yourself with the existing components which you can incorporate into your designs.

Download Design Assets

Download the Indigo Sticker Sheet, which provides starting points for your design mock-ups inclusive of components, color palettes, icons, and basic page layouts.

Download a full set of Source Sans Pro fonts to use in your design applications (Sketch, Photoshop, Illustrator, etc).

Download a base set of approved Indigo icons in SVG and PNG formats to use in your design applications (Sketch, Photoshop, Illustrator, etc).

Download various sizes of the USAC logo to use in your design applications (Sketch, Photoshop, Illustrator, etc).