# МЕСТО — Brand Book

> Identity, voice, and the rules for using the logo, color and language of the brand.
> Companion to [`design.md`](./design.md) (UI / system tokens) and [`logos/`](./logos/) (assets).

---

## 1. The brand at a glance

| | |
|---|---|
| **Name** | МЕСТО (cyrillic, all-caps) |
| **Latin transliteration** | MESTO (only for international contexts) |
| **Legal entity / domain** | mp-llc.ru |
| **Category** | Дизайн-студия полного цикла |
| **Specialization** | Pop-Up, выставки, инсталляции, витрины, ритейл, музеи |
| **Tagline (RU)** | «Pop-Up, выставки, инсталляции и витрины» |
| **Positioning line** | «Партнёр для бизнеса и брендов» |
| **One-liner** | Дизайн, производство и реализация коммерческих пространств полного цикла |

### What "МЕСТО" means

«Место» — a *place*, a *space*, a position in the world. The name is deliberately literal: the studio makes physical places. Pronounce it `[ˈmʲestə]` (mye-sta).

The Latin form `MESTO` is allowed only when the audience cannot read cyrillic (international press, English partners). Default to **МЕСТО** in every Russian and bilingual context.

### Never write the brand as

- ❌ `Mesto` (mixed case)
- ❌ `MЕСТО` with a Latin "M" — use only cyrillic letters
- ❌ `MP`, `MP-LLC`, `мп` — the domain is `mp-llc.ru` for legacy/SEO reasons; the brand is МЕСТО
- ❌ `«МЕСТО Design»`, `МЕСТО Studio` — no descriptors attached to the wordmark

---

## 2. Logo

The identity has two components — the mark and the wordmark. Use **one or the other**, never together.

### 2.1 The mark (monogram)

A solid geometric capital **М** based on the Inter Bold (700) letterform. This is the primary brand artefact — used as favicon, app icon, watermark and avatar.

| Variant | File | Use |
|---|---|---|
| Mark on light | [`logos/mesto-mark.svg`](./logos/mesto-mark.svg) | Default — light backgrounds |
| Mark reverse (white on navy) | [`logos/mesto-mark-reverse.svg`](./logos/mesto-mark-reverse.svg) | On navy / photography |
| Mark monochrome | [`logos/mesto-mark-mono.svg`](./logos/mesto-mark-mono.svg) | Single-color print, embossing, dynamic colour via CSS |
| Favicon tile | [`logos/mesto-favicon.svg`](./logos/mesto-favicon.svg) | PWA / browser favicon (mark on `#F5F5F5`) |
| PNG raster set | [`logos/png/`](./logos/png/) | Pre-rendered at 16 → 1024 px |

**Construction.** Glyph fill `#071246` on a `32 × 32` art-board (scaled to 512 for the favicon). Frame inset 7 / 25 — the M occupies the central 18-unit column. Do not redraw — always pull from the source SVG.

**Minimum size.** 16 × 16 px on screen, 6 × 6 mm in print. Below this the inner negative space collapses.

**Clear space.** Reserve 1× the cap-height of the M on every side. No element — text, image, edge — may enter this zone.

### 2.2 The wordmark

«МЕСТО» typeset in **Inter Bold (700)**, all-caps, letter-spacing `0.15em`. The logo wordmark uses Inter — distinct from the site body type (Fira Sans). On the live site header and footer, the «МЕСТО» link is rendered as text in `font-semibold tracking-[0.15em] uppercase` (Fira Sans 600); for marketing materials, presentations, social cards and any standalone logo use, prefer the outlined Inter Bold SVG.

Two variants per file: the `*-outlined.svg` set ships pure path data (no font dependency at render time); the editable `*.svg` set keeps live `<text>` elements for retypesetting.

| Variant | Outlined (production) | Editable |
|---|---|---|
| Wordmark navy | [`logos/mesto-wordmark-outlined.svg`](./logos/mesto-wordmark-outlined.svg) | [`logos/mesto-wordmark.svg`](./logos/mesto-wordmark.svg) |
| Wordmark reverse | [`logos/mesto-wordmark-reverse-outlined.svg`](./logos/mesto-wordmark-reverse-outlined.svg) | [`logos/mesto-wordmark-reverse.svg`](./logos/mesto-wordmark-reverse.svg) |

**Minimum size.** 60 px wide on screen (cap-height ~10 px). Below that, fall back to the mark.

**Do not** condense, italicise, outline, or apply effects (shadow, glow, gradient) to the wordmark.

### 2.3 No lockup

> **Mark and wordmark are never combined.** The brand uses one or the other in any given context — never both side-by-side or stacked. Pick the right element for the surface and use it alone.

