Cinema Wandering
Túlavé kino

Architektúra značky

Jedna materská značka pre medzinárodnú komunikáciu a národné značky pre divákov v jednotlivých krajinách. Symbol je všade rovnaký, mení sa len názov a claim.

Materská značka

Cinema Wandering

Pre partnerov, investorov, distribútorov, nábor a spoločnú platformu (cinemawandering.com, compas, crew). Názov sa píše v Montserrate: „Cinema“ Bold, „Wandering“ Light, verzálky, prestrkanie 0,2 em.

Národná značka

Pre divákov, obce a lokálnych partnerov. Pin + logotyp v Merengue Script + claim v jazyku krajiny. Súbory log dodáva grafik — logotyp sa nikdy nesádze ako živý text.

Národné mutácie

Zoznam je rovnaký ako na webe (zdroj src/build.py). Hotové súbory log existujú zatiaľ pre SK a CZ.

Logo a elementy loga

Značka sa skladá zo symbolu (pin), logotypu (názov) a claimu. Rozostupy a proporcie medzi nimi sú pevné.

1

2

3

1 · Logo symbol — pin s clonou2 · Logotyp · 3 · Claim

Varianty

Horizontálna verzia je predvolená (hlavička, dokumenty, e-maily). Vertikálna patrí do hero sekcií, na plagáty a úvodné obrazovky. Každá existuje v štyroch farebných vyhotoveniach.

Logo A · ZákladnéBiele a bledé pozadie

Logo B · Na tmavéČierne a tmavé pozadie

Logo C · BieleČervené pozadie, fotky

Logo D · ČierneJednofarebná tlač

Vertikálne AZákladné

Vertikálne BNa tmavé

Vertikálne CBiele

Vertikálne DČierne

Logo symbol na pozadí

Samostatný pin používaj tam, kde je málo miesta: ikona aplikácie, favicon, avatar na sociálnych sieťach, značka na mape, vodoznak.

FarebnýSvetlé

Na tmavéTmavé

BielyČervené, fotky

Čierny1-farebne

ČervenýAkcent

Na fotografiiBiele logo, fotka stlmená tmavým prekrytím aspoň 40 %.

Na brandovej červenejLen biele logo. Červené logo na červenej zaniká.

Minimálna veľkosť

40 mmtlač — odporúčané

30 mm

20 mmminimum v tlači

15 mmvertikálne min.

120 pxdigitál · horizontálne

80 pxdigitál · vertikálne

16 pxsymbol · favicon

Pod tieto rozmery claim prestáva byť čitateľný — použi samostatný symbol.

Umiestnenie loga

Logo môže byť v dokumente, na banneri alebo na fotke umiestnené v strede, v ľavom alebo pravom hornom rohu, v ľavom alebo pravom dolnom rohu, alebo vycentrované hore či dole. Dôležité je, aby bolo dostatočne viditeľné a čitateľné.

V strede

Ľavý horný

Pravý horný

Ľavý dolný

Pravý dolný

Dole v strede

Nesprávne použitie

Logo sa nijakým spôsobom nemení. Keď žiadny variant nesedí na pozadie, zmeň pozadie, nie logo.

1

2

3

4

Túlavé kino

5

6

7

8

Základné farby a farebné kódy

Tri základné farby: červená, čierna a biela. Sú dominantnou paletou pre všetky interné aj externé prezentácie a vizualizácie. Kliknutím skopíruješ HEX.

Farebné tóny

Sekundárne písmo · Montserrat

Autorka Julieta Ulanovsky. Písmo pre všetko ostatné — web, aplikácie, dokumenty, prezentácie. Dostupné zadarmo na Google Fonts, podporuje všetky jazyky našich mutácií.

Import: fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap · CSS: font-family: "Montserrat", system-ui, sans-serif

Hierarchia písma

Tlačová hierarchia podľa manuálu 2020 a jej prepočet na web a dokumenty. Pre aplikácie platí typová škála Material 3 v kapitole 06.

