Shibori3 is a CSS framework to build and style Heroku marketing properties.

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

View documentation

Get started

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

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

Once your application loads the CSS file you can use shibori3 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 shibori3.

Contribute to shibori3

You can find information on running shibori3 locally on your machine in the wiki.

If you’d like to contribute back to shibori3, by adding classes or utilities you feel are missing, please start by opening an issue on heroku/design-systems

Issues with shibori3?

If you have an issue using shibori3 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 #marketing-design channel on Slack to discuss shibori3.