Faraday brand style guide

Faraday logomark

Welcome to Faraday’s brand style guide.

Introduction

This style guide provides rules, guidelines, best practices, and assets for producing communication that conforms to Faraday standards. We provide enough structure for a consistent brand experience while allowing enough flexibility for creativity to take place.

Foundation

These are the core, abstract definitions of our company and its purpose.

Purpose
Prediction infrastructure for the consumer economy
Vision
Stripe for prediction
Mission
To empower all brands to grow faster and get closer to their customers with responsible data and ethical AI

Personality

Faraday treads a fine line between technical competency and approachability.

Reassuring
AI is intimidating. We reassure our users that we have all the details under control.
Expert
We know the correct answer for making and employing predictions effectively.
Approachable
Our primary users are not data scientists.
Empowering
We’re here to help our users work (and look) smarter.

Style

Faraday generally follows Shopify’s Polaris content guidelines.

Frequently made mistakes

Faraday’s logo consists of our logomark (the “Zap”) — and wordmark (“Faraday”). When put together into a lockup, you get our logotype, or logo for short.

File locations

Logo files are available at docs3/Company/brand/logos.

Our logomark, the Zap
Our wordmark
Our logotype a/k/a logo

Zap

Faraday’s logo has included the Zap since day one.

Use the Rose and Heliotrope colors shown above whenever possible. In certain non-color conditions, replace both colors with 100% Black. (Do not use shades of Black to represent the missing colors.) When the zap must be shown on a dark background, replace both colors with 100% White.

Wordmark

Faraday’s wordmark is set in Aktiv Grotesk but contains several customizations.

The wordmark should generally be Black. When the wordmark must be shown on a dark background, use 100% White.

Do not re-type the wordmark.

Logotype

The logotype is a lockup of the Zap and wordmark. The space between the two components is double the width of the “F” in Faraday. You’ll notice the geometry of the zap is reflected throughout the wordmark.

Angle geometry
Lockup is 2x trunk width of the "F"
Use the "F" height to determine safety

Mark safeties

The “safety” is the amount of clearspace that must remain empty surrounding any of the above marks.

Colors

Faraday uses a consistent color palette to unify its visual identity.

Thematic colors

Highlight color

Blacks

Grays

Typography

File locations

Font files are available at docs3/Company/brand/fonts.

Aktiv Grotesk, by Dalton Maag, was designed as an intentional alternative to the most ubiquitous typeface from the grotesque genre – a typeface which Bruno Maag, founder of Dalton Maag, openly despises as the ‘vanilla ice cream’ of a designer’s type library.

Aktiv Grotesk is Faraday’s single official typeface.

Monospace

For monospace purposes, such as code samples, use IBM Plex Mono.

Photo illustrations

Faraday photo illustrations represent behaviors: the very thing it is our mission to predict. We then apply a dithering filter (a specialized form of compression) to the original photo to reflect the fact that our predictions are estimates. Dithering is able to simulate shades of gray, for example, using only black and white pixels in special patterns, invoking once again our binary classification (propensity) predictions.

Sourcing photographs

We use iStock to buy stock photography—ask Andy to share credentials. Candidate images are collected in the Verve behaviors board.

Generating illustrations

The Verve repo includes a CLI tool for producing illustrations in each Faraday color at a variety of sizes.

Using photo illustrations

Dithering makes this a delicate task. Each behavior filename specifies the exact pixel display height at which the images should be shown. For example, shrugging-rose-250@2x.png must only be displayed at 250px height. (The actual image file contains 500px of height, allowing for 2x “Retina”-type display.)

Anti-aliasing will ruin dithered photo illustrations. To prevent anti-aliasing, use the following CSS:

    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;