Úroveň	Tlač (manuál)	Web / dokumenty	Ukážka
Big headline	Merengue Script 34/30 pt	logotyp ako obrázok
H1 · nadpis stránky	—	Montserrat 700 · 32 px / 1.2	Letné kino
Sub-headline · H2	Montserrat Bold 16/16 pt	Montserrat 700 · 24 px / 1.2	Program na júl
Headline · H3	Montserrat Medium 10/10 pt	Montserrat 500 · 20 px / 1.2	Brezno, amfiteáter
Kicker · nadtitulok	—	Montserrat 600 · 12 px · verzálky · 0,3 em	O nás
Copy text · body	Montserrat Regular 8/11 pt	Montserrat 400 · 16 px / 1.5	Premietame pod holým nebom.
Small	—	Montserrat 400 · 14 px / 1.5	Začiatok o 21:30
Caption	Montserrat Light 6/9 pt	Montserrat 300 · 12 px / 1.5	Foto: archív Túlavého kina

Prvky, ktoré nesú značku

Mimo loga máme niekoľko opakujúcich sa prvkov. Používaj ich striedmo — jeden alebo dva na plochu.

03Základné farbyFarebné kódy · tóny · gradienty

Červená kapitola

Celoplošná červená so zarovnaným číslom a verzálkovým nadpisom. Otvára kapitolu v dokumente, prezentácii alebo sekciu na webe.

plán

beží

2027

Pin ako značka miesta

Na mapách a v zoznamoch lokalít pin nahrádza bodku. Aktívne miesto je farebné a väčšie, ostatné biele.

Kino prichádza k ľuďom

Filmový pás

Perforácia hore a dole (prerušovaná čiara 10/10 px) premení obyčajnú kartu na „políčko filmu“. Len na tmavom pozadí.

1 200+Premietaní

Veľké čísla

Štatistiky tenkým (300) červeným písmom vo veľkej veľkosti, pod nimi verzálkový popis. Iba overené čísla.

Túlavé kino·Toulavé kino·Koborló mozi·Next →

Bežiaci pás názvov

Názvy národných značiek v rade — aktívna biela, pripravované červené, plánované sivé.

VýzvaChceš Túlavé kino
aj u vás?

Červený prechod

Jediný povolený prechod pre plochy: #EB002F → #8F1410 pod 135°. Na výzvy a CTA bloky.

Túlavé auto

Kreslená ilustrácie auta je náš maskot a vizuálna skratka „kino, ktoré prichádza“. Tri vyhotovenia:

• Auto nedeformuj, nezrkadli a nepremaľúvaj inými farbami.
• V aplikácii sa hodí na prázdne stavy („Zatiaľ žiadne premietania“) a úvodnú obrazovku — nie ako ikona.

Fotografia

Skutočné premietania, skutoční ľudia. Fotka má ukázať atmosféru večera — plátno, deky, svetlo projektora, deti v prvom rade.

Ikonografia

Material Symbols (Google) — rovnaká sada na webe aj v aplikáciách, takže celý ekosystém hovorí jedným jazykom. Štýl Outlined, hrúbka 400, grade 0, optická veľkosť 24.

• Farba dedí od textu (currentColor); červená len pre akcent alebo aktívny stav.
• Aktívna položka navigácie = ikona s výplňou (FILL 1), neaktívna = obrys.
• Veľkosti 20 / 24 / 40 / 48 px. Nemiešaj s inými sadami (Lucide, Font Awesome, emoji).

Čo berieme z Materialu a čo zo značky

Farebné role

Vygenerované z brandovej červenej nástrojom Material Color Utilities (varianta Fidelity, neutrálne palety s nulovou sýtosťou) a doladené na farby z manuálu.

Tonálna paleta — primary (červená)

Tonálna paleta — neutral

Komponenty v praxi

Dve obrazovky, dve témy. Všetko sú štandardné komponenty Material 3 — nič vlastné, len značkové tokeny.

21:305G

Program

Tento týždeňRodinnéDo 30 km

