Remember the contrast! You can't make anything out when everything is equally loud.
Avoid meaningless decorations! You don’t need them once you’ve got something to say.
Keep your grids neat, margins uniform and styles consistent!
With this in mind we provide additional versions with gradually wider counters for use in smaller sizes.
There's also a variable version for fine tuning (make a copy to your drafts to edit).
It comes in handy when you need to brand various formats quickly and simply tiling logo is not an option (as if it was ever an option).
It’s not an obligatory part of a design though it is designed to look like one.
Label comes in vertical as well as horizontal orientation. Both can be stretched respectively, their contents will not scale, they will maintain equal distance instead.
Most of the time you’ll have the support graphics (such as basic shapes) in the background colors and the text over it in the contrasting ones. There are, however, exceptions.
Thank you.
for headings & highlights
for captions & paragraphs
View it as a recommendation with a specific use case as an example, not a strict set of rules.
It’s a matter of our tone of voice, this allows us for looking less formal and refers to swiss graphic design and IT field equally.
If it’s not the case and you absolutely must highlight it, you can confidently afford accenting with size and spacing.
abstract
abstract, light trail, light painting, texture
creators
silhouette, stars
architecture
abstract, light trail, light painting, texture
Primary part is the one that either is the subject of the message or makes sense without the secondary part present.
Add a label or a footer, align to grid, tweak, advance to step 3.
level 0
level 1
level 2
level 3
level 4
roundup
— to avoid highlighting with color
— to skip a style or two between primary and secondary parts of the message when setting up the visual hirarchy
don't use “digital” and “blockchain-y” cliches
Not only it disrupts our tone but what’s even worse, it undermines a lot of work done to establish it. It is important for us to stand out, especially with the general public having painful trust issues when it comes to this technology and words that describe it.
don't use symbols that have meaning as decoration
Deeper meaning is constructed by using a symbol in specific circumstances repeatedly. Using it outside them or without any intention to produce meaning at all erodes its meaning and makes connecting with it in the future more difficult.
don't be afraid of empty space
The negative space is a powerful tool for directing user’s attention, utilize it.
don't think that every pixel of every layout should tell about everything we are
The thing is, no piece of our communication exists in vacuum, with little to no exceptions. Everything is seen in the context, be it in literal space of the web page or among fragments of knowledge about us in user’s head. We brand heavily things that are more likely to be first points of contact and let go when we deal with the rest.
do check if somebody already did what you’re about to do
It’s very often worth asking around or looking yourself. Even if the result won’t be the exact solution you seek right now, it'll most certainly be a nice starting point.
do check if we have a tool/template for what you’re about to do
It’ll save you lots of time in addition to making our communication more consistent. Not to mention the understanding of the system you'll get browsing through our assets and tools.
do keep your means of expression lean, keep decorations to minimum
Even if you are to convey the mood as opposed to being informative or telling a story, please do. Any message benefits from clear intention and deliberate execution.
do read the guideline
As obvious as it may seem, a lot of work has initially been done with no regard to it. Reading the guideline is by far the fastest way to learn to apply the visual identity system.
examples
1. Sparkles do not mean anything here;
2. Poor image choice;
3. Shape as a background for a text block;
4. The font is something other than Gramatika Bold.
1. Generally, we do not use sparkles to fill up empty space or make things «look interesting», the label does it just fine. You can even make your own label based on the context and current needs. The basic shapes start to fail to convey their meanings even in an appropriate context if we start using them for decoration. Basic shapes descriptions and use cases in the guideline;
2. This background image was found on unsplash.com by keyword “gaming”. It’s dark enough to allow us for using white for the text without additional background elements and at the same time not too dark so we can still make out what’s in the picture;
3. We do not use support graphics as text containers as it tends to take up a lot of space and can be easily avoided by finding a suitable image;
4. Styles are described in the guideline.
1. Overloaded with unnecessary non-functional elements
2. The background is way off the brand
3. Text is bloated with repetitions
1. Any table benefits from getting rid of borders: lines are continuous inherently due to the reading logic while aligning text gets columns separated naturally.
2. Avoiding “digital” and “blockchain-y” cliches was one of our goals from the beginning: they disrupt our tone by making us look like one-more-faceless-crypto-something-something.
3. Seeking to reduce this redundancy means you care.
1. Overloaded with unnecessary non-functional elements
2. The background is way off the brand
3. Text is bloated with repetitions
1. Any table benefits from getting rid of borders: lines are continuous inherently due to the reading logic while aligning text gets columns separated naturally.
2. Avoiding “digital” and “blockchain-y” cliches was one of our goals from the beginning: they disrupt our tone by making us look like one-more-faceless-crypto-something-something.
3. Seeking to reduce this redundancy means you care.
1. Nodes on the background
2. The logo of the protocol instead of token
1. Again, avoiding “digital” and “blockchain-y” cliches was one of our goals from the beginning: they disrupt our tone by making us look like one-more-faceless-crypto-something-something.
2. There’s branding for the token as well. Comes with social media templates and tokenomics document.
1. The layout
2. The logo of the protocol instead of token
1. This time we literally had the picture.
2. There’s branding for the token as well. Comes with social media templates and tokenomics document.
1. The font is something other than Gramatika Bold
2. Minor concerns
1. Styles are described in the guideline.
2. The barcode feels like an unnecessary move, label can do just that and the whole thing will look more recognizable and consistent. The perforation line is generally more dense: images of things look more convincing when you depict them accounting for their function.