- Use the **mark** for: favicon, app-icon, social avatar, watermark, small thumbnails, places where the cyrillic word would be illegible.
- Use the **wordmark** for: header, footer, document headers, presentation title slides, signage, business cards, anywhere the brand name needs to be read.

Do not produce or commission "mark + word" lockup variants. They are not part of the identity.

### 2.4 Misuse

| Don't | Reason |
|---|---|
| ❌ Combine mark + wordmark into a lockup | The brand uses one or the other, never both |
| ❌ Recolour the mark in non-brand colors | Identity dilution |
| ❌ Stretch / skew the M | Breaks the Inter Bold geometry |
| ❌ Outline the solid M (use the mono variant instead) | Inversion creates legibility issues at small sizes |
| ❌ Place the mark on busy photography without overlay | Low contrast |
| ❌ Pair the wordmark with another typeface as a tagline | Use Fira Sans for everything |
| ❌ Tilt or rotate the wordmark | Studio voice is grounded, not playful |
| ❌ Animate the M with morph / shape transforms | Quiet motion only — fades and reveals |

---

## 3. Color

### 3.1 The single brand color

**Brand Navy** — `#071246` — is the only saturated color in the system. It is used for:

- Logo fill
- Primary buttons and brand CTAs
- Hero overlay (`navy / 65%`)
- Active navigation pill
- Footer and CTA section background (full-bleed)

Pantone & print equivalents:

| System | Value |
|---|---|
| HEX | `#071246` |
| RGB | `7 / 18 / 70` |
| HSL | `229° / 82% / 15%` |
| CMYK (coated) | `100 / 95 / 40 / 65` |
| Pantone (closest) | `Pantone 2768 C` |

### 3.2 Supporting neutrals

| Role | Hex | Use |
|---|---|---|
| Off-white | `#FAFBFD` | Page background |
| Pure white | `#FFFFFF` | Card surface |
| Hairline | `#DFE3EE` | Borders |
| Mute | `#EDF0F6` | Secondary surface, skeleton |
| Body | `#1F2438` | Primary text |
| Body muted | `#6F7B9C` | Secondary text |

The neutrals are **cool-leaning** (228° hue family). Do not introduce warm greys — they fight the navy.

### 3.3 Functional only

| Role | Hex | Use only for |
|---|---|---|
| Destructive | `#EE5959` | Errors, delete confirmation |

**No accent color** is part of the brand. Never add green/orange/yellow as a "highlight." Hierarchy is built with weight, scale, and the navy alone.

### 3.4 Color ratio

On any single screen or page:

- ~**70%** white / off-white surface
- ~**25%** navy (CTAs, sections, mark)
- ~**5%** muted greys (borders, secondary text)

Photography and project visuals are exempt — they are content, not chrome.

---

## 4. Typography

The brand runs on **two typefaces**, each with a strict scope:

| Role | Font | Where it appears |
|---|---|---|
| **Logo** | Inter Bold (700) | The mark (М) and the wordmark «МЕСТО» — only in the logo, never in body text |
| **Site / body / UI** | Fira Sans (400 / 500 / 600 / 700) | Headlines, paragraphs, navigation, captions, eyebrows, code blocks |

### 4.1 Logo type — Inter

**Inter** — Rasmus Andersson, 2016. Variable family with full Cyrillic support. Used at weight **700 (Bold)** only.

The М letterform is a tight geometric grotesque with a shallow V apex — distinct from Fira Sans on purpose, so the logo reads as a separate sign rather than just typeset text.

Inter is *not* loaded by the live site for body text. Instead, the logo is shipped as **outlined SVG paths** ([`mesto-mark.svg`](./logos/mesto-mark.svg), [`mesto-wordmark-outlined.svg`](./logos/mesto-wordmark-outlined.svg)) so no font dependency reaches the browser.

### 4.2 Body type — Fira Sans

**Fira Sans** — Mozilla / Carrois Apostrophe, 2014. Loaded via Google Fonts (`next/font/google`), subsets `latin` + `cyrillic`.

Use weights: 400 Regular, 500 Medium, 600 SemiBold, 700 Bold. **No italics.**

Fallback stack: `Fira Sans, system-ui, sans-serif`.

### 4.2 Voice in type

| Style | When |
|---|---|
| Display 600 | Hero, page titles |
| H2 600 | Section heads |
| Body 400, line-height 1.625 | Paragraphs |
| Wordmark 600, +0.15em, uppercase | Logo wordmark, eyebrows |
| Micro 600, +0.15em, uppercase | Footer category labels, table headers |

### 4.3 Numbers and IDs

The site uses zero-padded ordinals (`01`, `02`, …) for the approach steps and direction cards. Treat numerals as a brand element: always 2-digit, always semibold, always primary navy.

---

## 5. Voice & copy

### 5.1 Tone

> Calm, confident, factual. A senior studio that does not need to shout.