Kto je tu dobrý?Brezno · amfiteáterPi 11. 7. · 21:30

Vstupenky

Leto s LucyPoniky · futbalové ihriskoSo 12. 7. · 21:15

Vstup voľný

VlnyHriňová · námestieNe 13. 7. · 21:00

Rezervácia

Program

Mapa

2Vstupenky

Profil

Svetlá · zoznam

21:305G

Program

Tento týždeňRodinnéDo 30 km

Kto je tu dobrý?Brezno · amfiteáterPi 11. 7. · 21:30

Vstupenky

Leto s LucyPoniky · futbalové ihriskoSo 12. 7. · 21:15

Vstup voľný

VlnyHriňová · námestieNe 13. 7. · 21:00

Rezervácia

Program

Mapa

2Vstupenky

Profil

Tmavá · zoznam

14:055G

Nová rezervácia

ObecBrezno

Dátum premietania11. 7. 2027

Počet divákov120

Odhad, podľa neho pripravíme sedenie.

Paušál

Vstupné

Aj s ozvučením pódia

Bufet na mieste

ZrušiťOdoslať

Rezervácia odoslanáSpäť

Svetlá · formulár

14:055G

Nová rezervácia

ObecBrezno

Dátum premietania11. 7. 2027

Počet divákov120

Odhad, podľa neho pripravíme sedenie.

Paušál

Vstupné

Aj s ozvučením pódia

Bufet na mieste

ZrušiťOdoslať

Rezervácia odoslanáSpäť

Tmavá · formulár

Tlačidlá

Na jednej obrazovke najviac jedno plné (filled) tlačidlo — hlavná akcia. Ostatné tonal, outlined alebo text.

Typová škála

Veľkosti a riadkovanie podľa Material 3, písmo Montserrat. Montserrat je širší než Roboto — pri dlhých titulkoch radšej o stupeň menšie.

Tvary a elevácia

Stavové vrstvy (state layers) farbou obsahu: hover 8 %, focus 10 %, pressed 10 %, drag 16 %. Pohyb: cubic-bezier(.2,0,0,1), 200–500 ms. Rešpektuj prefers-reduced-motion.

Tokeny na skopírovanie

CSS premenné v názvosloví Material 3 (--md-sys-color-*) — fungujú priamo s Material Web komponentmi. Pre Flutter / Jetpack Compose zadaj rovnaké hodnoty do ColorScheme, seed #EB002F nestačí (vygeneroval by ružové povrchy).

