DEPRECIATED — Styleguide: SecureDrop Web

This is the beginning of a basic, GH wiki based styleguide, to document allthings in the new 1.0 SD product web UIs. It is earmarked to move from this repo to the main SD repo, in tandem with release notes for the 1.0 release in September(ish) 2019.

Colors
Components (tbd)
- Buttons (Source and Newsroom)
  - To do for 1.0 release
- Language selector
  - At some point
- Messaging
  - To document editorial guidelines as time allows; not a priority
  - To document aspirational styling that descends from Workstation design, as time allows; not a priority
- Source UI particulars
  - "Submit" widget (not a priority, hoping to re-do, anyway)
  - "Get Codename" widget (not a priority, hoping to re-do and to move, anyway)
- Newsroom UI particulars
  - Heh... nothing I can think of worth documenting or aspirationally seeking to change in the web UI?
Icons + Artwork
- PNG Assets
- Scalable Vector Art
Typography
- In SD Identity (Franchise Bold)
- In Product
- On Website

Colors

It Is	Hex	Used Where?
	`#0065DB`	static hyperlinx
	`#045FB4`	most buttons
	`#2A319D`	button & hyperlinx hover, random things
	`#000C6C`	headers, Select buttons
	`#FF3366`	delete actions, update to OG "urgent red"

Icons + Artwork (web product, only)

SecureDrop's web experiences are uniquely security-sensitive webapps, published as Onion Services behind .onion URLs. The Source UI is especially security-sensitive. As such, all Javascript and SVGs are prohibited in the Source UI... so all icons are done as transparent PNGs. Within the newsroom UIs, conversely, all icons are done as font-awesome glyphs.

To allow for browser scaling w/o image degradation, all PNGs are recommended to be created at 4x their 100% sizing. To prevent "halos" when clean transparency is required around the artwork, PNGs should be generated from Adobe Illustrator or Photoshop, with no matte and in the PNG-24 format. For most PNGs however, Sketch's "Export Selected" functionality delivers great results. Remember, type-in the 4x in place of 1x, in the settings.

PNG artwork

Status	Name	100% Dimensions	Used where?
Published	`cancelbutt-x-buttonblu2.png`	9x11	"Cancel" buttons, static
Published	`cancelbutt-x-grimaceblu.png`	9x11	"Cancel" buttons, hover
Published	`sdfavicon32-1x.png`	27x32	Browser tab favicon
Published	`footericon-nunu.png`	17x20	Footer logo
Published	`logoimg-defaultSD_2019.png`	500x450	Default logo product ships with
Published	`UploadArrow_OneDotOh.png`	66x56	Upload icon on "Submit"
Published	`lock-deep-4x.png`	12x14	Codename widget lock
Published	`refresh-source-sdblu4x.png`	54x39	Codename widget, refresh button static
Published	`refresh-source-grimblu4x.png`	54x39	Codename widget, refresh button hover
Published	`languages-globe.png`	14x14	Languages widget, globe
Published	`languages-arrow.png`	7x3	Languages widget, arrow
TBD	`languages-arrow.png`	tbd	Codename widget, keyhole
TBD	`languages-arrow.png`	tbd	Inline bang, urgent coral