THE OPEN DOOR TO BELGRADE

BrandGuidelines

Belgrade Life
Brand Guidelines

Primary Logo

The primary logo is the full lockup of mark and wordmark. It is the default expression of the brand and should be used wherever there is enough room for it to be read clearly.

03/ 18

Belgrade Life · Brand Guidelines

Logomark

The mark alone: the B and its door. Use it wherever the full lockup would fall below its minimum size.

The mark is a "B" with an open door cut into it. The door is the whole idea: Belgrade Life is the door newcomers walk through. The door is always the second color, never the same as the B, and it is never removed.

04/ 18

Belgrade Life · Brand Guidelines

Clear Space & Minimum Size

Keep a margin of at least one door-width (D) on every side. D is the width of the red door in the mark. Nothing enters this zone: no type, no photo edge, no other logo. Minimum size: full lockup 120 px wide on screen, 30 mm in print; mark only 24 px / 8 mm. Below these, switch to the mark.

05/ 18

Belgrade Life · Brand Guidelines

Clear space · one door-width (D) on every side

DD

Minimum size

Screen
24px

Print
8mm

Logo Misuse

The logo is a fixed piece of artwork. Do not redraw, recolour, distort or decorate it. These examples show what to avoid.

06/ 18

Belgrade Life · Brand Guidelines

Recolor the door to match the B

Stretch, skew or rotate the mark

Place on busy photos without the navy overlay

Add shadows, outlines or gradients

belgrade
life

Rewrite the wordmark in another typeface

Belgrade Life

Use the old red-square or text-only logos

Motion

How the mark moves. The animation is part of the identity: one curve, one behaviour, the same in every place it appears. Download the animated SVG and drop it into any page as a loader. No JavaScript needed.

Enter, hold, exit. The B rises into place, the red door swings open from its hinge, the full mark holds, then the door closes and the B lifts away. Entrances decelerate, exits accelerate.

Loop: 2800ms
Easing: cubic-bezier(0.16, 1, 0.3, 1)

Usage: <img src="belgradelife-mark-dark-loader.svg" width="48">

07/ 18

Belgrade Life · Brand Guidelines

Color Palette

The color palette represents the visual personality of the brand and should be used consistently across all materials.

08/ 18

Belgrade Life · Brand Guidelines

Navy

Primary. 700 is the brand navy.

50

#EEF3F9
0.962 0.010 253

100

#D6E2F0
0.908 0.023 252

200

#ADC4E0
0.812 0.047 253

300

#7FA0C9
0.696 0.071 254

400

#4F78A9
0.564 0.089 253.6

500

#2C5484
0.441 0.092 254

600

#163C69
0.354 0.089 254.6

700

Brand

#062952
0.283 0.084 255

800

Text

#061C36
0.225 0.058 254

900

#04142A
0.191 0.050 256

950

#020B18
0.147 0.033 252

Red

Accent. 500 is the door.

50

#FCEFEF
0.962 0.014 17

100

#F8D7D9
0.907 0.037 14

200

#F0AEB1
0.813 0.078 16

300

#E27F84
0.706 0.122 17.5

400

#D65A61
0.627 0.156 19.4

500

Door, accent

#C6363D
0.553 0.180 23

600

#A72B32
0.486 0.160 22.6

700

#872128
0.417 0.137 22

800

#64181D
0.339 0.108 22

900

#431012
0.262 0.078 22

950

#2A0809
0.197 0.057 22

Neutral

0

Canvas

#FFFFFF
1.000 0.000 0

50

#F7F8FA
0.979 0.003 265

100

#EEF0F4
0.955 0.006 265

200

#DEE2E9
0.912 0.010 262

300

#C4CAD5
0.838 0.017 263

400

#98A1B0
0.707 0.024 261

500

#6B7587
0.560 0.030 262

600

#4E5768
0.455 0.030 263

700

#38404E
0.370 0.026 262

800

#242A36
0.285 0.024 264

900

#151A23
0.217 0.019 262

950

#0B0E14
0.163 0.014 264

Support

Status and highlight only, through the semantic tokens.

Gold 100

#FBEFD9
0.956 0.032 83

Gold 300

#F3CF8A
0.870 0.096 83

Gold 500

#E9A23B
0.764 0.142 72

Gold 700

#A96E1C
0.588 0.118 69

Green 100

#D9F2E3
0.939 0.033 159

Green 500

#1F9D5A
0.6146 0.1457 153.9

Green 700

#146B3D
0.4668 0.1084 154.3

Orange 100

#FDE7D6
0.941 0.033 60

Orange 500

#E8722A
0.680 0.167 47.7

Orange 700

#9E4A16
0.508 0.127 47.5

Crimson 100

#FDE0DE
0.930 0.032 22

Crimson 500

#D92D20
0.576 0.209 29.5

Crimson 700

#8F1D14
0.425 0.151 29.4

Color Tokens

Semantic tokens name a job, not a colour. Each one resolves to a primitive in light and dark mode; design and code use the token, never the hex.

09/ 18

Belgrade Life · Brand Guidelines

Background

Light · Dark

bg/canvas

neutral/0 · navy/950

bg/surface

neutral/0 · navy/900

bg/surface-raised

neutral/50 · navy/800

bg/muted

neutral/100 · neutral/800

bg/inverse

navy/800 · neutral/0

bg/brand

navy/700 · navy/700

bg/brand-subtle

navy/50 · navy/900

bg/accent

red/500 · red/500

bg/accent-subtle

red/50 · red/950

Text

Light · Dark

text/primary

navy/800 · neutral/50

