• View documentation
• View components
• View source on GitHub

Rivet is Indiana University’s open-source design system for building consistent, accessible digital interfaces across university websites and applications.

I led Rivet from its inception, working as a technical lead to turn shared design standards into production-ready frontend components, documentation, and implementation guidance used by teams across the institution.

The problem

Indiana University had hundreds of digital products built by distributed teams across campuses, departments, and vendors. Without a shared interface system, teams repeatedly solved the same frontend problems: buttons, forms, layout grids, navigation, accessibility patterns, documentation, and brand consistency.

Rivet gave those teams a common foundation: reusable UI components, layout patterns, design tokens, accessibility standards, and practical documentation that helped designers and developers ship consistent interfaces without starting from scratch.

My role

I led development of the system from the earliest version through broad institutional adoption. My work included:

• Implementing reusable HTML, CSS, and JavaScript components
• Establishing component APIs, naming conventions, layout rules, and usage guidance
• Writing documentation that helped developers understand not just what to use, but why and when to use it
• Collaborating with designers to translate visual patterns into durable browser behavior
• Improving accessibility, responsive behavior, and consistency across high-traffic institutional interfaces
• Coordinating adoption across teams with different technical stacks, product needs, and levels of frontend experience

I moved between design intent and production implementation: refining the details, reducing ambiguity, and turning one-off interface decisions into reusable patterns.

Component craft

Rivet components had to work in a messy real-world environment: many teams, many products, many backend systems, and many levels of frontend maturity.

That meant the system could not depend on fragile assumptions. Components needed clear markup, predictable CSS, accessible defaults, responsive behavior, and documentation that made correct usage easier than incorrect usage.

I focused on the details that make a design system useful in practice:

• Semantic markup and keyboard-accessible interaction patterns
• CSS architecture that could scale across applications without becoming brittle
• Responsive layouts that worked across common university use cases
• Component documentation with examples, variants, and implementation notes
• Practical guidance for designers and developers working from the same shared vocabulary

The goal was not just to make interfaces look consistent. It was to make quality repeatable.

Outcome

Rivet became a shared frontend foundation for Indiana University, adopted across hundreds of websites and applications. It reduced duplicated effort, improved consistency, and helped distributed teams build more accessible interfaces with less guesswork.

The system also became part of the university’s broader design and engineering culture: a place where design standards, frontend implementation, accessibility, and documentation lived together instead of being scattered across individual projects.