Porter's Logo
Meet Michelle, the Porter Cat! She has traveled the world to see how people are deploying software, and now she’s here to help you use Porter to bundle your deployments. 🧳🌍
Origin Story
Michelle is named after the intrepid Michelle Noorali who is one of the creators of the Cloud Native Application Bundle (CNAB) specification and the original implementation Duffle. Duffle eventually became the foundation for everyone’s CNAB runtime, including Porter’s, when it converted its code into a reusable library for everyone to use with cnab-go. Since Michelle helped welcome and inspire so many of us to work with bundles, we wanted to honor her work getting this ecosystem started by naming our friendly Porter Cat after her.
Styleguide
Here are some hints on how to use the logo and Porter brand and ensure that the colors and font are consistent, the logo does not look blurry, and of course everything looks darn cute.
All of our art assets are in our community repository in the art/ directory. That’s the best place to get a copy of any picture that you need to work with. If you aren’t sure about a picture that you need, or how to use it, contact us and we’d be happy to help out.
Image Formats
Our repository has multiple image formats for each image, the original SVG and a PNG. When you need to resize an image, it will look best if you can open an SVG file from the repository, resize it, and then export it to the image format that you need. When a PNG is resized, especially a large amount, the resulting image becomes fuzzy.
Logo
We have a few versions of the logo depending on the space and layout constraints.
Wordmark
Porter’s wordmark is set in the Abril typeface:
Abril is a bold display typeface created by Veronika Burian & José Scaglione (as TypeTogether). These font files are licensed under the Open Font License.
Note: For normal page copy please pair a more legible typeface like Open Sans.
Color values:
Primary (brand elements):
$gray: #3C2E53; // ideal for text
$gold: #DFB960;
Secondary (backgrounds, shading, accents):
$green: #DDF5F2; // ideal for bg
$pink: #CFBFD0;
Cat colors:
$red: #AB2449;
$orange: #F1CE91;
Porter Cat
Guidelines for Drawing Porter Cat
When drawing the Porter cat, follow these set of guidelines:
Simple Shape
The character should have just enough detail to make them out. The smaller they get, the less detail they can have to avoid crowding. The attributes should be prioritized by number rank. A smaller porter cat should have ears and a hat. Torso could be omitted.
Noodle Arms
Think Adventure Time or Cyanide and Happiness. Limbs should be easy to position and use in action poses (no fingers or sharp joints).
Is A Cat
- Ears
- Tail
- Whiskers
Is A Porter
- Hat
- Bowtie
- Accessories
The tail should curve up towards the head, so that it points up in an opposing arc away from the arms. Avoid crossing the tail and arms if possible.
Scaling Porter Cat
When the logo needs to be scaled way down, the line-drawing border needs to lighten. At a certain point (say 20px) the border should be dropped for this simplified rendering (favicon). You can also represent Porter Cat using the cat face emoji 🐱 in your blog posts and on social media.
When you are writing about Porter, feel free to use the images provided here to reference us. Please have fun with Porter Cat!