<div dir="ltr">Hi, folks!<div><br></div><div>Here are my notes from the Seattle meeting. They include a summary of findings and recommendations for the styleguide in the immediate term, and a long list of other things that members of the community requested might be included at another point in the future. </div><div><br></div><div>Also: I want to note that I haven't forgotten about Phillip's excellent email before the Seattle meeting about a bigger effort on Tor's brand identity. I think this is a worthy effort and something I would like to see move forward (although I don't have the cycles/funding to tackle it right now!). </div><div><br></div><div>I'm sorry to miss the meeting tomorrow, but Ame will be there!</div><div><br></div><div>My best,</div><div>Scout</div><div><br></div><div>PS: these notes should make their way onto the meeting wiki, too. Can someone remind me where that is, or put them up there directly? </div><div><br></div><div><br></div><div><div>---------------</div></div><div>0. EXCEPTIONS AND AMENDMENTS</div><div><br></div><div>The styleguide could be a little more explicit in its instructions on what to do if 1) the style question at hand isn't covered, or 2) the solutions offered in the styleguide don't work for the reader's current situation. It also doesn't mention a process for expanding the guide to include more material over time. </div><div><br></div><div>RECOMMENDATION 1: Rephrase the wording on page two to make this more explicit, and (for now) encourage people to reach out to the UX team for guidance. (==> Scout volunteers to provide this wording.)</div><div><br></div><div>RECOMMENDATION 2: We need to have a discussion as a community about our process for amending the style guide in the future. Simply Secure's formal involvement in creating this initial version is drawing to a close, and we want to make sure there is good ownership and process in place!</div><div><br></div><div>---------------</div><div>1. FONTS</div><div><br></div><div>Folks requested a serif font for print materials and a monospace font for code or command-line text (e.g. in documentation). The Berlin meeting also revealed the need for standard international font(s) for text systems that Open Sans doesn't cover. Elio said that he had some in mind that he thought would work well – IIRC, Noto for Serif and International versions, and Source Code Pro for monospace. </div><div><br></div><div>RECOMMENDATION: verify with the group that these serif, international, and monospace fonts will work (or identify alternatives) and add them to the styleguide with guidance on when/how to use them. </div><div><br></div><div>---------------<br></div><div>2. DARK BACKGROUND</div><div><br></div><div>In cases where the logo is to appear on a dark background, what color should it be? </div><div><br></div><div>RECOMMENDATION: provide visual and textual guidance on what the logo should look like on a dark background. The simplest option would be to recommend always using monochrome white on a dark background.</div><div><br></div><div>---------------<br></div><div>3. TRADEMARK </div><div><br></div><div>In the past, using the Tor logo required the (R) symbol. Is that still the case? </div><div><br></div><div>RECOMMENDATION: consult with Tor admin staff and add to logo portion of the styleguide if the answer is "yes". </div><div><br></div><div>---------------<br></div><div>4. SUBBRANDS & ICONS</div><div><br></div><div>As revealed in Berlin, the subbrands and icons section of the guide is problematic because there is a legitimate need for different projects to have visually distinct icons, and therefore to an extent distinct brands. In the longer term (and from a visual design perspective only) I think we should think of Tor as sort of like Google, where there are many different applications – each with their own icon. The goal of the styling is to make them visually coherent and harmonious rather than conformant to a narrow standard. (Google achieves this using a well-defined color palette and Material Design forms and shadows.) There was broad agreement that we need a larger effort to map out and harmonize logos/icons across the projects and come up with a harmonizing design language for them. </div><div><br></div><div>RECOMMENDATION 1: Tone down the wording in the subbrands section of the guide. Observe that if a project wants to use the full T(onion)r logo in their logo, they should create a logo that adheres to the subbrand standard by default – but that they do not have to change an existing logo to do so, especially if their logo harmonizes with an existing application icon.</div><div><br></div><div>RECOMMENDATION 2: Create horizontal versions of subbrand logos. </div><div>RECOMMENDATION 3: Consider all-caps subtitles in subbrand logos and switch to mixed-case. </div><div>RECOMMENDATION 4: Include fewer subbrand logos overall in the guide. </div><div><br></div><div>RECOMMENDATION 5: In the logo and icons section, encourage teams to reach out to the UX team for guidance in creating or altering their logo and/or icon. </div><div><br></div><div><br></div><div>---------------<br></div><div>5. ANDROID ICON</div><div><br></div><div>It's not clear what app this is for, and many community members didn't find it visually appealing. </div><div><br></div><div>RECOMMENDATION: Remove the Android icon from the style guide at this time. </div><div><br></div><div><br></div><div><br></div><div>============</div><div>OTHER NOTES FROM COMMUNITY MEMBERS</div><div>For action in the longer term</div><div><br></div><div>+ Meta: many of these comments are about online/digital styling, but others are about print as well. Bear both in mind while reading!</div><div><br></div><div>+ As we think about icons, perhaps we could take inspiration from the GitHub Octopus? It's the same standard character who appears in different dress/aspects for different contexts. Is there a version of the onion that this could work for?</div><div><br></div><div>+ The roots logo – folks like it and don't want to abandon it out of hand. Where should it be used? </div><div><br></div><div>+ Titles and subtitles – for desktop and mobile websites, would it be possible to have sizing and spacing for ~4 layers of titles/subtitles/headers? (With the understanding that the sizing and spacing for print materials would likely be different.) </div><div><br></div><div>+ Would it be possible to have examples of the styleguide in action – a simple mocked-up slide deck, blog post, documentation page, etc.? </div><div><br></div><div>+ Accessibility standards – what are Tor's goals? Note some countries (e.g. Canada) have regulations that get triggered when you have a certain number of users in that country. </div><div><br></div><div>+ RTL versions!</div><div><br></div><div>+ For international UX, need more time/energy put into standard phrases (e.g. "pont" doesn't work for "bridge" in French).  </div><div><br></div><div>+ Would it be possible to have secondary and neutral colors in addition to the purple and green? E.g., alternatives to pure black text, off-white backgrounds, etc. </div><div><br></div><div>+ Bullets for bullet lists: what shape/size and color? </div><div><br></div><div>+ Indents, especially WRT bullet lists. </div><div><br></div><div>+ Social-media icons. </div><div><br></div><div>+ Materials to download and make your own t-shirts and stickers.</div><div><br></div><div>+ Interface components (e.g. toggles and radio buttons) – with the understanding that that's a big bite of work to tear off!</div><div><br></div><div>+ Styling guidance on source code or command-line text. In addition to a monospace font, should it get a specially-colored background? </div><div><br></div><div>+ Idea: go through apps and identify style elements or patterns that can be re-used. </div><div><br></div><div>+ Styling for footnotes and footers. (Or endnotes.) </div><div><br></div><div>+ HYPERLINKS. What color? (For all states: neutral, active, visited.) Underlined? </div><div><br></div><div>+ Tor on/off, in use / not in-use – folks were interested in learning more about the green/red onion work that Elio did. </div><div><br></div><div>+ Pull quotes</div><div><br></div><div>+ A CSS bootstrap with all these things would be very helpful!</div><div><br></div><div>+ Columnized text recommendation</div><div><br></div><div><br></div></div>