Introduction

Minerva is an umbrella project that can be summarized as an implementation of the University of Alabama's web design system, Minerva. At it's heart, Minerva is a CSS framework that lays the visual foundation for any web project at the university. Minerva includes 3 major components:

• Design System
• CSS Framework
• Component Library

Guiding Principals

Minerva is all about intentional design. Decisions that govern the development of the design system are guided by a few pillars that reflect the system's ideals.

For all platforms

At every step, Minerva is intended to be as platform agnostic as possible. It's goal is to be a tool used across technology stacks to deliver a cohesive user experience and a unified institutional voice. We hope that over time Minerva will become a cornerstone of any web project at the university.

For all devices

Everyone should have a high quality experience regardless of their device. Minerva is designed to consider viewports of all sizes and all kinds of input methods. As the world of technology changes, the design system is able to adapt. This means thinking in terms of fluid design rather than static breakpoints.

For all people

As a flagship university, our design system is built for the widest audience. It's designed to be clearly readable, intuitive to use, and considerate of those who use assistive technology. It is built on a high standard of accessibility not only because of industry standards, but because as an educational institution, we should be leaders and champions of accessibility.

Flexible and evolving

As a living project, Minerva will never truly be “done” - and that's not a bad thing! We want the design system to grow and evolve with the needs and desires of the university and adapt to shifts in the industry. It's designed to be as flexible as possible so that it can be adapted and incorporated into all kinds of projects.

Smart

Lastly, Minerva values semantic naming and components are designed to react to their contextual placement. This means that the same code can be reused in different places for different visual or contextual impact, or that the component may change it's layout depending on how much space it has available to it.