Guidelines – Xceed Brand

Logo

Customized optical kerning, defined clearspace, and delineated placement in relation to other content, all make Xceed’s bold character instantly recognizable at all sizes and in all contexts.

Our logo is built on the Avenir Font. While the strongest weight, Black, conveys our bold DNA, the use of italic perfectly blends the initial sharp strokes of the “x” with the rounded traits of the other letters, creating a musical dynamism whose recurring sound wave can be seen moving at the bottom of the closing letter “d”.

Clearspace around the Xceed logo is equal to the cap height of the letter “d”.

The app icon is individually designed based on specifications. It is an exception to the clearspace guidelines and it’s sized optically to best fit each shape.

Sub brands

From sub-brands to products and software, we build Xceed’s equity through a consistent brand architecture.

Xceed’s business software and data dashboard, Nightgraph, stands aside this general rule. Nightgraph’s own identity is reflected by its distinctive color and uppercase logo.

Nightgraph logo embeds two elements, the hived “N” icon and the Avenir Black text “NIGHTGRAPH”. The iconic “N” takes up 1/3 of the vertical an horizontal space of its outlining hive and lacks 1/10 of both its tips. Clearspace around the Nightgraph logo must be of at least 2/3 of its height in each direction.

Xceed Night Mag

Xceed CUE

Primary Colors

Our colors are what gives us our personality and make our corporate identity consistent and recognizable throughout all brand communications.

Early 20th century avantgard expressionism and its post world-wars abstract forms strongly inspired Xceed’s color palette, sharing our desire to express the meaning of emotional experience and exceeding physical reality.

Munch’s reds, Van Gogh’s Starry Night and Pollock’s dancing canvas, all blends into our color style guide.

Brand Color - Dark

#3642A4

#RGB (54, 66,74)

Brand Color - Light

#FFFFFF

#RGB (255, 255,255)

Brand Color - Special

#_

#RGB (_, _,_)

Nightgraph

#AED8E5

#RGB (174,216,229)

Text & Accent colors

Our text colors focus on clarity of reading and consistency with the brand’s palette.

The accent color is used for emphasis on specific elements and calls to action. It should be used for moments of registration, checkout, support, assurance, and delight at moments of interaction between a user and the brand.

PRIMARY TEXT

#3642A4

#RGB (54, 66,74)

SECONDARY TEXT

#6E7A83

#RGB (110,122,131)

CAPTION

#B6BABD

#RGB (182,186,189)

ACCENT SHAPE

#3B88FB

#RGB (59,144,253)

CAPTION

#9BC5FC

#RGB (155,197,252)

Infrastructure color

Infrastructure, or background, colors are for use on structural and navigational elements.

Our feelings palette helps conveying urgencies and alerts to our user

PURE WHITE

#FFFFFF

#RGB (255,255,255)

SPACE WHITE

#FAFAFA

#RGB (250,250,250)

WHITE SMOKE

#F7F7F7

#RGB (247,247,247)

GAINSBORO

#F4F4F4

#RGB (244,244,244)

MERCURY

#E2E4E5

#RGB (226,228,229)

NIGHT

#1D1A1F

#RGB (26,29,21)

POSITIVE

#86D9C5

#RGB (134,217,197)

TEMPORARY

#FBB86D

#RGB (251,184,109)

NEGATIVE

#EF8B8B

#RGB (239,139,139)

NEUTRAL

#6E7A83

#RGB (110,122,131)

Colors - Secondary

Secondary colors relates to specific music genres, services and product features.

They guide both consumer and business users through their repeated journeys and help them quickly identify their preferred options and presets

MANCHESTER

#FA8499

#RGB (250,132,153)

MARSEILLE

#9EDCF6

#RGB (158,220,246)

MIAMI

#89EBDD

#RGB (137,235,221)

MARRAKESH

#FAC496

#RGB (250,196,150)

MOSCOW

#A8C8FE

#RGB (168,200,254)

MANNHEIM

#7E97A8

#RGB (126,151,168)

Web Desktop Typography

Typography is a key element to communicate a unified personality for Xceed. Our web typeface is Avenir, used in different weights: Book, Heavy and Black.
When using our typeface on web interfaces, always keep the number of font sizes to a minimum.

