Skip to content
Case Study

Cap Matches Color - Capturing Vintage Spray Can Aesthetic

Design considerations in creating a website about spray paint history.
Comments
TLDR; At its essence, the site is about color – so I made it available in four different vintage-color pallets: Tangerine orange, lemon yellow, purple grape, and avocado green.

This was a fun design project – designing a website about collectible spray paint cans for Cap Matches Color (CMC). CMC is a group of collectors dedicated to the discovery and documentation of spray can history. It participates in artifact archival, educational exhibitions, and cultural events, and has an upcoming book on the history of aerosol.

a shelving unit with hundreds of cans of spraypaint
You don't think about the history of aerosol until you're face-to-face with hundreds of cans of it.

Understanding the business and its needs

The bulk of CMC’s public-facing activity takes place on Instagram where they’ve built a very strong community engagement. They share spray cans and spray can memorabilia along with merchandise available for sale with their followers. While their following mostly consists of graffiti artists, who have always fetishized spray cans in their art, it also extends to collectors and restoration enthusiasts from other fields who seek out authentic era paint colors. Where Instagram serves CMC well is through its broad audience reach and community engagement. Where Instagram falls short of their needs is in providing a static location for evergreen topics.

Scoping site requirements

With the business' market and needs in mind, we designed the site to feature three content types:

  1. An already existing collection of interviews with graffiti artists from past and present. Early influencers and their modern successors reminisce on how cans and colors have played influential roles in their lives.
  2. Event pages – CMC needs a static location for overview pages of events to link to from social media.
  3. Photo galleries of collections, rare-finds, vintage in-store displays, and color charts.

Drawing design inspiration

Up until this point, the CMC branding leaned towards the angry teenage male graffiti aesthetic. This contrasts with the bulk of the imagery they put into the public sphere which is of vintage advertising from the fifties. To harmonize the brand identity, I brought the two together in a mashup of tags, drips, retro color pallets, and line work illustration.

The result is a kind of non-specific-era retro. – an unplaceable vintage, with aesthetic inspirations from the ’90s, when graffiti was at it’s prime, the late ’70s and early '80s when graffiti was born, and the early '60s when spray cans became household items.

four versions of the cap matches color site
The Cap Matches Color site comes in four vintage color variations which users can be toggle between

Adding interactivity

The Cap Matches Color site features waypoint triggers on the long-scroll-homepage to animate key points into attention as the user scrolls. The fixed top header transforms itself as it re-enters the page on scroll down as well. The Gallery pages use isotope to provide animated filter results. And as a unique touch, how could a page about spray colors not have a color selector? Capmatchescolor.com comes in four flavors: Tangerine orange, lemon yellow, purple grape, and avocado green.

A toggle on the homepage flips the site's theme from one color palette to another. Color themes flip text, backgrounds, sidebars, and featured images. With the site’s CSS being built with sass, it was simple to set up a file that provides different values to four sets of color variables. Each set is output as a different CSS file and the toggle changes the header reference. There’s a little more to it, but not much. It provides a touch of uniqueness in a world of template websites.

complete cap matches color website
The full tangerine orange version of the website.