Convert deck design to Keynote

[ashygee]

The first draft of the presentation for Primer is currently in Figma here: https://www.figma.com/file/0mXCPvPvDgbtiMEIa5Z8DSh9/Primer-Deck-v1?node-id=0%3A1

The next step is to extend it to Keynote

[ashygee]

The Keynote template is currently located here

[ashygee]

Projector test notes

Body Copy

• 42pt is legible but do not go lower
• 48pt is the sweet spot
• Subtitles should be no larger than 56pt
• Slight difference between white and gray-300 on dark bg
• Yellow and blue labels both visible and legible

Highlighting

• On projector, all highlights washed out.
• green-100 not visible
• red-100 appears white
• yellow-200 visible after color correcting but still slightly desaturated

Split slides

• Body copy on split slides best at 48pt.
• Can decrease margins a bit for more legibility
• Light version split slides need more contrast. (currently gray-100. use gray-300)

Projector color contrast comparison tables

✅ - Good
❌ - Bad
🔷 - Good contrast but same value similar(1)
🔶 - Good contrast but same value (2)

On white

	100	200	300	400	500	600	700	800	900
gray	❌	❌	✅	✅	✅	✅	✅	✅	✅
blue	❌	❌	❌	✅	🔷	🔷	✅	✅	❌
green	❌	✅	✅	❌	❌	🔷	🔷	🔷	✅
purple	✅	✅	✅	✅	🔷	🔷	🔶	🔶	✅
yellow	❌	❌	🔷	🔷	🔶	🔶	✅	✅	✅
red	❌	❌	❌	🔷	🔷	🔶	🔶	🔶	✅

On black

	100	200	300	400	500	600	700	800	900
gray	✅	✅	✅	✅	✅	✅	✅	❌	❌
blue	✅	✅	✅	✅	🔷	🔷	✅	✅	❌
green	🔷	🔷	✅	🔷	🔷	🔶	🔶	🔶	✅
purple	❌	🔷	🔷	✅	🔶	🔶	❌	❌	❌
yellow	❌	✅	✅	🔷	🔷	✅	✅	✅	✅
red	❌	✅	✅	🔷	🔷	🔶	🔶	🔶	🔶

[ashygee]

To do

• Map this to the color accessibility guidelines on the web in Primer
• Add new reaction emojis 🚀👀