VGS Engineering Blog

The latest updates from our developer community

VGS Has a New Look

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.

author profile
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.