Color Palettes

Our brand colors combine three primary colors: black, white and blue. They define the mood and present brand values including:

Stability, Trust, Freedom, Responsibility, Loyalty, Wisdom, Confidence and Intelligence

More

01. Primary Colors

Our primarly used colors are black and Joystream blue, a distinctive color that helps to put focus and draw attention. The color white can be deployed in order to calm, provide clarity and offer improved readability.

One additional color to combine with the three primary colors is blue tinted grey, its purpose is comparable to that of white but it also gives a good amount of contrast to the existing white elements where necessary.

Joystream Blue

CMYK
87 / 73 / 0 / 0
RGB
64 / 56 / 255
HEX
#4038FF

White

CMYK
0 / 0 / 0 / 0
RGB
255 / 255 / 255
HEX
#FFFFFF

Joystream Grey

11 / 5 / 2 / 0
232 / 237 / 246
#E8EDF6

Black

CMYK
30 / 30 / 30 / 100
RGB
0 / 0 / 0
HEX
#000000
More

02. Supportive Color Palette

Our supportive palette serves the purpose of convenience and usability. This pallete provides a comprehensive range of different shades of primary colors and can be utilised in many different ways depending on requirements.

#261EE4
#2F2FF4
Joystream Blue
#4038FF
#5252FF
#6C6CFF
#A7AEB7
#D3D8E0
#E8EDF6
#F2F5F9
#FFFFFF
#000000
#121519
#1F252E
More

03. Secondary Color Palette

These are further colours that can represent certain states of the network, they can stand for an error, success, warning and more.

#FF3861FF
#FF386199
#FF386166
#FF386133
#FF38611A
#00DBB0FF
#00DBB099
#00DBB066
#00DBB033
#00DBB01A
#FFE538FF
#FFE53899
#FFE53866
#FFE53833
#FFE5381A
More

Iconography

Icons can be divided into two groups with different purposes. Descriptive icons are a substitute for illustrations and system icons are a purely functional part of the interface.

01. Descriptive

02. System

More

01. Descriptive Icons

Joystream iconography is a custom, comprehensive icon style that helps in explaining certain complex topics in a simple, digestable manner.

They are not always very direct and often carry a symbolic meaning but they help to emphasize important elements.

Construction

01.

Characteristic features of the descriptive icons include paralell striped fills. They are a translation of logo stripes and represent shadows.

Lines have an angle of 45° they should have 2px girth and 8px space between them at 100% scale.

02.

Icons are drawn using outlines of 12px width at 100% scale, they have square linecaps and can have various sizes depending on the composition.

Icons at 100% scale should fit into a box of 800x500px.
More

02. System Icons

System icons in their basic style combine two colors: black and Joystream Blue. Their purpose is to represent certain actions on the website or platform. They are readable even in small sizes down to 18x18px.

Construction

System Icons are drawn using 2px strokes with square linecaps on a 24px grid frame.

Where possible, icons should have subtle blue accents representing no greater than 40% of the whole.

Types of system icons

We distinguish four types of system icons and they should be used preferably in their basic style but can be used interchangeably where neccessary.

Basic style

Blue outlines

White outlines

Full style

More

Illustrations

Joystream Illustrations are symbolic representation of important concepts within the Joystream project. These might include a a new testnet, a particular role on the network or any other equally significant subject.

They can be quite visualy complex despite using only three colors and no gradients.

More

Construction

Illustrations will often be combined with patterns and in the case of putting them on a blue background, the outline of the illustration can be changed to Joystream Blue in order to create a good color balance between patterns and the background.

#FFFFFF
#B7CEFF
#4038FF
#000000
#C7CED8
#FFFFFF
More

Construction

Illustrations should be simple enough to be distinctive even in smaller resolutions down to 300x300px.

The amount of detail should be adequate to what the illustration represents, in most cases they should be deployed at sizes no smaller than 500x500px.

More

Patterns

Patterns are close translation of the logomark (J) into variants of geometrical shapes representing the flow of information, technology and Joystream's experimental brand personality.

They were introduced as a support tool to make certain elements stand-out, to build mood and as an inherent element of the visual identity of the brand.

More

Construction

Patterns visually consist of six different pieces that can be rotated by 90 degrees in any direction and should always have the dimensions of a perfect square.

They should also have at least one common vertex when they touch. They do not always have to touch and when they don’t, space between pieces should always be equal to its’ width/height or the value multiplied.

More

How to use patterns

Patterns can use one of five different colors depending on what background is used beneath and what their main purpose is in a given situation.

Depending on the situation these can be used more or less densely.

More

Patterns in use - examples

More

Typography

Our typefaces are simple, comprehensive and modern. This is a reflection of our brand and our voice. We chose the appropriate typeface weights from PX Grotesk (regular, bold) and Inter family for specific touchpoints and to create clear hierarchies of information and messages.

PX Grotesk
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()
Inter UI
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()

If either two typefaces are impossible to use please choose Arial Regular. This may be required across PC operating systems or electronic internal documents or in diferent offices worldwide. Don’t use Arial for any print materials.

The following is a sample of an ideal font stack using PX Grotesk for headlines and larger pull quote text and Inter UI for paragraph and call-to-action text.

H1
PX Grotesk Bold
/Regular, 54/80

The spectacle before us was indeed sublime.

H2
PX Grotesk Bold
/Regular, 40/48

Question marks and exclamation points.

H3
PX Grotesk Bold
/Regular, 40/48

Every introduction to the problems of aesthetics begins by acknowledging the existence and claims of two methods of attack.

H4
PX Grotesk Bold
/Regular, 32/40

Methodologies of Aesthetics

Paragraph
Inter Regular, 14/24

Users who also want to engage in actually running and guiding how the platform will work, in other words, people who want to engage in platform governance and work. This refers to people who enjoy building, fostering and participating in nascent communities. They are driven by a sense of purpose, and also the motivation to get in early on something that can become big and important. These people are often highly social, enjoy working in groups with common purpose, are self directed, digital natives and often outsiders in the offine world.

More

Photography

Photographs should be relevant to the topic they are describing but they shouldn’t be limited only to technology. Joystream is much more than just technology; it is unifying, fresh and joyful. Imagery should convey this mood to users.

More

How to use photography

Since Joystream is a unique and experimental project it provides a wide variety of the topics which might be associated with it in terms of photography. It is highly technical especially now when we are in the community building phase, so good deal of the photographs will be tech related.

One way to make sure the photographs are consistent is to use them in dual tones deriving from branding colors. For that purpose we can use a handy tool to consistently change images to dual tones as described below.

#000
#FFF
#3F38FF
#FFFFFF

The link below allows you to create consistent duotones with any photography after inputing the proper two Joystream colours.

https://duotone.shapefactory.co/

The mood that photos convey is extremely important. It should by all means give a feel of building trust, community and joy. Photographs should show good amount of diversity as it is meant to be for an extremely wide variety of users. They don’t have to be used in dual tones but it is best if they are not "screaming" with colours.

Photography in use - examples

More

Motion

Joystream is an experimental and exciting platform and its motion should be too.

General rules for motion can be described with a few simple principles: smooth transitions, dynamic but fluid motion and good amount of easing at the keyframes. This combination should provide a consistent and flexible animation style to cover most of the use cases.

Guides should be by no means limiting, they should only serve the purpose of providing consistency for animations.
Back
This site uses cookies and external trackers to improve our services and your experience. By continuing to use our site, you agree to their use. Find out more →