Create Styleguide for +2.x.x SecureDrop Web UIs

[ninavizz]

Problem

For SecureDrop contributors, a styleguide documenting correct use of interaction patterns, visual styles, and fronted implementation basics (eg: no Javascript or SVGs) would be awfully helpful.

Solution

With the 1.0 release of SecureDrop, all of the colors will be getting updated, and possibly the use of fonts, too. This will be the best opportunity to introduce the beginning of a living styleguide, to document visual assets and interaction patterns for consistent evolution, going forward.

This styleguide will be drafted & iterated upon in the SD-UX wiki, and will be ported over to the main SD wiki in parallel with release documentation being pushed live for 1.0, per discussion in 27 June UX meeting. /cc @redshiftzero @eloquence

Things to include:

• Updated logo image w/ basic use guidelines*
• Franchise Bold font w/ basic use guidelines*
• General typography guidance w/ core styles ID'd
• Components used throughout UI (including message styles) & what/why for each
• All new icons as PNGs
  • Include directives wrt how PNGs are used, why SVGs are not used, etc
• New base color palette identified, w/ key color hex values and rules presented

---

*Note: Brand Use Guidelines are different artifacts/documents, than styleguides. The prior are more of a legal/copyright thing, and govern how visual identities are used across all touchpoints: tee shirts, posters, and electronic products. Styleguides are exclusively for the latter, and are rarely touchpoints in copyright matters.

[ninavizz]

Ohai, started! https://github.com/freedomofpress/securedrop-ux/wiki/Styleguide:-SecureDrop-Web

[ninavizz]

Random desire to document things on a Sunday night. Won't let it happen again.

• New colors w/ hex values
• New icons delivered, w/ 100% sizes & filenames spec'd

Figured it'd be better to get these things down, somewhere outside of Slack 1:1s.
FYI, @eloquence

https://github.com/freedomofpress/securedrop-ux/wiki/Styleguide:-SecureDrop-Web

[ninavizz]

With C o r y having standardized the CSS for accessibility, this will now be easier to do.