A design system for WVU.

The WVU Design System is a set of principles and guidelines, as well as a collection of code and visual assets that make it easy to create consistent, WVU-branded websites.

Check out the Getting Started Guide

Unsure why you should use this? See why we need a design system.

Want to use the system, but new to web development? See our beginner’s guide.

An effective design system starts with good fundamentals.

Principles

The following principles guide our decisions when making WVU-branded websites.

Guidelines and Best Practices

Guidelines for accessibility, writing code, developing content, and designing your site’s layout.

Building Your Site

Quickly build website themes using WVU-branded components and utilities.

Utilities

Want to apply a gold slash to a block of type? Want to use the Helvetica Black Condensed typeface to make your copy stand out? Just apply a utility class to the element and you’re done!

Components

Components are the building blocks of templates. We offer a wide variety of components to meet your users’ needs.

Themes

Not sure which combination of components you should use to meet your audience needs? Check out our example themes for some inspiration.

New to creating CleanSlate Themes?

Check out these tutorials to get you started.

Beginner’s Guide

Have no idea what Sass variables are? Does the phrase “check out your repo using Git and develop your theme locally?" sound like a foreign language? Check out our beginner’s guide.

View Tutorial

Creating a CleanSlate Theme Using the WVU Design System

Know what you need to know before getting started, and get an overview of the website-making process for CleanSlate.

View Tutorial

Create a CleanSlate Site Using the Design System Theme

Learn how to request and configure a theme, as well as add components to create templates on the fly.

View Tutorial

WVU Design System FAQs

Answers to the most common questions about the WVU Design System and Super Theme Version 3.

View Tutorial

Check out all of our tutorials.

Help Make the System Better

We use Github issues to keep track of new component submissions, bugs, design feedback, and any other suggestions related to the system. If you have created a component you think would be useful to others or would like to make a suggestion, let us know.

See how you can help

Or file an issue on Github.