Celostna grafična podoba projekta Odkrivaj Kamnik

Projekt Odkrivaj Kamnik združuje digitalni zemljevid, kolesarske poti in turistično ponudbo v enotno, prepoznavno spletno izkušnjo. Ta stran opisuje osnovna pravila uporabe logotipa, barv, tipografije, ikon in fotografij, da bo nastop projekta usklajen v vseh kanalih - na spletu, v tiskovinah in na terenu.

1. Logotip

1.1 Glavna različica na temnem ozadju

Primarni logotip z belo obrobo in belim napisom Odkrivaj Kamnik uporabljamo na temnih ozadjih, predvsem na kamniški modri #1B3A4F.

Odkrivaj Kamnik

  • Priporočeno ozadje: var(--brand-bg-header) / #1B3A4F.
  • Minimalna višina za digitalni header: 40 px.
  • Minimalna višina za tisk: 15 mm.

1.2 Različica na svetlem ozadju

Logotip brez temnega pravokotnika uporabljamo na belih in zelo svetlih ozadjih (npr. #F5F7FA ali #C3DFED).

Odkrivaj Kamnik

  • Ozadje naj bo vedno svetlo in mirno, brez močne teksture.
  • Ne dodajaj obrob ali senc okoli logotipa - že ima svojo belo konturo.

1.3 Varni prostor in prepovedi

Okoli logotipa pusti vsaj toliko prostega prostora, kot je višina črke »O« v napisu Odkrivajmo. V ta prostor ne postavljaj drugih logotipov, ikon ali besedila.

Logotipa ne smemo:

  • raztezati ali stiskati nesorazmerno,
  • spreminjati barv v ne-blagovne (npr. rdeča, vijolična),
  • dopolnjevati z dodatnimi obrobami, sencami ali efekti,
  • postavljati čez preveč kontrastne dele fotografije.

2. Barvna paleta

Barvni sistem izhaja iz narave Kamniško-Savinjskih Alp: temna modrina gozda in noči, zelena pobočij, hladni toni skal in snega ter nevtralna svetla ozadja.

Vloga Barva HEX RGB CMYK*
Primarna Kamniška modra #1B3A4F 27, 58, 79 66, 27, 0, 69
Sekundarna Kamniška zelena #6D925F 109, 146, 95 25, 0, 35, 43
Akcent Gorska modra #3F708E 63, 112, 142 56, 21, 0, 44
Svetla Ledeno modra #C3DFED 195, 223, 237 18, 6, 0, 7
Besedilo Nevtralna temna #1C242B 28, 36, 43 35, 16, 0, 83
Ozadje Nevtralna svetla #F5F7FA 245, 247, 250 2, 1, 0, 2

*CMYK vrednosti so približne in jih je pred tiskom priporočljivo prilagoditi glede na profil tiskarne.

2.1 Kombinacije modra / bela

  • : modra #1B3A4F + bela tipografija/logotip.
  • Sekcije z veliko besedila: skoraj bela #F5F7FA + gorska modra #3F708E za naslove + temna #1C242B za odstavke.
  • Highlight info box: ledeno modra #C3DFED ozadje + modra ali zelena linija na levi.

3. Tipografija

Tipografski sistem temelji na kombinaciji Montserrat za naslove in navigacijo ter Inter za vse daljše odstavke in obrazce. Oba sta Google Fonts in sta primerna za splet in tisk.

3.1 Hierarhija pisav

  • H1 - Montserrat Bold, 32-36 px, barva #3F708E
  • H2 - Montserrat SemiBold, 26-30 px, barva #1B3A4F
  • H3 - Montserrat SemiBold, 20-22 px
  • Body - Inter Regular, 15-17 px, barva #1C242B
  • Nav / gumbi - Montserrat SemiBold, 15-17 px, velika začetnica ali stavek.

V spletnih obrazcih in tabelah uporabljaj Inter, ker je pri majhnih velikostih najlažje berljiv. Naslove v sekcijah in karticah piši z Montserratom, da ohraniš “turistično” identiteto.

4. Ključni grafični elementi

Barvna paleta

Primarna barva je kamniška modra #1B3A4F
sekundarna pa zelena #6D925F
Dodani sta gorska modra #3F708E in
ledeno modra #C3DFED za ozadja in poudarke.
Vedno poskrbi za dovolj kontrasta med ozadjem in besedilom (temno ozadje + svetlo besedilo ali obratno).

Tipografija

Montserrat za naslove in gumbne napise poudari sodobno, dinamično identiteto turističnega projekta.

Inter zagotavlja berljivost pri daljših besedilih, obrazcih, navigaciji in opisih ponudnikov.

Ikone & motivi

Uporabljaj poenostavljene silhuete pohodnikov, kolesarjev, markacij in vrhov Kamniško-Savinjskih Alp. Ikone naj bodo enobarvne (monoline ali flat), najpogosteje v modri #1B3A4F ali zeleni #6D925F na svetlem ozadju. Na temnem ozadju uporabljaj bele ikone.

Fotografija

Priporočene so fotografije visokega kontrasta z naravnimi barvami (gozd, travniki, kamnite stene, voda). Izogibaj se močno filtriranim slikam. Za izenačen ton lahko dodaš subtilen gorsko moder filter rgba(63,112,142,0.18) čez celo fotografijo.

5. Gumbi in elementi vmesnika

5.1 Primarni gumb

Uporabi se za ključne akcije (npr. oddaja vloge, prijava). Ozadje: zelena #6D925F, besedilo: belo, robovi rahlo zaobljeni. Na hover barvo rahlo potemni ali zamenjaj za gorsko modro #3F708E.

5.2 Sekundarni gumb

Za manj pomembne akcije uporabi bel gumb z obrobo v gorsko modri #3F708E in temnim besedilom. Na hover naj se ozadje zapolni z gorsko modro, besedilo pa postane belo.

5.3 Primer gumba

Oddaj vlogo

6. Dostopnost

  • Kontrast med besedilom in ozadjem naj vedno dosega najmanj razmerje 4,5 : 1 (WCAG AA).
  • Minimalna velikost body besedila na spletu naj bo 15 px.
  • Besedila ne postavljaj neposredno čez zelo razgibane dele fotografij; uporabi svetel ali temen overlay.
  • Vsi logotipi in ikone naj imajo izpolnjen atribut alt (npr. alt="Odkrivaj Kamnik - logotip").