About the Rivet design system

On this page:


Rivet is a system of templates, components, tools, and guidelines for designing digital interfaces at IU. Built with plain HTML, CSS, and JavaScript, Rivet helps teams create familiar and accessible experiences across platforms.

The design system is made up of the following parts:

  • Layouts are IU-branded starter HTML templates for the design of your website or web application. Rivet features layouts for many common page types, including landing pages, application index pages, and profile pages.
  • Components are modular elements you can combine to create digital interfaces. Components are HTML snippets styled with Rivet CSS classes. Rivet includes a wide variety of components for both websites and web applications, including buttons, cards, form inputs, and a grid.
  • Utilities are CSS classes you can use to adjust color, spacing, typography, borders, shadows, and other visual styles. Utilities are helpful when you need to fine-tune a layout or create an interface element that Rivet’s built-in components don’t cover.
  • Tokens are basic values used by the design system to represent color, spacing, font sizes, and other visual styles. Design tokens can be referenced to create interfaces that appear similar to Rivet on platforms where the design system itself cannot be loaded, such as HTML email or third-party software.
  • Documentation offers guidance on how to use each element of Rivet and outlines best practices related to visual design, user experience, web accessibility, and other topics related to building digital interfaces.

Contribute to Rivet

Visit the Rivet wiki to learn more about:

Get updates about Rivet

To get updates about Rivet:

Get help with Rivet

Rivet is a university-wide initiative, overseen by the Enterprise Experience group. For help with Rivet, email rivet@iu.edu.

This is document aphd in the Knowledge Base.
Last modified on 2022-08-09 15:39:19.