SnapBox Brand Guidelines

A major part of my role in SnapBox was to establish rules that could be followed when designing for the brand whether it be on the website, emails, or ads. I created a set of brand guidelines in order to maintain a consistent visual identity across the various assets that need to be created for SnapBox on an ongoing basis. Neutral colors balance out the strong SnapBox blue tone while the pink allows for specialized focus such as on pricing. Detailed rules for call to actions ensure consistency such as in cases of capitalization across a string of words (i.e. “Shop Now”).

ClientSnapBoxTypeBrandingToolsPhotoshop CCYear2016

// Select all links with hashes $('a[href*="#"]') // Remove links that don't actually link to anything .not('[href="#"]') .not('[href="#0"]') .click(function(event) { // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); // Does a scroll target exist? if (target.length) { // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Checking if the target was focused return false; } else { $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again }; }); } } });