text/secondary

neutral/600 · neutral/300

text/muted

neutral/500 · neutral/400

text/brand

navy/700 · navy/200

text/accent

red/500 · red/300

text/link

navy/600 · navy/300

text/on-brand

neutral/0 · neutral/0

text/on-accent

neutral/0 · neutral/0

text/on-inverse

neutral/0 · navy/800

Border

Light · Dark

border/default

neutral/200 · neutral/800

border/strong

neutral/300 · neutral/700

border/brand

navy/700 · navy/300

border/accent

red/500 · red/400

border/focus

navy/500 · navy/300

Action

Light · Dark

action/primary/default

navy/700 · navy/100

action/primary/hover

navy/800 · neutral/0

action/primary/active

navy/900 · navy/200

action/primary/text

neutral/0 · navy/900

action/accent/default

red/500 · red/500

action/accent/hover

red/600 · red/400

action/accent/active

red/700 · red/300

action/accent/text

neutral/0 · neutral/0

action/secondary/default

neutral/0 · navy/800

action/secondary/hover

neutral/50 · navy/700

action/secondary/border

neutral/300 · neutral/700

action/secondary/text

navy/800 · neutral/50

Status

Light · Dark

status/success/bg

green/100 · green/700

status/success/fg

green/700 · green/100

status/warning/bg

gold/100 · gold/700

status/warning/fg

gold/700 · gold/100

status/error/bg

crimson/100 · crimson/700

status/error/fg

crimson/700 · crimson/100

status/info/bg

navy/50 · navy/800

status/info/fg

navy/700 · navy/200

Highlight & overlay

Light · Dark

highlight/gold

gold/500 · gold/300

overlay/scrim

navy/950 · navy/950

Primary Font

The primary font is used for main headings, subheadings and body across all brand communications. It establishes visual hierarchy and should be applied consistently to maintain a strong, unified brand voice throughout every touchpoint.

Display, headings, labels and eyebrows.

10/ 18

Belgrade Life · Brand Guidelines

Plus Jakarta Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !?&@%

The open door to Belgrade

Weights

Medium 500

SemiBold 600

Bold 700

Designer: Gumpita Rahayu, Tokotype
License: SIL Open Font License 1.1
Source: fonts.google.com/specimen/Plus+Jakarta+Sans

Body Font

The body font carries running text: paragraphs, descriptions, captions. Headings stay in the primary font.

Body text and captions.

11/ 18

Belgrade Life · Brand Guidelines

Arimo

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !?&@%

Everything you need to settle into life in Belgrade.

Weights

Regular 400

Bold 700

Designer: Steve Matteson
License: Apache License 2.0
Source: fonts.google.com/specimen/Arimo

Mono Font

Geist Mono is the mono family in the type tokens. None of the fifteen text styles uses it yet.

The mono family in the type tokens.

12/ 18

Belgrade Life · Brand Guidelines

Geist Mono

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !?&@%

belgradelife.com · v1.0

Weights

Regular 400

Medium 500

Designer: Vercel, Basement Studio
License: SIL Open Font License 1.1
Source: vercel.com/font

Type Hierarchy

Typography hierarchy defines how different text sizes and weights are used to organize content and guide the reader's attention. Consistent use of headings, subheadings, and body text ensures clarity and a unified reading experience across all materials.

13/ 18

Belgrade Life · Brand Guidelines

Display / Hero

Hero

72px700

Display / XL

XL

60px700

Display / LG

LG

48px700

Heading / H1

H1

36px700

Heading / H2

H2

30px700

Heading / H3

H3

24px600

Heading / H4

H4

20px600

Body / LG

B LG

18px400

Body / MD

B MD

16px400

Body / MD Bold

B MD

16px700

Body / SM

B SM

14px400

Label / MD

L MD

14px600

Label / SM

L SM

12px600

EYEBROW

Eyebrow

12px500

Caption

12px400

Spacing & Radius

One spacing scale and one radius scale for every layout. Values outside the scale are not used.

14/ 18

Belgrade Life · Brand Guidelines

Spacing

spacing/0 0

spacing/2 2

spacing/4 4

spacing/8 8

spacing/12 12

spacing/16 16

spacing/20 20

spacing/24 24

spacing/32 32

spacing/40 40

spacing/48 48

spacing/64 64

spacing/80 80

spacing/96 96

spacing/128 128

Bars drawn at 5× for legibility.

Radius · actual size

none 0

sm 6

md 8

lg 10

xl 14

2xl 24

full 999

On Backgrounds

Which version of the logo goes on which surface.

15/ 18

Belgrade Life · Brand Guidelines

Navy on white · default

White on navy · dark surfaces

White on red · campaign & social

Social Avatar

The avatar is the mark at its smallest and most frequent. It must read at 48px and survive a circular crop on every platform.

16/ 18

Belgrade Life · Brand Guidelines

400px

200px

96px

48px

App Icon

The app icon is the mark on a rounded square. Each variant fixes one ground and one ink; nothing else changes.

17/ 18

Belgrade Life · Brand Guidelines

Navy

White

Red

Contact

Questions about using the brand? Get in touch.

18/ 18

Belgrade Life · Brand Guidelines

Belgrade Life

belgradelife.com

Version v1.0 · September 2026Prepared by Align Scale

BrandGuidelines

Contents

Primary Logo

Logomark

Clear Space & Minimum Size

Logo Misuse

Motion

Color Palette

Color Tokens

Primary Font

Body Font

Mono Font

Type Hierarchy

Spacing & Radius

On Backgrounds

Social Avatar

App Icon

Contact