Primer Brand and Illustration Guidelines

[ashygee]

What & why

As we continue to expand the Primer brand with new sites and updates, we are running into more use cases where consistent illustrations are needed to correctly represent the Primer brand.

Known issues/things to consider

• Currently the public interprets the Primer logo to be the package Octicon, but this has not bet solidified
• Pairing illustrations to be consistent with the site illustrations but also maintaining Primer as a separate entity
• There is currently no illustration-specific documentation
• The illustrations should be consistent proportionally as they will need to scale based on use and display size

Who

• @ashygee will create documentation and set up a component system for the illustrations
• @broccolini to provide current guidelines and support with design feedback and reviews (@emilybrick to support with this as well?)

Tracking

The following assets are needed or need to be updated with new style:

Primer.style

• Homepage
  • Update Hero illustration
  • Update Octicons illustration
• Update Team page illustration
• Update News illustration

Sub-site hero images

• Primer CSS
• Update Primer Design
• Update Primer Components

Readme Images

• Update Primer.style
• Primer Design
• Primer Components
• Primer CSS

Social Images

• Spectrum chat background
• Spectrum chat avatar
• Twitter background
• Twitter avatar
• Facebook
• OG images
  • Primer.style
  • Design
  • CSS
  • Components
• Template for marketing social media images

Identity

• Global Favicon (currently package icon on or GitHub mark, or none at all)
• Repo avatar (should be consistent with Twitter Avatar etc.
• Bot avatar (can have a simple differentiator like a different color)

Related Issues and Discussions

• Primer.style visual identity notes
• PR: README updates #350
• Primer Illustrations: Style Refinement Notes
• README Image Concepts

[ashygee]

Template for social images started in Figma.

Because Figma has pre-set frame sizes for various social media platforms I think we can just add to this file. I'll set up some more social images that we can drop into our posts in the future.

[ashygee]

Homepage Illustration Update

Original

Option 1

Option 2

Option 3

Octiocons Illustration Update

Original

Update

CC @broccolini @emilybrick

[ashygee]

Favicon updates are tied to #114.

[broccolini]

Thanks for working on this @ashygee! I think I need to see the header illustration in context with the rest of the page, it's hard for me to tell what works best when it's cropped tightly since that's not how we see it in the browser—if you have this setup with the full page in Figma can you share the link, or we can jump on a call and look through it.

Octicons is almost there but I think has a few too many details that are distracting against the surrounding content, though it looks slightly closer to the content below. I think it's also due to the higher contrast of some of the elements. Perhaps we can look at this in the browser or Figma together too?

[ashygee]

Thanks for the feedback @broccolini!

I don't have a mock with the rest of the page yet but that's something I can set up for further discussion. I'll share the link here once I have it up.

For the Octicons illustration I will remove some of the outside details and see how that feels.

[ashygee]

@broccolini I've set up a Figma file with some site mocks to view the illustrations within the full page. I also went ahead and removed some of the outer decorative elements on the Octicons illustration. Looking forward to discussing with you! 😄

[ashygee]

@broccolini Avatar ideas up on Figma. There are two versions of the paintbrush taken from the previous favicon exploration in #114.

[broccolini]

I'm inclined to go with the first one (dark background, more detail) and see how it works in practice. I'm fully okay with being wrong and it not working, but I think best way to test this type of change is to ship it :)

[ashygee]

@broccolini Great! I'll export and we can replace and test