Purple3
Purple3 is a CSS framework to build and style Heroku products.
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.
Contribute to purple3
You can find information on running purple3 locally on your machine in the wiki.
If you’d like to contribute back to purple3, by adding classes or utilities you feel are missing, please start by opening an issue on heroku/design-systems
Issues with purple3?
If you have an issue using purple3 you can open an issue on heroku/design-systems and the design team will do their best to help you.
You can also ping us in the #talk-purple channel on Slack to discuss purple3 or atomic CSS.