Kopírovať:root {
  /* Material 3 — Cinema Wandering / Túlavé kino (light) */
  --md-sys-color-primary: #EB002F;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FBCCD6;
  --md-sys-color-on-primary-container: #930019;
  --md-sys-color-secondary: #484848;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E2E2E2;
  --md-sys-color-on-secondary-container: #1A1A1A;
  --md-sys-color-tertiary: #1A1A1A;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #D2D2D2;
  --md-sys-color-on-tertiary-container: #1A1A1A;
  --md-sys-color-error: #BF0024;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD8;
  --md-sys-color-on-error-container: #930019;
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #1A1A1A;
  --md-sys-color-surface-variant: #E2E2E2;
  --md-sys-color-on-surface-variant: #484848;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F5F5F5;
  --md-sys-color-surface-container: #EEEEEE;
  --md-sys-color-surface-container-high: #E8E8E8;
  --md-sys-color-surface-container-highest: #E2E2E2;
  --md-sys-color-surface-dim: #DADADA;
  --md-sys-color-surface-bright: #FFFFFF;
  --md-sys-color-outline: #777777;
  --md-sys-color-outline-variant: #D2D2D2;
  --md-sys-color-inverse-surface: #1A1A1A;
  --md-sys-color-inverse-on-surface: #F1F1F1;
  --md-sys-color-inverse-primary: #FF8986;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

[data-theme="dark"] {
  --md-sys-color-primary: #FF5357;
  --md-sys-color-on-primary: #410006;
  --md-sys-color-primary-container: #EB002F;
  --md-sys-color-on-primary-container: #FFFFFF;
  --md-sys-color-secondary: #C6C6C6;
  --md-sys-color-on-secondary: #303030;
  --md-sys-color-secondary-container: #474747;
  --md-sys-color-on-secondary-container: #E2E2E2;
  --md-sys-color-tertiary: #E2E2E2;
  --md-sys-color-on-tertiary: #1A1A1A;
  --md-sys-color-tertiary-container: #5E5E5E;
  --md-sys-color-on-tertiary-container: #FFFFFF;
  --md-sys-color-error: #FFB3B0;
  --md-sys-color-on-error: #68000F;
  --md-sys-color-error-container: #930019;
  --md-sys-color-on-error-container: #FFDAD8;
  --md-sys-color-surface: #131313;
  --md-sys-color-on-surface: #E2E2E2;
  --md-sys-color-surface-variant: #474747;
  --md-sys-color-on-surface-variant: #C6C6C6;
  --md-sys-color-surface-container-lowest: #0E0E0E;
  --md-sys-color-surface-container-low: #1B1B1B;
  --md-sys-color-surface-container: #1F1F1F;
  --md-sys-color-surface-container-high: #2A2A2A;
  --md-sys-color-surface-container-highest: #353535;
  --md-sys-color-surface-dim: #131313;
  --md-sys-color-surface-bright: #393939;
  --md-sys-color-outline: #919191;
  --md-sys-color-outline-variant: #474747;
  --md-sys-color-inverse-surface: #E2E2E2;
  --md-sys-color-inverse-on-surface: #303030;
  --md-sys-color-inverse-primary: #EB002F;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

Nočná paleta webu

Marketingový web cinemawandering.com je tmavý — ako kino po zotmení. Nočné odtiene sú mierne do modra, aby červená vynikla. V aplikáciách sa nepoužívajú (tam platí neutrálna tmavá téma Material 3).

Hlavička

Cinema Wandering

Menu

EN

Čierny štvorec so symbolom vľavo, názov materskej značky v Montserrate (Bold + Light, verzálky, 0,2 em). Na národných weboch namiesto textu horizontálne logo „na tmavé“.

Prezentácie a dokumenty

• Formát 16 : 9, biele pozadie, logo vľavo hore (horizontálne, základné), číslo strany vpravo dole.
• Kapitola = celoplošná červená strana s číslom a názvom kapitoly (ako v tomto manuáli).
• Tenký červený pruh hore vpravo ako záložka — prevzaté z manuálu 2020.
• Nadpisy Montserrat Bold verzálkami, text Montserrat Regular, popisky Light.

Kliknutím stiahneš SVG priamo z tohto súboru. Vždy preferuj SVG, PNG len tam, kde SVG nejde.

Túlavé kino · horizontálne · základnétulave-kino-SK-horizontal-zakladne.svgTúlavé kino · horizontálne · na tmavétulave-kino-SK-horizontal-na-tmave.svgTúlavé kino · horizontálne · čiernetulave-kino-SK-horizontal-cierne.svgTúlavé kino · horizontálne · bieletulave-kino-SK-horizontal-biele.svgTúlavé kino · vertikálne · základnétulave-kino-SK-vertical-zakladne.svgTúlavé kino · vertikálne · na tmavétulave-kino-SK-vertical-na-tmave.svgTúlavé kino · vertikálne · čiernetulave-kino-SK-vertical-cierne.svgTúlavé kino · vertikálne · bieletulave-kino-SK-vertical-biele.svgToulavé kino · horizontálne · základnétoulave-kino-CZ-horizontal-zakladne.svgToulavé kino · vertikálne · základnétoulave-kino-CZ-vertical-zakladne.svgWandering Point · farebnýwandering-point-color.svgWandering Point · na tmavéwandering-point-color-inverse.svgWandering Point · červenýwandering-point-red.svgWandering Point · čiernywandering-point-black.svgWandering Point · bielywandering-point-white.svg