In the following you can find a proposal which we are planning to send to OTF for approval with a timeline of delivering the style guide by September: https://cloud.ura.design/s/eW5YL9yZXBmwCr3
CSS files to make the import of the style guide in any given project straightforward
It would be useful to clearly document the current conventions used to organized CSS files (the name of which escapes me right now … and I can’t find it because we don’t have a style guide :-P).
Git Repo with instructions and the source code of the style guide
What is RST? In general a style guide should use structures and tools which compliment its purpose. As Documentation in general and a style guide have different purposes (although overlapping) it would compromise one or the other. Hence I’d suggest not mixing those two. The style guide is generally a separate living thing which of course can be linked in the documentation.
That would be best indeed.
Kind of related to my response in regards to the docs infrastructure suggestion.
I would suggest the style guide is hosted in a repository at https://lab.securedrop.club/. We can then run Jekyll and publish on the website virtual machine which already hosts another static website. The benefit of doing that would be that it is entirely self hosted and community maintained.
Totally agree. We generally prefer working with GitHub pages and once the work is done migrate it to whatever infrastructure you prefer.
It’s more of a bonus thing at this point, but even now it has the advantage that it allows to download assets in any format and resolution without touching a design tool. Also it allows to direct link SVG’s and update them later on which updates all place it has been used in as well. In the future Identihub will be synced with git both ways which makes it easier for designers and developers to collaborate. It’s still an Alpha version (and developed by us internally). AGPL of course.
Just checked out the proposal (cc @eloquence), very much looking forward to a style guide for SecureDrop! In terms of deliverables, GitHub pages sounds good to me.
As Documentation in general and a style guide have different purposes (although overlapping) it would compromise one or the other. Hence I’d suggest not mixing those two. The style guide is generally a separate living thing which of course can be linked in the documentation.
It would be useful to clearly document the current conventions used to organized CSS files (the name of which escapes me right now … and I can’t find it because we don’t have a style guide :-P).
I do also want to point everyone towards the modified design and modified color palette on the new SecureDrop website (https://securedrop.org) - this is design work that @harris and some of his former colleagues worked on, and imho it is a much more modern look for the SecureDrop project. Anyway, I’m sure we’ll discuss this much more in the coming weeks in the UX meetings once the proposal is 'd by OTF
This looks great, thanks for taking this initiative, @elioqoshi! I am glad you are emphasizing the need to coordinate via our weekly UX meetings. Provided this gets funded, we will need to chat about language to include regarding trademark usage, regardless of where these guidelines are hosted, especially for pages that enumerate assets such as the SecureDrop logo. But we can figure that out through the UX meetings and the forum.
Definitely Visual and Content. I’d like to establish a Tone of Voice and some Copywriting rules. The one by Mailchimp is quite impressive: https://styleguide.mailchimp.com/
Here is a quick draft of the current state of the SecureDrop Logos, Colors and Font based on the new website. As the changes are not documented yet, I tracked them down myselves and introduced them here. Feedback is welcome:
@elioqoshi and @anxhelo, thanks for the update! It would definitely be great to have you both at the next UX meeting to discuss this in detail. Some initial observations:
Bug: The sidebar navigation in https://uracreative.github.io/securedrop-styleguide/ has a small but annoying bug that has confused me several times when browsing this document: If you click on the label (e.g., “Components”), the page changes, but if you only click on the space next to the label, the highlight changes but the content does not.
Voice and Tone: Great to have some SecureDrop-specific content here! I don’t substantively disagree with anything stated here, although I think it would be useful to have some examples. The text itself could use some copyediting (there’s no such thing as a “high threat model”) – happy to help if you point me to repo for PRs, or a GDoc/Etherpad or whatever.
Overall content: This still appears to be very much driven by the design of the SecureDrop website, and doesn’t directly relate to the components of the actual SecureDrop web UI. I would love to see you take a stab at applying this style guide to components of the web UI, such as the table of submissions/replies in the journalist interface, the “select files” component in the source interface, or other non-standard elements like the “Remember, your codename is” progressive disclosure. The overall content should also be organized a bit more neutrally – right now all the examples relate to SecureDrop website content.
Great to see this coming along. Happy to talk through this in more detail at the UX meeting and also looking forward to getting @ninavizz, who has just started with FPF as a UX contractor, involved in these discussions.