The studio is a **production partner** for brands and businesses. The voice is that of a project lead in a kick-off — informed, structured, dry without being cold.

| Do | Don't |
|---|---|
| Берём на себя полный цикл проекта | Создаём магию для бренда |
| Контролируем сроки, бюджет и качество | Меняем мир дизайном |
| Работаем системно, с прозрачной коммуникацией | Креативим без границ |
| Концепции сезонных и флагманских витрин | Воу-эффект для ваших клиентов |

### 5.2 Vocabulary

**Use:** проектирование, производство, реализация, концепция, коммерческое пространство, ритейл, оборудование, бюджет, сроки, монтаж, экспозиция, кураторские пространства.

**Avoid:** «дизайнерский», «креатив», «инновационный», «уникальный», «фишка», «крафт», «вайб», «продакшн» (use «производство»), «лук», «феерия». Anglicisms are tolerated only when they are the standard term in the field (Pop-Up, лофт, ритейл).

### 5.3 Sentence shape

- Short, declarative. Subject — verb — object.
- One idea per sentence. Lists where possible.
- Numbers spelled as digits (`4 направления`, not `четыре направления`).
- Use the studio "we" (Мы / Берём / Контролируем) — never "the studio in third person."
- Russian quotation marks: «ёлочки», never `"straight"`.
- Em-dash (`—`) with thin spaces, not hyphen.

### 5.4 Microcopy templates

| Surface | Pattern |
|---|---|
| CTA | «Обсудить проект», «Отправить запрос», «Смотреть» |
| Section eyebrow | UPPERCASE, +0.15em, муted-foreground |
| Form errors | Краткая фраза, что именно не так. Без восклицательных знаков. |
| 404 | «Страницы нет. Перейдите в портфолио или напишите нам.» |
| Empty state | «Здесь пока ничего нет.» — без эмодзи и юмора |

---

## 6. Photography & imagery

### 6.1 Subjects

- Real, completed objects on real sites — Pop-Up booths, vitrines, exhibition stands, museum installations.
- Empty interiors before mounting — process documentation.
- Detail shots: edges, joints, materials, finishes.
- People only when they bring scale (a visitor in a museum hall, a worker during install).

### 6.2 Treatment

- Natural light when possible. Honest white balance, no Instagram filters.
- Slight cool tilt to match the brand's cool-grey neutral system.
- No HDR, no tilt-shift, no film grain.
- Avoid stock photography entirely.

### 6.3 Cropping in UI

- Hero: 16:9 to 16:7, navy `/65` overlay always applied.
- Portfolio grid: 4:3, no overlay.
- Detail blocks: 1:1 or 3:4.

---

## 7. Logo and brand in context

### 7.1 Web

- Header: wordmark only (16 px, +0.15em).
- Favicon: mark on `#F5F5F5` (PWA) or transparent (browser tab).
- OG image: 1200 × 630 with mark + wordmark + tagline on navy. Source in [`logos/og-template.svg`](./logos/og-template.svg).

### 7.2 Print & signage

- Business card: mark front, wordmark + contacts back. Stock: uncoated 350 g/m², edge-painted in brand navy if budget allows.
- Letterhead: mark top-left at 24 mm, wordmark beneath at 12 mm cap-height.
- Site signage: wordmark on a white-on-navy panel, no border. For small applique (badges, hangtags) use the mark alone.

### 7.3 Email signature

```
Имя Фамилия
Роль · МЕСТО
hello@mp-llc.ru · +7 (499) 190-60-50
mp-llc.ru
```

Plain text, Fira Sans 14 px / 1.5. No image signatures, no quotes, no banners.

### 7.4 Telegram / social handles

- Primary contact: `@dansheb` (Telegram).
- If a brand handle is created in the future, register `@mesto_studio`. Avatar = mark on `#F5F5F5`.

---

## 8. Legal & contact

| | |
|---|---|
| Legal name | МЕСТО |
| Email | hello@mp-llc.ru |
| Phone | +7 (499) 190-60-50 |
| Address | Москва, ул. Щукинская, д. 2 |
| Telegram | https://t.me/dansheb |
| Yandex Maps | https://yandex.com/maps/-/CPQv6Pkm |

Mandatory copyright line: `© [year] МЕСТО. Все права защищены.`

---

## 9. Quick reference card

```
Color    : #071246 (Brand Navy) on #FAFBFD (Off-white)
Type     : Fira Sans · 400 / 500 / 600 / 700 · no italic
Wordmark : МЕСТО · 600 · uppercase · letter-spacing 0.15em
Mark     : Solid M, Inter Bold (700) letterform, fill #071246
Radius   : 6 px (rounded-md)
Shadow   : 0 2px 6px rgba(0,0,0,0.08)
Voice    : Calm, factual, partner-tone. We are a production studio.
```