Style guide Glossary Playground Icon system
design.herokai.com

purple3 is a CSS framework for all of Heroku's digital properties. purple provides guidelines for the aesthetic, function, and form of user interfaces to provide a consistent experience for our customers.

Get started

Documentation

A comprehensive list of the atoms that make up purple3

View documentation

Playground

See some examples of using purple3 components in action

Go Play

Icon Library

An icon library that's easy to use and extremely lightweight

View icon library

Get started

To start using purple3, just copy the following into the the head of your site or app;

<link rel="stylesheet" href="https://www.herokucdn.com/purple3/latest/purple3.min.css">

Now we can write our first UI! purple3 uses atomic methods which means we apply lots of single-use classes to our HTML to build up our interfaces. Because the atomic classes can be combined, we don't have to write as much CSS as we used to.

Take a look at the docs for all the classes you can use.