Skip to content

Convert Brand Guidelines from PDF to Markdown

Warren Gifford requested to merge brand-guidelines into main

Created by: felixfbecker

The current brand guidelines are only available as a ~100-page PDF, which unfortunately means it's largely inaccessible, hard to search, and hard to link to. This PR brings the brand guidelines into the handbook as individual pages, which solves those problems and hopefully will make it easier for everyone to use the guidelines and incorporate them into our work ✌🏻

I converted the pages I've found myself referring to the most like Color, Logo and Typography as well as the introductory pages. The rest of the pages I linked to directly so that the PDF doesn't have to be downloaded but can be viewed in the browser, jumping to the right page. This way the handbook is the first destination and source of truth, and the PDF is the fallback.

To do this, I used some HTML and CSS formatting to make it look equally pretty as the PDF, and embedded graphics from the InDesign source file as SVG by first copy-pasting them into Illustrator and then fixing up any text that was converted to paths to be accessible (a very manual process). Some graphics, like the big circle venn diagram, I marked up manually too so the circles are clickable and lead to the sections.

image

To show off how much more powerful a web-based guidelines is compared to a PDF, I added a little interactivity too, e.g. on the color guidelines clicking a color will bring up the system's native color wheel UI with the color selected, where the color can be converted to every color format imaginable.

https://user-images.githubusercontent.com/10532611/134982523-6542798e-acb1-4a9e-9ec6-ace52fa1817c.mov

All of the pages are also responsive of course, which was also not possible with the PDF.

Merge request reports

Loading