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
- Use Sentence case for all headings (not Title Case)
Logo
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.
Zap
Faraday’s logo has included the Zap since day one.
-
Together, the “legs” of the zap represent a lightning bolt, signifying both Michael Faraday’s experimental legacy as well as the “aha” magic and vital energy of AI.
-
Separately, they become arrows—one pointing up, the other down. These reflect Faraday’s original prediction type—propensity—which involves binary (yes/no) classification.
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.
Mark safeties
The “safety” is the amount of clearspace that must remain empty surrounding any of the above marks.
-
For the logotype, the height of the capital “F” in Faraday must be kept clear in all directions, measuring from the ascender and baseline levels in the vertical direction and outer bounding box in the horizontal direction. See the diagram.
-
When the wordmark is used on its own, the height of the capital “F” in Faraday must be kept clear in all directions, measuring from the ascender and baseline levels in the vertical direction and outer bounding box in the horizontal direction.
-
When the Zap is used on its own, the heigh of one of the legs of the Zap must be kept clear in all directions, measuring from the outer bounding box.
Colors
Faraday uses a consistent color palette to unify its visual identity.
Thematic colors
- Teal
#49ada6 - Eggplant
#bc2a66 - Heliotrope
#c569ff - Rose
#e85ea5 - Bittersweet
#ff795d
Highlight color
- Gold
#e9d362
Blacks
- Black
#000000 - Text black
#111111
Grays
- Darkest gray
#222222 - Heavy gray
#444444 - Dark gray
#666666 - Medium gray
#999999 - Light gray
#cccccc - Pale gray
#eeeeee - Faint gray
#f8f8f8
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.
- For body text, use Regular weight (400)
- For major emphasis, use Semibold (600)
- For minor emphasis, use Medium (500)
- Do not use other weights without approval
- Italic variants may be used sparingly other than on the web, where it is prohibited
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.
- All images must feature at least one person—generally exactly one, although occasionally 2 or more people can be included
- All images must depict the person (or people) engaging in a recognizable behavior
- Subjects must be isolated on a white background
- Subjects must be looking away from the camera
- Whimsy is fine in moderation
- Avoid cheesy images
- Avoid complex or confusing images
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;