4 minute read
Section 01: Digital Brand Overview
01: Digital Brand Overview
Color Palette: Primary
RIDER CRANBERRY
Rider Cranberry is one of the primary colors of the Rider digital brand. This vibrant red color is used to add branded visual interest throughout the site in headlines, subheadlines, buttons, links, backgrounds, color treatments, and various design elements.
BLACKS & WHITE
Black and shades of gray make up an integral part of the primary color palette of the Rider digital brand. These colors are used to create breaker moments throughout the site that allow the white and red to feel elevated and engaging. These shades allow for content to be easily legible and approachable, and make up a majority of typography throughout the site.
RIDER CRANBERRY PANTONE 201 C C-7 M-100 Y-68 K-32 R-157 G-34 B-53 HEX# 9D2235
BLACK PANTONE BLACK 6 C C-0 M-0 Y-0 K-100 R-0 G-0 B-0 HEX# 000000 DARK GRAY PANTONE NEUTRAL BLACK C C-0 M-0 Y-0 K-91 R-24 G-24 B-24 HEX# 181818 WHITE PANTONE WHITE C-0 M-0 Y-0 K-0 R-255 G-255 B-255 HEX# FFFFFF
Color Palette: Accents
ACCENTS
The secondary colors are to be used sparingly for visual design elements throughout the Rider digital brand. These colors can provide accents, layering and added visual interest to the design by breaking up the overall visual flow created by the primary colors.
HOT RED PANTONE 1797 C C-0 M-97 Y-80 K-0 R-213 G-42 B-63 HEX# D52A3F ROYAL PURPLE PANTONE 267 C C-82 M-97 Y-0 K-0 R-95 G-37 B-159 HEX# 5F259F GOLD PANTONE 103 U C-5 M-8 Y-100 K-15 R-180 G-159 B-41 HEX# B49F29 GRAY PANTONE 424 C C-30 M-20 Y-19 K-58 R-112 G-115 B-114 HEX# 707372
Typography
GT SUPER DISPLAY
GT Super Display Bold is used as the main headline or hero typeface. The type should be used in sentence-case for legibility and clarity of messaging. It should never be used as body copy, but can be utilized for subheads or for oversized call-outs.
TODAY SANS
Today Sans is a sans serif typeface that is both highly functional and contemporary. It’s easy to read, includes a full range of weights and italics, and pairs well with Super Display.
For emphasis, it can be set in all caps or bolded in color. In some instances, Bold or Demi can be used to highlight important copy, in either all caps or sentence case. GT Super Display Bold
Today Sans Regular
GT Super Display Super
Today Sans Bold
Design Elements
VERTICAL & HORIZONTAL RULES WITH ADORNMENTS
The main non-functional design elements used throughout the Rider digital brand are subtle yellow rules that are adorned with various colored dots and circles.
When the rules are aligned horizontally, they’ve been programmed to animate and draw from left-to-right once the user scrolls through to encounter them.
Also notice the use of the Accent colors for these elements.
Photography & Images
PHOTOGRAPHY SELECTION BEST PRACTICES
When choosing photos for the Web it is important to keep in mind the container the photo will be shown in. The photo should match the orientation of the container. For example, if the container is a landscape aspect ratio, the photo used should be a landscape orientation.
In order to account for the responsive behavior of containers, it will be important to take into account how a photo or image will be utilized in the component and if there are any other elements such as text or buttons that may end up overlaying that image. The focal point could be center, offset to the right, or offset to the left based on this.
IMAGE SIZES AND CROPPING BEST PRACTICES
It is no longer necessary to crop photos and images to a set size due to the responsive nature of the design. We recommend working with your back-end developer to determine the specific aspect ratios and resolutions for various photos and images to be used, especially for images and backgrounds to be used in the heroes as those are going to be unique to specific pages.
Most of the images used in the designs will fall into the aspect ratios of 1:1 (square); 3:2 or 2:3 (landscape or portrait); and 16:9 (widescreen).
