Briar Design System & Style Guide

[elioqoshi]

As part of the Open Tech Fund Usability Lab we will be creating a style guide for Briar, including Logo Assets, Colors and Components. The base for this will be our usual Jekyll style guides (like SecureDrop, I2P) with some improvements on styling and layout, taking inspiration from the EOS Design System: https://www.eosdesignsystem.com

This work includes a cleaned up logo lockup without changing the typeface and glyph shape.

[elioqoshi]

@AnXh3L0 let us know when the initial repo is up

[AnXh3L0]

The initial repo is up, it's located here https://github.com/uracreative/briar-styleguide. I will continue to modify the layouts, assets and more in the following days.

The current state of the style guide can be viewed from this link: https://uracreative.github.io/briar-styleguide

[elioqoshi]

Thanks @AnXh3L0 As discussed, the style guide needs to be done in Hugo, not Jekyll (like all of our other style guides) so let us know when the migration is done.

[AnXh3L0]

Yes, I have proceeded to migrate it to Hugo, shall be in the repo earlier today.

[elioqoshi]

@AnXh3L0 do you mean later today? As the latest commit is 6 days ago

[AnXh3L0]

Yes, my bad, later today.

[elioqoshi]

Yes, my bad, later today.

Let's not be too optimistic with estimates if it means that we miss them (like this one)

[elioqoshi]

@onweru is helping us with this conversion

[elioqoshi]

@onweru can you update us on the progress of this?

[AnXh3L0]

The Briar style guide system is being worked on and the current state of it is visible on this website: https://briar-styleguide.netlify.com/

At the moment, a draft version of the dark theme is working and some sections are still missing.

[AnXh3L0]

The style guide process is towards the end, dark theme has been fixed and branding page was added.

[elioqoshi]

After @akwizgran's final comments are implemented and a few other small tweaks, this is ready to go: https://briar-styleguide.netlify.com/

We should wrap it up and eventually plan a separate effort to do some copywriting work and UI copy guideline section as well.

[elioqoshi]

@AnXh3L0 there are also some small issues with the actual color label color contrast ratio. You can detect them yourself with the Accessibility dev tools as well:

[elioqoshi]

We might also want to add an illustration sub-section in the design section.

[AnXh3L0]

The comments from @akwizgran have been resolved and the changes have been pushed to the repo. The contrast has also been fixed and the illustration sub-section has been added to the design section.

[elioqoshi]

Illustrations also added in Figma: https://www.figma.com/file/G3OJOk3fs1VNUxYazj4Yb46A/Briar-Design-System?node-id=251%3A0

[AnXh3L0]

Illustrations are also pushed to the page.

[elioqoshi]

This is ready now. Latest feedback from the Briar team has been incorporated as well.

Preview here: https://briar-styleguide.netlify.com/ Repo here: https://briar-styleguide.netlify.com/

Migration to Briar's GitLab can start anytime soon.

[elioqoshi]

@AnXh3L0 I am awaiting Michael's response to migrate the style guide to Briar's GitLab and publish it. We can close this issue afterwards.

[akwizgran]

Sorry for the slow follow-up @elioqoshi @AnXh3L0. The style guide looks great. Thanks for all your work on this.

I'll migrate the repo to code.briarproject.org. Is https://github.com/uracreative/briar-styleguide the current repo URL?

[elioqoshi]

@akwizgran Thanks! Yeah that is the current one.

[akwizgran]

@elioqoshi cloned to https://code.briarproject.org/briar/briar-styleguide