HTAG - USE ∙ WEIGHT ∙ SIZE / LINE HEIGHT ∙ SPACING ∙ COLOR

Far away, behind the great mountains...

H1 - SUPER TITLE ∙ BLACK ∙ 48 / 48 ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H1 - TITLE ∙ BLACK ∙ 32 / 36 ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H2 - SECONDARY TITLE ∙ BLACK ∙ 24 / 24 ∙ AUTO ∙ #36424A AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H3 - TERTIARY TITLE ∙ BLACK ∙ 18 / 24 ∙ AUTO ∙ #36424A ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H4 - KEY TAG - VENUE - CATEGORY ∙ BLACK ∙ 12 / 24 ∙ 1.2 ∙ UPPERCASE ∙ #B5DDE8 & #36424A & OTHERS ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H5 - TAG ∙ BOOK ∙ 12 / 24 ∙ 1.2 ∙ UPPERCASE ∙ #36424A ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

BODY - STRONG TEXT - CTA ∙ HEAVY ∙ 16 / 24 ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

BODY - TEXT ∙ BOOK ∙ 16 / 24 ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

BODY - SECONDARY TEXT ∙ BOOK ∙ 14 / 24 ∙ AUTO ∙ #6E7A83

Far away, behind the great mountains, we dance till dawn

OTHERS - ALERT ∙ HEAVY ∙ 14 / 24 ∙ AUTO ∙ #86D9C5 OR #FBC08F OR #EF8B8B

Far away, behind the great mountains, we dance till dawn

TINY - DIVIDERS & NOTES ∙ BOOK ∙ 12 / 24 ∙ 1.2 ∙ UPPERCASE ∙ AUTO ∙ #B6BABD

Far away, behind the great mountains, we dance till dawn

TINY - CAPTION OR DISABLED TEXT ∙ BOOK ∙ 12 / 12 ∙ AUTO ∙ #B6BAB

Mobile Typography

HTAG - USE ∙ WEIGHT ∙ SIZE / LINE HEIGHT ∙ SPACING ∙ COLOR

Far away, behind the great mountains...

H1 - TITLE ∙ BLACK ∙ 40 / 48 ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H1 - TITLE ∙ BLACK ∙ 30 / 36 ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H2 - SECONDARY TITLE ∙ BLACK ∙ 22 / 24 ∙ AUTO ∙ #36424A AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H3 - TERTIARY TITLE ∙ BLACK ∙ 17 / 24 ∙ AUTO ∙ #36424A ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H4 - KEY TAG - VENUE - CATEGORY ∙ BLACK ∙ 12 / 24 ∙ 1.2 ∙ UPPERCASE ∙ #B5DDE8 & #36424A & OTHERS ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

H5 - TAG ∙ BOOK ∙ 12 / 24 ∙ 1.2 ∙ UPPERCASE ∙ #36424A ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

BODY - STRONG TEXT - CTA ∙ HEAVY ∙ 15 / 24 ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

BODY - TEXT ∙ BOOK ∙ 15 / 24 ∙ AUTO ∙ #36424A

Far away, behind the great mountains, we dance till dawn

BODY - SECONDARY TEXT ∙ BOOK ∙ 12 / 24 ∙ AUTO ∙ #6E7A83

Far away, behind the great mountains, we dance till dawn

OTHERS - ALERT ∙ HEAVY ∙ 12 / 24 ∙ AUTO ∙ #86D9C5 OR #FBC08F OR #EF8B8B

Far away, behind the great mountains, we dance till dawn

TINY - DIVIDERS & NOTES ∙ BOOK ∙ 12 / 24 ∙ 1.2 ∙ UPPERCASE ∙ AUTO ∙ #B6BABD

Far away, behind the great mountains, we dance till dawn

TINY - CAPTION OR DISABLED TEXT ∙ BOOK ∙ 10 / 12 ∙ AUTO ∙ #B6BAB

Desktop CTAs Styleguide

Brand-consistent buttons not only ensure a pleasant user interface, but serve as a tool to provide a frictionless experience to the user as well.
Our Guide Buttons and Guide Texts are present at the important moments of interaction between the user and the brand.