About Rivet 2

What is Rivet 2? #

Rivet 2 is the latest version of Indiana University’s design system.

What is a design system? #

A design system is a collection of templates, components, tools, and guidelines for designing digital interfaces at an organization.

By creating a common toolkit and set of standards for their teams, an organization can ensure a more consistent experience for their users across all of their digital properties, including websites, apps, email, and digital signs.

Design systems can also help teams create better products more quickly, as much of the work when it comes to usability, accessibility, and branding has already been done for them.

The Rivet design system is made up of five parts: layouts, components, utilities, tokens, and documentation.

• Layouts: IU-branded starter HTML templates for the design of a website or web application. Rivet features layouts for many common page types, including landing pages, application index pages, and profile pages.
• Components: Modular elements that can be combined 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: CSS classes that can be used to adjust color, spacing, typography, borders, shadows, and other visual styles. Utilities are helpful when you need to create an interface element that Rivet’s built-in components don’t cover.
• Tokens: 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: Guidance on how to use each element of Rivet and best practices related to visual design, user experience, web accessibility, and other topics related to building digital interfaces.

How does Rivet relate to other tools at IU? #

IU provides teams with a wide range of tools for building websites and web applications. Rivet is not a replacement for or alternative to any of these tools. Instead, Rivet is intended to provide common markup, styles, and design guidelines for digital products built with or hosted by these tools.

IU Web Framework
The IU Web Framework is a tool that gives teams a web forms-based interface for building and publishing web pages. The pages created by the IU Web Framework use their own distinct markup and styles. There are plans to update the Web Framework to generate pages that appear more similar to those created using Rivet markup and styles.

You do not have to use the IU Web Framework to create pages that use Rivet markup and styles. Rivet is not designed specifically for use with the Web Framework. Rivet is not the same product as the Web Framework nor are the two products merging.

Web Content Management System (WCMS)
The WCMS (or Cascade Server) is IU’s content management system. It enables site managers to structure environments where content contributors can create, maintain, and publish content.

Rivet is only markup and styles for digital interfaces—it is not a tool for creating, maintaining, or publishing content. Sites managed using the WCMS can use Rivet markup and styles but are not required to. You are not required to use the WCMS to manage a site using Rivet markup and styles.

FireForm
FireForm is IU’s self-service tool for building forms for data collection and workflows. The appearance of its forms and administrative interfaces are consistent with Rivet styles. You are not required to use FireForm if you want to create forms with Rivet styles. Rivet’s form input styles are designed to work with the browser’s built-in form elements and are not specific to FireForm.

Sitehost
Sitehost is IU’s central web server solution for core and gateway university websites. It is only used to host websites, not build them. Sites built using Rivet markup and styles can be published to Sitehost. You are not required to use Rivet to publish your site to Sitehost, and not all sites that use Rivet are published to Sitehost.

How can developers use Rivet? #

Developers are encouraged to start by downloading one of Rivet’s prebuilt layouts. Layouts are plain HTML files that import Rivet CSS and JavaScript. There are many layouts that are designed for a specific common page type, such as landing pages and profiles, but developers can start with one of several blank layouts as well.

Layouts can be used as they appear or modified to meet a specific need. In most cases, a layout’s markup will be adapted for use with a templating language such as Velocity, Nunjucks, or Blazor.

Developers can mix and match Rivet’s components to customize a layout or create entirely new layouts. Components represent individual interface elements such as alerts, buttons, cards. Each component is a code snippet that can be copied and pasted into an HTML document.

Both layouts and components can be adjusted using Rivet’s CSS utility classes.

How can designers use Rivet? #

Designers are often asked to collaborate with developers, users, subject matter experts, and other stakeholders to mock up interfaces. These mockups are handed off to developers to be implemented using HTML, CSS, and JavaScript.

The Rivet team is in the process of creating a UI kit for use with the Figma design and prototyping application. Rivet components, layouts, icons, styles, and more will be available as libraries within Figma. Designers can use these libraries to create high-fidelity mockups of Rivet interfaces that are easily translated into markup for the browser.

Start using Rivet #

See the Getting Started page for instructions on how to start using Rivet 2 in your website or web application.