Design Guidelines

Color palette

Primer Presentations uses the same color system created for our product. MacOS has it's own system-wide color picker for managing color palettes, meaning you can easily import our entire color system to customize your slides.

StepExample
1. Download the Keynote template.
2. Open Keynote and the color picker with View > Show Colors (or Cmd+Shift+C). Click the gear icon and Open... to load the palette.screen shot 2017-05-17 at 3 50 31 pm
3. Navigate to the downloaded folder and select the colors/github.clr file in this repository.GitHub color palettes are included in your Keynote download.
4. Colors are installed! You are now free to use the Primer color palette within Keynote.screen shot 2017-05-17 at 3 51 16 pm

Text styling

The presentation system uses system fonts. The default font is Helvetica Neue. The default monospace font is Menlo in Keynote and Roboto Mono in Google Slides.

Font Sizing

TypeKeynoteGoogle Slides
H110040
H27230
H36424
H45618
Body4816

Monospace Fonts

Monospace fonts are used for quote attributions, code, and labels/eyebrow text.

Highlighting

Highlighting is great for indicating important points that you'd like your audience to remember from a statement or quote. In our system, highlights are represented by altering the color of the text.

Usage guidelines:

  • Avoid multiple highlights. Highlights should be used sparingly to only highlight key words or phrases on the slide. Too many highlights will confuse your audience in regards to what the most important take away should be.
  • Emphasis over decoration Remember that when you're highlighting text you're telling the audience, "This is important". Be sure to ask yourself "Is the highlight necessary to add emphasis to my talking point?" before highlighting.
Do
Highlight important points that your audience should pay attention to
Don't
Use too many highlights

All highlight colors come from the Primer color system. We've supplied a list of recommended highlight colors below.

BackgroundHighlightHex value
Blackyellow-400#ffdf5d
Blackblue-400#2188ff
Blackred-400#ea4a5a
Whiteblue-600#005cc5
Whitered-500#d73a49

Images

When using a screenshot, it’s best to match the background. We suggest to take a screenshot on a similar color background or use a PNG with a transparent background as this will look the most seamless.

Usage guidelines:

Do
image-white
Use images with a similar or transparent background
Don't
image-black
Use images with opposite backgrounds to the slide background

📍Tip: Seamless image backgrounds

If you find yourself needing to use a specific image but the slide background doesn't match, you can change the background color to match the image's background color.

bg-change

Adding images

Images can be easily added to any presentation by simply drag and dropping, copy and pasting, or inserting from the toolbar in Keynote, Google Slides, and Figma.

Adding images in Keynote

SourceDescriptionExample
BrowserDrag and drop any image from the web browser into Keynotekeynote-browser
Local machineDrag and drop any image from the Finder into Keynotekeynote-local

Replacing images in Keynote

StepExample
Select the image and click the Image tabkeynote-replace-1
Click the ReplaceScreenshot 2019-04-02 13 00 23
Select the new image and click Openkeynote-replace-2

Adding images in Google Slides

SourceDescriptionExample
BrowserDrag and drop any image from any tab in your web browser into the tab with Google Slidesgoogle-add-image-1
Local MachineIn the toolbar select Insert > Image > Upload from computergoogle-add-image-2
By URLIn the toolbar select Insert > Image > By URL and paste the image's URLgoogle-add-image-3

Replacing images in Google Slides

StepExample
With the image selected, click the Replace Image in the toolbarScreenshot 2019-04-02 13 35 49
Select which method to replace your imagegoogle-slide-replace

GitHub Icons and Illustrations

You are allowed to use certain illustrations provided by our awesome creative team in your presentation. Please only use approved art provided within the Asset Library. If you cannot find what you are looking for or would like to request something specific, please create an issue within the presentations repo.

A few guidelines

Don'tAlter the illustrations
Don'tCombine images that use different stylings

Icons

Icons are used to show a visual association with different objects (e.g., The core four include: Developers, Teams, Enterprise, and Maintainers). There are two sets of icons specific to GitHub: the GitHub marketing icons and the Octicons.

Screenshot 2019-03-29 17 32 58

Replace icons (Keynote)

keynote-icon-replace

StepExample
1. Open GitHub-keynote-icons.keyScreenshot 2019-03-18 13 35 39
2. Select icon and copychoose-icon
3. In your presentation, select your icon layout template (1-4 icons available)Select Layout
4. Select the icon you would like to replacereplace-icon-1
5. Pastereplace-icon-2

Replace icons (Google Slides)

Step 1: Choose your icon

Step 2: Add to slide

  • On slide, click placeholder icon
  • Click Replace Image > By URL
  • Paste URL copied from ghicons.github.com

Illustrations

There is a wide variety of illustrations that are available to use for your presentation. The Octodex is full of pre-approved Octocat illustrations. If you'd like to customize your own Octocat, use the Octocat Generator.

If you are looking for a specific illustration please contact @ashygee.

Backgrounds

Background colors should be limited to the colors provided in the template.

Screenshot 2019-04-02 13 55 51

Usage guidelines:

Don't
bg-dont-gradient
Use gradients or colors outside the provided template
Don't
bg-dont-tile
Use tiled images
|

Background Images

Section Title - Hubot

Background images should be used only to support, not to distract the viewers. Lower the opacity of a background image to maintain readability.

Usage guidelines:

Do
bg-do
Background images should be dimmed to 25% opacity
Don't
bg-dont
Use busy background images when paired with text