Skip to main content

Brand Resources

As a part of our brand overhaul for the Rocky Mountain ADA Center, we created a brand-guidelines site to host all of their assets, logo and print files, as well as helpful writing guidelines.

Visit the brand guidelines site

The Rocky Mountain ADA Center had quite a big brand overhaul. After a brand-building workshop with their leadership team, we came up with a refreshed identity and rules for using the logos, colors, and more.

Out of this workshop and brand overhaul, we created an easily accessible brand guidelines site for them. This site covers the fundamental principles of their brand redesign, assets, guidelines, and other helpful links and resources.

What is included in the branding documentation site?

  • A description of the the brand and its focus on accessibility.
  • Proper use of logo files.
  • All colors and their color values (including modern color spaces like OKLCH, print, and css variables)
  • All downloadable files for their print materials.
    • They can supply their print vendors with these links or a link to this site for any orders.
    • Each link dynamically updates with the most up-to-date versions of the print materials.
  • Other downloads such as Zoom backgrounds, digital ads, and a link to all of their stock photos.
  • An extensive writing guidelines documentation, based off of Mailchimp's Voice and Tone

How was this guide created?

This guide was built using Vitepress, a Vite & Vue powered static site generator. It's open source, well documented, and can be built and deployed very quickly.

What's different about this installation?

Vitepress is built mainly for technical documentation. Think APIs and component libraries. We created a few components to help adapt this to become a style-guide.

You can view the source code and the two custom components on Github.

Vitepress Color Component

This color component takes a few variables and turns them into a great color card, converting one color into 5 different color variables using culori. The inputs are:

  • Color Name
  • CSS Variable name
  • Color (typically HEX, but can use any color space)
  • Text Color (for accessibility)

This outputs beautiful, responsive color cards for Vitepress:

Vitepress Color Card component

Vitepress File Download Component

This component takes a few inputs to create a great looking component to download a file. This looks way nicer than just having a wall of plain hyperlinks on a page. The inputs for this are:

  • Title
  • Subtitle
  • File Type (like .zip, .pdf, Dropbox link, etc.)
  • File URL

We use a URL to a Dropbox folder in this case. This allows us to keep the links as-is and let Dropbox handle the version control of each file.

Vitepress download component

Do you need a brand site?

We can help you build out a modern, accessible brand guidelines and brand documentation site for your entire organization to access.

Get in touch