Primer.style Visual Identity Notes

[emilybrick]

Primer.style visual identity notes:

Background

• Borrowed visual aspects from Site Team's illustration style as well as a few elements from Atom
• Converted to a "dark theme" for Primer & incorporated Primer blue as the main color
• Evolved it a bit for Primer to feel more connected to code/systems concept

Notes

• Paintbrush is meant to connect to the name, and while it could be refined a bit, it's a recognizable element that stands out as part of the identity right now
• Meant to feel like "Design + Code". Paintbrush, squiggly lines, and hand-drawn elements for the "Design" side, and code block rectangles, shapes, and dots for the "Code" and components side.
• Should feel like it's a hackable/live code feel (e.g. you can move the paintbrush and octicons on the live site)
• Use layering and animation to make the design feel cohesive
• Deliberately don't people in the library for the core Primer brand
• Shouldn't be using flat white anywhere, use Primer colors, dark theme ATM

Assets Needed (wip list)

• Spectrum Chat background
• Readme Images
• Images for social (including OG images)
• 'Banner' Images for the docs

Keep in Mind

Refinement over reinventing the wheel, let's refine what we've got rather than a total rebrand (because we just did that 😄)

Relevant Links

Primer.style exploration in Figma

Marketing illustrations issue:
https://github.com/github/site-design/issues/567

Marketing type revamp (idk, get more clarity on this?)
https://github.com/relaunch-styles?_features=site_relaunch

Examples of the new illustration style in action:
GitHub Actions Marketing Page
WIP Blog Styling

New marketing illustration styles in Figma

Slides for Figma Meetup (rough)

Take Stock

Illustrations to audit:

• primer.style
• components image
• what's new page
• team page

For feedback:

• Sophie
• Ruby Jazz (who worked on the initial Site Marketing illustrations!)
• Simon (Atom designer)

@ashygee to take the reigns on this, @emilybrick and @jhuashao here to support!

[jhuashao]

💪

[ashygee]

Thanks @emilybrick for these great notes! I included some links above for reference on individual asset details.

[broccolini]

As promised, here's some links to pr's showing the design as it evolved:

• first pr, with some great feedback from Simon WIP revamp primer.github.io primer.github.io#22
• second pr with updated octicons illo and more generalized to promote all primer projects [WIP] Rebuild site with React ⚛️ primer.github.io#25
• third pr when we moved to the primer.style repo (the version that shipped) New primer.style design #2

[yaili]

@emilybrick @ashygee can we close?