Source UI design updates: color! #4500
Comments
This was referenced Jun 4, 2019
Closed
redshiftzero
added
the
help wanted
|
(I'm ticking the boxes above as I make these changes locally and after Nina has reviewed them visually purely for tracking purposes; this does not indicate final review or completion.) |
eloquence
added a commit
that referenced
this issue
Jul 19, 2019
eloquence
added a commit
that referenced
this issue
Jul 19, 2019
eloquence
removed
the
help wanted
|
(I've removed the active state for the "Submit" button even as a stretch goal as this will either require JS or some clever CSS magic, and should be handled outside the scope of this refresh.) |
eloquence
added a commit
that referenced
this issue
Jul 22, 2019
|
Per discussion today we agreed to add a new "Button Blue", https://securedrop.org/directory/al-jazeera/ This slightly darker blue works well across Source and Journalist UI for the primary buttons. Links will remain the brighter "SecureDrop Blue" color. |
eloquence
added a commit
that referenced
this issue
Jul 24, 2019
|
New colors/usage + PNG artifacts documented: freedomofpress/securedrop-ux#65 |
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons - Consistent use of upper case on large buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons - Consistent use of upper case on large buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons - Consistent use of upper case on large buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons - Consistent use of upper case on large buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons - Consistent use of upper case on large buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
eloquence
added a commit
that referenced
this issue
Aug 13, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons - Consistent use of upper case on large buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
lev-csouffrant
pushed a commit
to lev-csouffrant/securedrop
that referenced
this issue
Aug 25, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves freedomofpress#4500 Resolves freedomofpress#4501 Resolves freedomofpress#4502 Resolves freedomofpress#4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons - Consistent use of upper case on large buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
kushaldas
pushed a commit
that referenced
this issue
Sep 25, 2019
Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", a new "danger" color, and blue gradients on the index page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503 Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz) during pair development: Global: - Removal of some button icons that did not disambiguate meaning - Tweaks to default button letter spacing, font weight - Pick headline color that fits with new overall theme - Ensure consistent use of headline levels - Removed unused colors, styles, icons - More careful spacing between icons and text on buttons - Consistent use of upper case on large buttons Source Interface: - New trashcan icon for deleting replies - Flipped order of introductory text on submit page by importance Journalist Interface: - Restyled timestamps, "0 docs, 1 message" type counters to be less easily confused with buttons - Restyled "Select all" type buttons to not have checkbox icons on them, to ensure they're not confused with actual checkboxes - Added spacing between Select buttons and other actions, to make logical distinction more obvious - Removed download icon from each table row, as it did not convey sufficient meaning to justify keeping it - Removed "Reply" icon from Reply headline, and left-aligned it, for consistency with other headlines - Made textbox the same width as the table above it, and removed fixed column width, to ensure proper scaling across viewport sizes - Right-aligned "Submit" button consistent with other forms - Removed hover from "X" of modals, as it did not really add value here Admin Interface: - Made it more obvious when the Delete icon is disabled Out of scope for this rev: - String changes - Typography changes - Docs screenshot updates (will be done after final rev)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Design Epic
Design updates to the Source UI (w/in the existing experience) are being explored in UX-repo issue #42. Within these updates, a new color palette is being used. The goal of the color updates are make the product reflect the SecureDrop brand, as it's presented on the website. They also make the product snazzier.
This issue has been drafted to implement only the items that pertain to color, from the design epic in the aforementioned GH Issue.
As such, div background colors, border colors, font colors, and hr styles comprise the majority of the below to-do list. A few stretch-goal items here and there, but they are purely aspirational in nature and not required to close the issue.
In a few places there might be a placed PNG that keeps to the old color schema. Thus far, we have identified the bulleted items as closely related issues that should be addressed in follow-up PRs. If we’ve missed anything, please comment below, and we’ll update the below list accordingly! :)
This Issue
Update core styles in the Source UI to reflect the below spec’d values. If time permits, a few identified stretch-goals would be extra special.
Global
See Submit page mockup: static
Note: Pay no mind to font size, family, or text-decoration stylings in this mockup. Nina's Tor browser fonts load wackily. Likewise, the mockup does not show hyperlink underlines styled w/ CSS.
H1,H2, andH3to all be#2a319d#0075F7#0065db(previous color was seen as too bright), and#2a319don hover#e1e1e1(currently #c3c3c3)Index Page
See mockups: static · button hover
Note: Pay no mind to font size, family, or text-decoration stylings in this mockup. Nina's Tor browser fonts load wackily. Likewise, the mockup does not show hyperlink underlines styled w/ CSS.
hrs: change styling fromdashedtodotted“Submit for the first time” box
background-image: linear-gradient(140deg, #0096dc, #005db7);hr, text, button text color, andbutton border:whitebackground-image: linear-gradient(72deg, #2a319d, #2d3273);“Already submitted something?” box
border-width: 1.5px; border-image-source: linear-gradient(145deg, #0096dc, #005db7); border-image-slice: 1;hr:#0A7CDCbackground-image: linear-gradient(111deg, #0082d9, #126ec8);background-image: linear-gradient(72deg, #2a319d, #2d3273);Submit Page
See mockup: static
Note: Button icons to be done in a separate PR. Pay no mind to font size, family, or text-decoration stylings in this mockup. Nina's Tor browser fonts load wackily. Likewise, the mockup does not show hyperlink underlines styled w/ CSS.
Upload/Message Box
background-image: linear-gradient(115deg, #f8fbff, #eaf1f8);Buttons
The button icons are tracked in #4501
#0075F7#0065db(previous color was seen as too bright); on hover,#2a319d#0075F7#0065db(previous color was seen as too bright); on hover,#2a319dThe text was updated successfully, but these errors were encountered: