facebook noscript

VGS Has a New Look

May 19, 2021
engineering-default

We've updated the look and feel of the Vault Dashboard and Documentation, including a new dark mode for Docs.

We have just released a new look for the VGS Vault Dashboard and Documentation. If you log in to the Dashboard, or visit the Documentation, you will see several changes to the overall look and feel, though the structure has remained the same.

Better accessibility and readability

Accessibility and readability were key reasons for this change. Some elements in our previous color palette had a low contrast ratio, which sometimes led to links and buttons which were difficult to read. Web Content Accessibility Guidelines (WCAG) define a minimum contrast ratio of 4.5:1 for normal-sized text, and our new color palette was designed to meet this requirement with both light and dark backgrounds. Inter was generally regarded as a more easily readable body font, and by maintaining Averta for headings, we now have more contrast between our headings and copy.

Below you can see some of the changes to our components in the Vault dashboard. Buttons, tables, links, and toggles have all been updated to be easier to read and to understand.

Old and new components compared

A new color palette

The new VGS color palette offers a wider range of both primary colors and shades than our previous colors. This gives us a greater ability to reflect various statuses in our UIs, such as success, warnings, errors, and general information. For example, destructive actions will now use a button with red outlines to more clearly indicate the risk in taking the action. In addition, for our users who experience color blindness, we are working to ensure that color will never be the only indication of status in our UIs.

New color palette

Dark mode for Docs

Finally, we have released a new dark mode for our documentation. Your experience will default to your operating system dark mode preference, but you can change the view by toggling the dark mode switch to the right of the VGS logo. This experience utilizes our new color palette, featuring a dark blue background with shades of grey and light blue text and links.

Docs dark mode screenshot

Look for additional design updates to VGS properties in the coming months. We are also working to finalize a new style guide. If you have any questions or comments, please send us feedback at productfeedback@verygoodsecurity.com.

 Josh Morse Josh Morse

Josh leads product design at VGS. He joined during the summer of 2020 and has focused on improving the user experience for VGS Vault users. In addition to design, he dabbles in web analytics and front-end development.

Share

You Might also be interested in...

gdpr

What You Don’t Know About GDPR Can Hurt You

Channin Gladden May 20, 2021

privacy

Data Security & Privacy: a Competitive Differentiator

Kenneth Geers, PhD May 13, 2021

pci-data-security

PCI Data Security at the Intersection of Healthcare, Payments, and Fintech

Stefan Slattery April 29, 2021