Faraday brand style guide

Faraday logomark

Welcome to Faraday’s brand style guide.


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.


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

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


Faraday treads a fine line between technical competency and approachability.

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


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


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.


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.


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.


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

Thematic colors

Highlight color




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.


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;