Brand Style Guide

The horizontal lockup with the JT symbol and wordmark in brand's colors is our main version and should be preferred over other lockups to the maximum possible extent to visually communicate the brand effectively.

The logo should not be less than 16px tall in digital applications (6mm in print) and there should be clear space of at least 50% of the logo's height from surrounding elements on each side.

The JourneyTrack wordmark is our most important brand asset because it's the most clear and accurate representation of our brand. Based on the Rubik typeface, the letterforms have a warm feel with their rounded edges and reflect the approachability and user friendliness that our platform extends to customer journey management.

Avoid using the wordmark alone to the maximum possible extent. The wordmark should be used without the JT symbol only when the symbol is present in a different location, like on the opposite side of a page or card, and even such usage should be reserved for exceptional situations.

The wordmark should not be less than 10px tall in digital applications (3.5mm in print) and there should be clear space of at least 100% of the wordmark's height from surrounding elements on each side.

The symbol merges the letters "J" and "T" in a fluid manner, symbolizing the breaking down of silos that occur when using JourneyTrack. The gradient colors further emphasize this unity and flexibility, reflecting the seamless collaboration among teams in addressing evolving customer needs and desires.

For optimal brand recognition, avoid using the symbol alone without the JourneyTrack wordmark in vicinity. Some exceptions include stylistic usage as a light background graphic (like a watermark), or on a multi-faceted artifact where the symbol is associated with the wordmark in another prominent location.

The symbol should not be less than 16px tall in digital applications (6mm in print) and there should be clear space of at least 50% of the symbol's height from surrounding elements on each side.

Our alternate lockup stacks the JT symbol on top of the wordmark and is intended for narrow, vertical layouts. It should not be preferred over the main horizontal lockup.

Ensure the logo is at least 32px tall in digital applications (12mm in print) and that there is a clear space of at least 50% of the logo's height from surrounding elements on each side.

This lockup has a larger JT symbol stacked on top of the wordmark compared to the main alternate lockup, intended for use cases where the logo symbol needs to be more prominently displayed in narrow, vertical layouts. Please avoid using it instead of the main horizontal or alternate lockups.

Ensure the logo is at least 32px tall in digital applications (12mm in print) and that there is a clear space of at least 40% of the logo's height from surrounding elements on each side.

Teal is our primary color and must be used for all important elements that need to be focused, e.g., buttons, links, background fills, etc.

Teal 600 is the main shade that we use as our primary color whereas Teal 400 (Robin Egg) is our secondary teal as seen in the JT symbol's gradient fill.

Midnight Green is our brand's secondary color that we use for text and layout elements like borders, input fields, surfaces, etc. Do not use it as an accent to highlight important elements.

Midnight Green 900 is the main shade used as primary text and icon color, serving as the base for all other shades in the Midnight Green family. Prefer using alpha/opacity values instead of solid color for all shades of Midnight Green 900 to get the best contrast on non-white backgrounds, especially for text and icons.

Sunglow is our primary accent color and Sunglow 300 is its main shade. We use Sunglow for elements that need to stand out from other content. Avoid using it for text.

Salmon Pink is our secondary accent color and Salmon Pink 300 is its main shade. We use Salmon Pink sparingly to add more visual depth to the content. Avoid using it for text.

Images that we use to support and reinforce our messages feature people in well-lit professional settings but without looking too corporate, conveying an overall pleasant vibe. Our images are inclusive and have a human touch, featuring people from diverse backgrounds working together harmoniously.

We use rounded corners on all images and when we place an image as a backdrop of any content, we tint the image with our primary Teal shade (600) at 50-75% opacity, depending on the image's brightness to achieve satisfactory contrast for the content.

We use soft gradients created with our brand's accent colors as content backdrops to convey diversity and different experiences we have in our journeys.

To highlight a content area, we sometimes draw a solid path with straight lines but rounded corners, threading through the content to communicate rich journeys.