Purple provides guidelines for the aesthetic, function, and form of user interfaces to provide a consistent experience for our customers. This is a living document and is under constant iteration.

Get started

Purple3 can be included via our CDN. Place the following in the <head> of your application:

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

Once your application loads the CSS file you can use purple3 classes on the HTML elements in your templates to style them. View the introduction in our documentation to learn more about atomic CSS and how best to use purple3.