Rivet Design System

A system for designing and building digital interfaces at IU

Built with plain HTML, CSS, and JavaScript, Rivet helps teams create familiar and accessible experiences across platforms.

Start using Rivet Learn more about Rivet

Explore the Rivet design system

Layouts

IU-branded starter HTML templates for the design of your website or web application.
Components

Modular elements you can combine to create digital interfaces using HTML and CSS.
Utilities

CSS classes that can be used to adjust colors, typography, shadows, spacing, and more.
Tokens

Basic values used by the design system to represent color, spacing, font sizes, and other visual styles.
Design resources

Figma libraries for creating high-fidelity mockups of Rivet interfaces that are more easily translated into browser markup.
Tutorials

Beginner-friendly lessons in how to get started using the design system.

“Indiana University offers its users sustainable and consistent experiences with Rivet”

Featured Rivet as one of the best design system documentation sites in the industry

Featured Rivet as one of the best design systems that focuses on accessibility

Visit the Rivet wiki to learn more about:

To get updates about Rivet:

Bookmark the Rivet blog to stay updated.

Aug 04, 2024

Rivet 2.8.1 is now available. This patch release makes accessibility updates to the dropdown, sidenav, and breadcrumbs components.

Scott Anthony Murray

Jul 07, 2024

Rivet 2.8.0 is now available. This release introduces the Rivet sticker library, adjusts dropdown styling, and fixes various bugs.

Scott Anthony Murray

May 06, 2024

Rivet 2.7.0 is now available. This release integrates Rivet's CSS custom properties into the core package and fixes various bugs.

Scott Anthony Murray

Rivet is a university-wide initiative, overseen by the Enterprise Experience team. Learn how to get help with Rivet.