Standards & Guidelines
Touchpoints exist in more specificity in SecureDrop's Figma. This page is more of a source-of-truth guide with rationale/reasoning shared for systemic design decisions, as well as a quick-reference cheatsheet.
Documented below are most colors both in current use, and depreciated; both in the Workstation client, and the Web UIs.
It is important to adjust color values in production, when the positioning of objects together creates a helation effect, or an adjacent color value changes the perceived color value of a standardized hex value. It is important for designers to recognize these situations, and to modify colors accordingly—and communicate those deviations from standardized colors, to developers.
Related reading: The racialized language behind Josef Albers' color theory pedagogy.
Crisply rendered solid pictographic icons that prioritize simple clarity over style, angled corners & line terminals over rounded ones, are solid art (vs line art) that carefully balance proportions of negative/positive space to facilitate legibility at small sizes, and that communicate clear semiotics that cross cultural ideals as widely as possible, have been the goal for choosing or creating new icons and glyphs for SecureDrop, since ~2018ish.
The "solid/sharp" icons in G00gle's Material icon family have been adopted throughout the Web and SDW UIs, and have been nina's go-to resource for glyphs, for both SecureDrop and Qubes. Sometimes custom icons do need to get made (example: the floating head atop squared shoulders, is awful for a generic "user" icon—and my weebles are far cuter), and when those are, targeting the Material icon style from artwork sourced at The Noun Project (all open source) or Font Awesome (some open source), has been embraced.
Historically Font Awesome had been used...
in part because of their mass adoption by the development community, and in part because they're a font family and therefore more efficient to use than PNGs. When Tor began whitelisting fonts for added security to the Tor Browser, that rendered all the FA glyphs in the Web UIs as Tofu—and PNGs have since been adopted... along with replacements to improve the quality of glyphs, as time has permitted.
I (nina) personally dislike Font Awesome for a few reasons: first, their stroke terminals are all rounded, which at small sizes contributes to icons rendering "globby." Second, their proportions I also find to be awkward, the smaller an icon is rendered. Third, their semiotics trend North American, to the exclusion of other cultures, on some things; not at all on purpose. It's just a project led by developers, not designers... which is no diss on developers! Just—well, designers don't design server architectures, for a reason. Same logic... :).
Stylistically G00gle's Material Icons family have also been the rendering target, when glyphs picked-up from either TheNounProject or Font Awesome have been adapted for use by SecureDrop. Material's icon family is been tested extensively—in large part because G00gle just has that money to spend—and in part because it's a project led by designers. [IBM's icon library](https://www.ibm.com/design/language/iconography/ui-icons/library) is highly stylized to their brand needs, but has also been led by a team of phenomenal designers—and tested extensively for semiotics with their targeted customers.
There are three different experiences for each of our three different user roles—internally referenced as the Source Interface (SI), the Journalist Interface (JI), and the Admin Interface (AI). The latter is mostly just one screen—as the Admin's dominant experience is with the command line (CLI) in Tails.
All SecureDrop Web UIs are optimised to work with the Tor Browser set to work in "Safest" mode. The SI is only available as an .onion, and journalists are strongly encouraged to use the JI in Tor Browser's Safest mode. What's the significance? Mostly that Javascript, SVGs, and non-whitelisted (so, most) fonts, are all blocked from use; which doesn't seem like a big deal, but in practice is quite a big deal for shaping an experience that is intuitive...
Continue Reading
...and usable to folks more cognitively "trained" by everyday consumer web experiences. These limitations are why users can only upload a single file, today; why there is no "processing" state or spinner when an upload is happening; why a clear error message cannot display when a user selects a file that's more than 500mb; and, why all error/success messages are hard-coded into pages.SecureDrop's earliest UIs were built and shaped by OSS developers whose expertise were security and Python. While the desire for usability was certainly strong, an awareness of consumer web experience norms and how conditioned most folks nowadays are to those things, wasn't really present. An initial, light redesign happened in 2016, and the branding was updated in 2019. That, combined with resource scarcity, kept the front-end development of the JI, AI, and SI, sparse over the years. The "Inverted Flow" redesign of the Source UI is the first major step towards bringing the SI more inline with UX best practices for consumer software experiences.
G00gle Fonts open licensed Arimo variable font family, is what we've chosen to standardize to in all Web UIs. Its variable weights are 400-700. It's body use is specified to be 400 weight and 13px font-size over 21px line-height, with 0.25px letter-spacing, 12px paragraph-spacing, and #3D3D3D color.
Why Ari-whaa??
Fonts in Tor Browser w/o Javascript are limited to the fonts whitelisted by TorProject, what Tor ships with, and whatever a user may have on their machine. Because SecureDrop is all anti-surveillance & stuff, unlike many products, we have zero idea which platforms (Mac, Win, Lin) most frequently use it. @ninavizz initiated a long investigation to better understand all of this, determined to crack the typography nut within Tor.
For a while we were using Noto Sans, of the understanding that Tor installed with it. Then @MichaelZ picked-up that investigation more recently (when implementing the flow-inversion design), emerging from it with Arimo as the clear choice—because Noto Sans is not downloaded for Latin characters... and the Noto for Latin characters, is +3mb big, anyway.
The "Flow Inversion" design direction being implemented in 2022 in the Source UI, draws from styles defined on this page, in Figma.
Of Note: All pages in Figma apart from the "Frankenstein E" page in the "Flow Inversion" Figma file (what's linked to, above), use the font Noto Sans. Likewise, most of the other SI Figma files use Arial. For the long and storied history of typography in the Web UIs (TL;DR, targeted multi-platform optimization despite Tor w/o JS challenges) using font families nobody's that excited about, see discussion in Issues SDUX81 and SD6211.
The design system looking forward (from early 2022), is being updated in two separate releases. First, from the "Frankenstein E" design direction. Second, from the full Inverted Flow design direction (as it is in Figma, now). The pieces and components as described in GitHub tickets and the Figma, are shown below. Interactive patterns have been discussed, and as much as possible are shown in Figma. The below is mostly to guide team conversation.
Targeted Users
—tbd—Design Brief
—summarize interaction model + rationale for design choices; tbd—Core Components
—tbd—Upload/Compose box
—tbd—Replies box
—tbd—Source Safety Guide
—tbd—Source User Guide
—tbd—Footer
—tbd—Licensing
—icons, fonts, attribution for ux contribs, tbd—The SASS controlling the JI/AI screens is shared with today's (as of this writing) SI. The "Inverted Flow" direction is being coded to give the SI its own styles. As such, the JI/AI will live on, appearing slightly different from the SI. The JI also does use Javascript, but is coded to gracefully degrade. Because the SD team is developing the Workstation experience as the next-generation of SecureDrop, the JI is likely to be phased-out... so does not receive much UX love. The AI is TBD, but also receives little love as its users are heavily trained and expected to be comfortable on the command-line.
Targeted Users
—tbd—Design Brief
—summarize interaction model + rationale for design choices; tbd—Core Components
—tbd—Safe Delete
—tbd—Admin page
—tbd—Footer
—tbd—In 2018 the Qubes Workstation began development. This page was created & gives a nice overview for folks new to SD-land, around the hows, whys, and early design/research explorations, choices, etc.
- QSS is QTs "almost kind of but not really" adoption of CSS. It is stated to be current to CSS2 for QT5.14, and does not support properties like line-height. Documentation is sparse and remains unclear around which selectors/classes are supported in which version of QT vs are not. Allie and Gonzalo have busted their humps, to get this stuff straight—much respect!
G00gle Fonts open licensed Montserrat font family and SourceSans Pro font family are what we've chosen to standardize around for the Qubes client UIs.
Montserrat is a used for most elements. It's a wider letterform that's both elegant and highly legible in all-caps labels, and in small groupings of words. Montserrat's tall x-height and round letterforms suit its legibility in single sentences and small groupings of words. However, those same attributes wan its legibility when used in paragraphs; especially multiple paragraphs. Its design was inspired by storefront signage in Buenos Aries, and as a typeface that is slightly more expressive and decorative than purely utilitarian, it is considered a display typeface.
Source Sans Pro is a narrower letterform, optimised for use on screens and in UIs. It's clear legibility in long sentences and paragraphs is unusually pleasing for a sans-serif font. Source Sans Pro was designed for Adobe as its first open-source typeface.
Source San Pro being a distinctly narrower font than Montserrat, the two compliment each other nicely to deliver a UI with strong legibility among all components, and clear hierarchies between components. Areas with denser text, or where stuffing the most characters into a width-confined space without compromise to legibility is important, get Source Sans Pro. All other areas, get Montserrat.
All primary UI components & styling have been documented in our SDW Design System on Figma. For all states, hex specs, pixel-perfect specs, artwork, interactivity—on buttons, menus, dialogs, and more—go there!
