Every encounter with our brand—whether visual or verbal—builds it. These brand guidelines are meant for keeping our expression in all encounters uniform and ensuring that our brand grows consistently and cohesively. They give direction to both those who work with the brand every day as well as those who are just entering our world: designers, writers, social media experts and any new hires. And, although our brand might evolve over time, our fundamental principles will stay the same, all working towards a uniform, recognisable and elegant brand. Let’s build Fuel’s brand—together.
Visual Identity
Our visual identity guidelines instruct how to use all brand assets, including identifiers, colors, imagery and motion assets.
The Fuel Visual Identity system is a comprehensive framework that defines and reinforces our brand's visual appearance. This system is made up of seven distinct components, including identifiers, colors, imagery, and motion language, among others. The components work together to create a consistent and recognizable look and feel for our brand, and it is essential that they are used together in all brand communications. Adherence to the guidelines for each component is crucial for maintaining the integrity of our brand's visual identity.
1.1
Identifiers
In this section you can find the identifier elements of Fuel brand. Through consistent and repetitive use as signature design elements in all of Fuel’s visual communications, they become a visual shorthand that identifies Fuel and symbolically embodies its activities, achievements and goals.
The logo of Fuel consists of the bolt symbol and a wordmark. It’s an instantly recognisable brand element and should be represented consistently throughout our product and marketing efforts. In no way should the logo be modified, distorted, or redrawn. The logo is available in both horizontal (primary) and vertical orientations.
Identifiers
Logo Color Variations
Primary color variations
Secondary color variations
Identifiers
Logo Proportions
The following proportions and safe area shall be maintained across all use scenarios. Safe area is the minimum amount of space to be left clear of any other graphic elements. The safe area also acts as the minimum space to be left between the logo and the edge of the canvas.
Identifiers
The Bolt Symbol
The bolt symbol should be used as the reduced form of our logo in tight spaces. Using it associated with Cypher Green, our primary brand color, should always be the favourite option. For cases that restric the use of color, a monochrome version is available.
Identifiers
Using the Symbol in Circular Spaces
In certain situations where the logo must be placed within a circular space (such as profile pictures), only the inner bolt elements of the symbol should be used. In all other cases, the square element should not be removed from the symbol.
1.2
Typography
Consistent use of typography is a powerful design element for building recognizable brand expression with clear visual hierarchy and rhythm in the layout. Correct use of type will draw readers’ attention, lead them to the most important information first, and maintain a sense of clarity, order, legibility, and structure throughout all written communication.
Typography
Typeface
The primary font family of Fuel is Px Grotesk, a sans-serif typeface that was designed from the rendering of typographic curves on screens. At smaller sizes, pixels sometimes brutally simplify shapes. Taking this paradox as a starting point, the font embeds a pixel-grid structure into a classic, optically adjusted drawing.
Choosing from a combination of weights, you can use Px Grotesk to create a clear and consistent visual hierarchy.
Typography
Additional Typeface
An alternative monospaced font family Px Grotesk Mono is available for use cases where legibility can be improved with equal width and spacing of characters. Such use cases can include for example tables, charts or UI elements.
Typography
Hierarchy
A strong hierarchy helps create clarity and consistency in communication. Choice of styling and hierarchy should always be done according to the relative importance and function of the text elements. Here we have laid out some recommended styles, font pairings and proportions for various scenarios.
Typography
Substitute Google Font
In Google Workspace tools (such as Slides), a substitute font Inter is used. The substitute font should not be used in any applications where the primary typeface can be applied.
1.3
Colors
The Fuel brand color palette is a harmonious blend of minimal, yet striking and dynamic swatches. These colors have been meticulously chosen to create a bold visual impact and offer a high degree of contrast. To ensure consistency in all brand communications, kindly adhere to the defined color palette.
Colors
Master Palette
The primary color scheme of Fuel features a foundation of white on black, accented by a striking and easily identifiable Cypher Green. The minimal core of the master palette allows anyone to effortlessly recreate the signature color combination in any visual communications.
Cypher Green
R G B
0 245 140
C M Y K
100 0 43 4
HEX PMS
00F58C 3395 C
Black
R G B
0 0 0
C M Y K
00 0 0 100
HEX PMS
000000 Black C
White
R G B
255 255 255
C M Y K
0 0 0 0
HEX
FFFFFF
The master palette also includes a deep Cobalt Blue to give the scheme an electrifying undertone, and a vibrant Crimson Red to add a touch of warmth and balance to the overall palette. These hues are mainly used for guiding the coloring of imagery, but can also be incorporated into graphic elements.
Cobalt Blue
R G B
0 40 200
C M Y K
100 0 43 4
HEX PMS
0028C8 2736 C
Crimson Red
R G B
240 0 80
C M Y K
00 0 0 100
HEX PMS
F00050 Rubine Red C
Colors
Usage Ratio
To achieve the desired appearance, the balance and proportion of colors should always be carefully considered. To easily create color compositions that align with the signature Fuel look, use a black background with a combination of white and Cypher Green elements.
Colors
Extended Palette
An extended digital palette is available for use in user interfaces and other similar instances where a wider range of swatches are needed to improve functionality. It includes lighter and darker options to separate surfaces and provide colors that meet accessibility standards. Some swatches have been blocked out to avoid shades and tints that deviate too far from the primary colors.
In practice, you should always persist in using colors from the master brand palette unless a clear functional need for additional tints is present.
900
800
50
100
200
300
400
500
600
700
Cypher Green
Crimson Red
#00854D
#00C271
#00A862
#00D67D
P
#00F58C
#00E787
#81F8AF
#B8FBCF
#E2FEEC
P
#000000
#1E1E1E
#434343
#555555
#6A6A6A
#9D9D9D
#C4C4C4
#D9D9D9
#E9E9E9
#F5F5F5
#001CBE
P
#0028C8
#3133D3
#4343DB
#5448E0
#E9E7FB
#9D97ED
C9C5F4
#6C65E6
#940045
#B60049
#CA004B
#E0004E
P
#F00050
#F43669
#F85C84
#FDB9CA
#FEE3EA
Cobalt Blue
Black
1.4
Imagery
Brand imagery is crucial for building the visual identity of Fuel. Consistency in imagery creates a strong, recognizable image and communicates the brand's attributes, values, and ideals. The imagery, guided by the concept of Fueltopia, should be visually striking and used consistently across all materials.
Fueltopia is an imaginary future world where anything is possible, inspired by the cypherpunk movement. It's a techno-utopia with a hint of edge and anarchy, where advanced technology and a decentralized society coexist in harmony. The visual concept showcases sleek, futuristic architecture, with towering skyscrapers and bustling streets, symbolizing the seamless integration of technology into everyday life. The city is bustling with activity and energy, reflecting the limitless potential of this utopian society. The overall aesthetic is one of progress, innovation, and freedom.
Imagery
Art Direction
The brand images are created as digital artworks that capture the energy and dynamism of a techno-utopia. The artworks are visually striking and designed to draw the viewer in by immersing them in the world of Fueltopia. The use of rich brand colors, contrast, and vibrant hues creates a cohesive collection of polished and dynamic images that are both impactful and memorable.
1.5
Motion
Fuel's motion language is characterized by its smoothness, tactility, and functionality. Every movement is carefully crafted not only to delight, but also to serve a purpose without unnecessary embellishments.
This motion language is used across Fuel's brand communication to guide the viewer's attention and convey a feeling of reliable and seamless operation.
Any motion should always be fluid and effortless, yet tactile and robust. The core idea of Fuel's motion language is to convey a feeling of seamlessness, with everything working in a smooth and kinetic manner. Use the signature Fuel easing, or a modified easing curve to control the velocity of the movement, and avoid using excessive movement, such as bouncing or smearing elements.
Motion
Fuel Easing Curve
In most cases, utilizing the Fuel Easing Curve is recommended as it provides a smooth and unique touch to any movement. However, in specific scenarios, such as repetitive or prolonged movements where the Fuel Easing Curve may not be the optimal choice, it's also possible to use other alternative easing curves like Expo or Circ to achieve practical and functional motion in all applications.
Motion
Compositional Flow
All movements should enhance and support the hierarchy and rhythm of the composition. It is important to consider the sequence of movement, timing of each action, and the amount of overlapping motion to guide the user through the information and elements presented in the layout. Generally, the key information should be emphasized, secondary elements should be introduced discreetly, and the logo is brought in last as a sign-off.
Motion
Behavior of Elements
The following basic building blocks can be used to assemble motion for most executions, while adhering to a few simple rules and definitions to keep the expression consistent across all applications.
Movement
Elements can be moved either horizontally or vertically. Avoid diagonal movement in all instances.
Scaling
Scaling can be utilized to bring objects into or out of view, and also as an action to transform between different states.
Rotation
Rotation can be effectively used to indicate progress or a change of state. However, it should be used sparingly and not combined with any secondary motion.
Opacity
The most straightforward way to reveal or hide elements from view is by means of opacity. Changing opacity can be combined with secondary motion, such as movement, to create a more dynamic expression.
Motion
Logo Animation
Use the provided logo assets in all applications. Do not create alternative logo motion.
Motion
Text Reveal Motion
For headline motion, use a right-to-left slide movement for reveal, easing it with the Fuel Easing Curve, and staggering the movement with a slight delay between each line of text. For smaller, short text elements such as subheadlines or lead paragraphs, a typewriter effect can be employed. For body text, opt for a simple fade-in or a wiping reveal.
Motion
Component Motion Examples
1.6
Iconography
Icons are an effective way to convey information and guide interactions in a simple, direct manner. The use of icons that follow a consistent visual style, and are linked with the same visual language as the other identity components, emphasizes and ties together the overall brand expression in a powerful way.
The visual language of the icon concept is rooted in a blend of functional minimalism and striking, tech-inspired shapes that follow the aesthetic present in the Fuel logo and typography.
Iconography
Style & Structure
The icons are designed on a 48x48 grid to ensure consistent structure throughout the icon library. Each icon is composed of as few elements as possible and the desired style is achieved through the use of clear, filled-in shapes with alternating diagonal and perpendicular angles. Definition and detail are achieved by cutting out pieces of larger shapes and rounding selected corners.
1.7
Composition
The Fuel layout structure is a simple ruleset that is proportional to the canvas size, allowing for a flexible placement of elements while keeping a consistent look across different formats and touchpoints.
The structure helps with building layouts that achieve good visual hierarchy, rhythm and contrast to deliver clear brand communication at all times.
The basic structure of the layout is based on proportions of the canvas. The minimum margin is set by dividing the shortest edge by 15. Using columns suitable for the format is highly recommended in order to give the overall layout more structure and rigidity.
Composition
Logo Placement
The Fuel logo should primarily be placed in one of the corners of the layout, with the top left corner being the preferred position.
Composition
Logo Safe Area
If the size of the logo safe area exceeds the minimum safe area set for the format, it will be used to define the margins for the layout.
Composition
Arrangement
When sufficient columns are used as guides to align all elements within the layout, the order and arrangement of elements can be flexibly varied to achieve optimal placement in relation to the background image composition, as well as to accommodate varying amounts of information.
Composition
Layout Examples
2.0
VERBAL Identity
Our verbal identity guidelines serve as a roadmap for consistent communication in all brand interactions. They outline the tone and voice of our brand and provide practical examples for usage. By following these guidelines, we build a strong and recognizable verbal identity that reflects our brand values and resonates with our audience.
2.1
Tone of Voice
Our voice determines how we speak about ourselves to our people and the people around us. Think of Fuel’s voice as a tool for showing the world who we are: it sets the tone for the relationships we foster with our collaborators and encourages others to act. When we use our voice attributes consistently, we create a language and voice that the world starts recognising — and loving.
Tone of Voice
Voice concept
Our voice is the voice of an inspired discoverer, tireless explorer and humble pioneer. It is an excited voice that never boasts, but always inspires. Imagine a scientist: a rational and discerning problem-solver who finds themselves more excited about solving pertinent issues than expending their energy on convincing others.
It is the voice of an independent pathfinder that seeks to broaden the horizons of the future and inspire others to explore them. Always inclusive and ready to take anyone on board, yet never soft, too intimate or condescending. Always inspired, never idealistic or dreamy.
Tone of Voice
Attributes
The attributes of our voice describe the voice we use. We know that our audiences are geared towards receiving actionable, matter-of-fact messages that are engaging and inspiring. Our attributes cater to our audiences preferences.
1. Confident
For us, confidence means taking space and speaking in a way that conveys expertise. We know what we do and we know that we’re good at it. The confidence is subtle: never boastful, always knowing that we have something to offer. In written form, it means speaking of our achievements in a way that makes the reader respect us.
What it means in practice
We want to inspire, so we write in a way that speaks directly to our reader and empowers them to act. We avoid a passive voice and instead encourage our audiences to do something great with us.
2. Inspired
Being inspired allows us to inspire whoever comes across our content. We know that we’re harbingers of change and progress and we are inspired by what we do. As an attribute for our verbal identity, being inspired guides us to write in a way that excites, thrills and makes the reader dream a little. We want to inspire, so we write in a way that speaks directly to our reader and empowers them to act.
What it means in practice
We want to inspire, so we write in a way that speaks directly to our reader and empowers them to act. We avoid a passive voice and instead encourage our audiences to do something great with us.
3. Realistic
Although we are inspired and inspire others, we stay in the realm of the here and now. We speak in a realistic and matter-of-fact way and provide our audiences with relevant information in a language they understand. We don’t shy away from professional terms but avoid using unnecessary jargon or flowery prose. With us, what you read is what you get.
What it means in practice
We don’t speak in a way that requires the reader to interpret our message. We get straight to the point.
Tone of Voice
Our Voice: A Scale Of Usage
Tone of Voice
Tips For Writing In Fuels' Voice
1
Always think of the recipient of your message: their potential state of mind, mood and willingness to receive your message. Adapt your voice according to the situation and your audience.
2
Edit your message until it is clear and concise.
3
Choose consistency and repeat phrases and messages as needed.
4
Whenever possible, go simple. Focus on writing actionable headlines that encourage the reader to act.
2.2
Manifesto
The age of the monolith is over.
We believe that when the right people have access to the right tools at the right time, something remarkable can happen.
This is an invitation to break free from the constraints of monolithic blockchains and enter an autonomous future, engineered by people and groups.
We’re not here to tell you where to go to or what to do. We’re here to give you the tools to make it happen.
