Please visit this website from a desktop device

Design & Brand Guidelines

Beta

Table of Contents

LogosColorsTypefacePhotographyIconography

Examples

Isotype

Logos

The logo works best in primary blue on a white background. For dark backgrounds, the logo should always be white.

Colors

Primary Blue
HEX: #006AFF
RGB: 0, 106, 255
Primary Dark
HEX: #242833
RGB: 36, 40, 51
Primary Light
HEX: #F8FAFC
RGB: 248, 250, 252
Pink Gradient
HEX 1: #FE6DAB
HEX 2: #BA7BEC
RGB 1: 254, 109, 171
RGB 2: 186, 123, 236
Yellow Gradient
HEX 1: #FFC830
HEX 2: #FF7D96
RGB 1: 255, 200, 48
RGB 2: 255, 125, 150
Blue Gradient
HEX 1: #23E4FF
HEX 2: #71A7FF
RGB 1: 32, 228, 255
RGB 2: 113, 167, 255
Green Gradient
HEX 1: #64F493
HEX 2: #34E7E1
RGB 1: 100, 244, 147
RGB 2: 52, 231, 225
Purple Gradient
HEX 1: #A47FFE
HEX 2: #4FC1FF
RGB 1: 164, 127, 254
RGB 2: 79, 193, 255
Red Gradient
HEX 1: #9A41F3
HEX 2: #C5273A
RGB 1: 154, 65, 243
RGB 2: 197, 39, 58

Typeface

Radnika Light
Radnika Regular
Radnika Medium
Radnika Bold
Radnika Black

Photography

Photography is absolutely more than a decorative element of design. If used well, it can help to communicate ideas better in a much clearer way, translating this into a better experience ,and is an excellent element to express a story.

When we see faces we feel identified. The key is to show emotions naturally.

๐Ÿ˜ŽCool!
๐Ÿ˜ดBoring

NOTE: Donโ€™t use pixelated, blurred, poor lighting or pixelated images.

Iconography

Using icons with the same aesthetic unifies the brand and makes it recognizable in different media. We have used icons with border line and no fill and with a slight rounded corner.

You can use this library from this link, or download the typographic file with these icons from the fonts and assets package.

๎€€
๎€
๎€‚
๎€ƒ
๎€„
๎€…
๎€†
๎€‡
๎€ˆ
๎€‰
๎€Š
๎€‹
๎€Œ
๎€
๎€Ž
๎€
๎€
๎€‘
๎€’
๎€“
๎€”
๎€•
๎€–
๎€—
๎€˜
๎€™
๎€š
๎€›
๎€œ
๎€
๎€ž
๎€Ÿ
๎€ 
๎€ก
๎€ข
๎€ฃ
๎€ค
๎€ฅ
๎€ฆ
๎€ง
๎€จ
๎€ฉ
๎€ช
๎€ซ
๎€ฌ
๎€ญ
๎€ฎ
๎€ฏ
๎€ฐ
๎€ฑ
๎€ฒ
๎€ณ
๎€ด
๎€ต
๎€ถ
๎€ท
๎€ธ
๎€น
๎€บ
๎€ป
๎€ผ
๎€ฝ
๎€พ
๎€ฟ
๎€
๎
๎‚
๎ƒ
๎„
๎…
๎†
๎‡
๎ˆ
๎‰
๎Š
๎‹
๎Œ
๎
๎Ž
๎
๎
๎‘
๎’
๎“
๎”
๎•
๎–
๎—
๎˜
๎™
๎š
๎›
๎œ
๎

Starshot's isotype in social networks

Image 1

The isotype is not a completely circular element since it has curves at the bottom, but we can align it perfectly.

Visualize the Starshot isotype as a completely circular element and based on this, align fully centered. (Image 1)

To achieve this, create a circle without border and fill with the same width of the isotype, select the circle you just created and the isotype, and align them at the top and center, now export this as a single element to create a space empty at the bottom achieving a uniform circular size.

Image 2

For this to look correctly, make sure the isotype maintains a white border around it, as shown in Image 2. The recommendation is that there is a reduction of approximately 89% in size.

Do not modify, add, distort or misalign the isotype. Any change will make the brand not look recognizable and seem unprofessional.