Márkakézikönyv
Mit szabad, mit nem.
Ez a dokumentum azoknak szól, akik a Forrást építik vagy róla írnak: designereknek, fejlesztőknek, szövegíróknak, marketingeseknek. A márka ereje a részletekben van. Egy rosszul választott szín, egy elfeledett dőlt betű, egy hibás hangvétel — és máris úgy fest a termék, mint bármelyik másik szürke kkv-portál. Ezt szeretnénk elkerülni.
Tartalom
01
A márka.
A Forrás • egy magyar kkv-knak szóló forráskereső — pályázatok, kedvezményes hitelek, tőkeprogramok, adókedvezmények. Egy szóval: nem keresőmotor, hanem ajánlórendszer. Nem listáz, hanem megtalál.
A név
Forrás • — magyar szó, ami egyszerre jelent „pénzügyi forrást" és „természetes vízforrást". Egyszerre konkrét és metaforikus. Egyetlen szó, könnyen mondható, magyar fülnek erős és nem külföldies. Domain: forraspont.eu.
A pont (.) a logóban a vízforrás cseppje és a digitális pontosság jele egyszerre. Ne dekoráció — szándékos elem.
A márkaígéret
A márka karaktere
Képzelj el egy okos, higgadt barátot, aki véletlenül szakértője a magyar és uniós forrásrendszereknek. Nem leereszkedő, nem hivatalos, nem agresszív. Nyugodt, konkrét, melegszívű. Tudja a választ, de nem teszi a vállalkozó dolgát feleslegesen bonyolulttá.
A Forrás • nem egy „AI startup". Nem egy „platform". Nem egy „ökoszisztéma". Egy szolgáltatás, ami segíti a magyar kkv-kat hozzájutni a járuló pénzhez. Ezt a különbséget mindig tartsuk fejben — különben a fél év múlva olyanok leszünk, mint a többi.
A megkülönböztető pont
A versenytársak (palyazatfigyelo, palyazatmenedzser, TenderMatch) pályázatokat listáznak. Mi csomagokat építünk — egy beruházáshoz a támogatást, a hitelt, a garanciát, az adókedvezményt és a tőkeforrást együtt. Ez a „stack" az, amiről senki más nem beszél, és amiért a Forrás • létezik. Minden vizuális, hangbeli, UI-döntés ide vezet vissza.
02
A logó.
A wordmark Fraunces serifben, kis kezdőbetűs „Forrás •" felirat — egy oxblood ponttal mellette. Egyetlen variáció. Nem ikon, nem külön mark. A betűk maguk a logó.
A wordmark négy háttéren
Cream (alap) és ink (sötét) háttéren a pont marad oxblood. Stone háttéren is. Csak oxblood háttéren váltjuk cream-re a pontot — különben nem látszik. Más háttérszín nem létezik.
Méretek
Szabályok
A pont mindig az „s" betű alapvonalához igazítva, kb. 4-6px-nyi térközzel utána. A pont mérete a wordmark x-magasságához arányos, kb. 30-35%-a. Soha ne dőljön, ne villogjon, ne legyen körberajzolva.
A két elem (Forrás • + pont) együtt a logó. Soha külön nem használjuk őket. A pont nélküli „Forrás •" felirat nem a Forrás • logója, csak egy szó.
Minimum clearspace: a pont átmérőjének kétszerese a logó körül minden irányban. Ennél közelebb másik elem ne kerüljön.
03
A négy szín.
Nem öt, nem hat, nem hét árnyalat. Négy szín. A tonális hierarchia opacitással jön létre — ez tartja össze a rendszert, ez akadályozza meg, hogy 18 különböző szürke szülessen a fejlesztés során. Ne adj hozzá semmit.
#F4EEE3
#E2DAC6
#1A1714
#8B2331
↑ kattints egy színre a hex-érték másolásához
Mire használjuk
Az alap. Minden oldal háttere.
A legtöbb felület ezen ül. Meleg, papírszerű, nem fehér. A fehér (#FFFFFF) tilos — a cream a brand alapja.
Másodlagos zónák, kártyák.
Vizuálisan elválasztott szekciók, side-cardok, idézőblokkok. Ne legyen kép. A cream és stone közti különbség minimális, de tudatos.
Minden szöveg. Minden elsődleges gomb.
Nem fekete, hanem meleg sötét. A halványabb szöveg opacitással jön létre (ink-70, ink-50, ink-25) — nem külön színnel.
Hangsúly. Csak hangsúly.
Eyebrow vonalak, dőlt em-ek, brand pont, sürgős határidő, hover-állapot, link aláhúzás. Soha ne dekoratív. Ha kétséges, használj inket helyette.
Opacity-derived tones
Ha halványabb verzióra van szükséged, ne keverj új színt. Használd ezeket:
04
Három betűtípus.
Háromnak tűnik soknak, de mindegyik más szerepet játszik, és sosem keverjük őket. Fraunces a kiemeléshez. Geist a folyószöveghez. Geist Mono a kisbetűs label-ekhez. Más nem létezik a rendszerben.
Fraunces · a kiemelő serif
Súly: alapból 400 (regular). 500 (medium) csak ahol súlyt kell adni — pl. egyenes „bold" kiemelésre prózában.
Dőlt: oxblood színnel, kiemelésre. Ne dekoráció. Részletek a hangvétel-szekcióban.
Geist · a folyószöveg sans
Naponta végigfutunk a 42 hazai és uniós forráson. Az AI elolvassa a 120 oldalas felhívásokat helyetted, és kiszűri, ami tényleg rád illik. Két perc — ennyit kérünk, hogy elindulhassunk.
Súly: 400 (regular) folyószöveghez, 500 (medium) inline kiemeléshez (b, strong). 300 (light) és 600 (semibold) tilos.
Méret: 15-17px folyószövegben, 14px secondary kontextben, 13px legkisebb még olvasható.
Geist Mono · a kis label
Erős találat · 47 nap múlva · GINOP_Plusz-1.2.5-25
Súly: 400 alapból, 500 hangsúlyhoz.
Soha: folyószöveghez, gomb-feliratokhoz, címhez. Csak label-ekhez és technikai részletekhez.
Méretskála
A dőlt betű külön téma
A Fraunces italic — különösen oxblood színben — a leghangsúlyosabb vizuális eszközünk. Pontosan azért működik, mert ritkán használjuk.
- ★Headline-onként maximum egy dőlt em.
- ★Dőlt em mindig oxblood színben — vagy, sötét hátteren, cream.
- ★Folyószövegben dőlt nem hangsúlyhoz használunk, hanem idegen szavakhoz vagy idézethez.
- ★Soha ne legyen egész mondat dőlt. Egy szó, kettő, három. Punctum.
05
A hangvétel.
Ha a Forrás • csak egy hangon szólalna meg, az így hangzana: nyugodt, konkrét, melegszívű. A versenytársak hivatalos zsargonban beszélnek vagy felkiáltójeles ad-spam-ben — a kettő közt a Forrás • megáll, lassít, és normális magyarul mond el dolgokat. Ez a hangvétel a legfontosabb védjegyünk, és a legkönnyebben elromlik.
Az öt elv
Ezeket csináljuk.
- →Konkrét, nem általános. „47 nap. 16 dolog." nem „Hamarosan beadás."
- →Rövid, nem alapos. Minden szót töröljünk, ami nem viszi a mondatot előre.
- →Te, nem Ön. Bizalmas, hétköznapi, közvetlen. Az Ön a hivataloké.
- →Meleg, nem kórházi. „Tudjuk, milyen drága" nem „Felmerülhetnek költségek."
- →Visszafogott hangsúly. Egy dőlt em headline-onként. Punctum.
Ezeket nem.
- ×Felkiáltójel — soha. A magabiztos hang nem kiabál. A kétségbeesett igen.
- ×Bürokratikus magyar. Nem „kapcsán", „vonatkozásában", „tekintettel".
- ×Kérdés-headline, amit rögtön megválaszolunk. „Tudtad, hogy...?" — nem.
- ×Mentegetőzés a technológiára. „Az AI még tanul" nem létezik.
- ×Sürgetés-marketing. „Csak most! Ne maradj le!" nem a mi hangunk.
Konkrét előtte/utána
Pályázati lehetőségek a kkv-szektor számára — fedezze fel innovatív platformunkon!
Hivatalos, általános, idegenül hangzik. „Innovatív platform" — ez a halálszó.
Ne keresd. Megtaláljuk.
Direkt, parancsoló-de-baráti, három szó. Mondja ki helyetted a frusztráció vége.
Tájékoztatjuk, hogy az Ön regisztrációja sikeresen rögzítésre került rendszerünkben.
Ön-forma, passzív szerkezet, három mondat egyetlen szó helyett.
Köszi. Indulunk.
Két szó. Egyenes, melegszívű, semmi felesleges.
Számos pénzügyi forrás állhat az Ön rendelkezésére a vállalkozása növekedésének elősegítése érdekében.
Pufók, üres, „elősegítés érdekében" — bürokrata-magyar.
Három forrás, ami együtt működik.
Konkrét szám, konkrét állítás, és egy ígéret. Ennyi.
Szavak, amiket elkerülünk
Magyar-specifikus
Idézőjelek: mindig „magyar", soha „english" vagy 'apostrof'. A magyar idézet az alacsony-9 nyitó és magas dupla záró: „...".
Kkv: kisbetűvel. A KKV nagybetűsen formálisabb és hivatalosabb hangulatú — kerüljük.
Számok: millió Ft helyett „M Ft" rövidítés (100M Ft). Milliárd Ft helyett „Mrd Ft" (2 Mrd Ft). Forint kiírva csak akkor, ha tipográfiai okból szebb.
Lehet/nem lehet: „lehet" (modalitás), de „nem lehet" helyett „nem fog" vagy „nem működik" — direktebb.
06
UI elemek.
A komponensek visszafogottak — egyetlen vizuális trükk se. A formák, a sarokszögek, az árnyékok mind ugyanazok az egész terméken. Ha új komponens kell, először ellenőrizd, hogy a meglévő nem oldja-e meg.
Gombok
A primary gomb hover-en oxblood-ra vált. A secondary inverze sötétedik. A ghost csak aláhúzás-színt változtat. Mindhárom 100px border-radius (pill shape). Sosem szögletes.
Chipek (single + multi-select)
Selected = ink kitöltés, cream szöveg. Hover-en csak a border válik ink-re. Min height 48px (mobil érintő-cél), min padding 12px függőlegesen, 20px vízszintesen.
Status badgek
Mono font, caps, 0.12-0.14em letter-spacing. „Új" kiemelt oxblood, „Felvettem" ink, „Urgent" oxblood-tinted, „Megnézve" semleges.
Szöveges input
A nagy inputok serif fontot kapnak — ez különbözteti meg a hétköznapi form-tól, és illeszkedik a hero-tipográfiához. Csak az alap kerete (border-bottom) jelenik meg, doboz nincs körülötte.
Kártyák
Egy kerete (1px var(--stone)), egy sarokrádiusza (8-12px), egy hover-állapota. Több variációt ne találj ki. Az árnyék finom és csak a hover-kor lát (subtle box-shadow, opacitás < 0.2).
07
A mozgás.
Az animáció itt nem dekoráció. Egy mozgás akkor van, ha információt közöl — egy elem érkezett, egy állapot változott, egy folyamat halad. Ha csak szépítésre kéne, ne legyen.
A timing-függvény, amit mindig használunk:
Egyetlen ease-out görbe az egész rendszeren. Lágy, magabiztos, sosem rugalmas. Ne ess kísértésbe a bounce-okkal és overshoot-okkal.
Időtartamok
- ▸150-200ms — gombok, chip-állapotok, hover-átmenetek. „Reagált."
- ▸500ms — szekció-átmenet, step-váltás, content reveal. „Belép."
- ▸800-1100ms — staggered stack-bar animáció, intro-animációk a landingen. „Felépül."
Amit nem animálunk
Folyamatos animációk (pulse, rotate, shimmer) csak loading-állapotban. Hover-effektek sosem mozgatják a teljes elemet jelentősen (max 1-2px translate-Y). Auto-játszó videók nincsenek. Parallax-scroll nincs. Lottie-animáció a brand-élményhez nincs.
Reduced motion
Minden animáció prefers-reduced-motion: reduce alatt azonnal kapcsoljon át a végállapotra. Az emberek, akik ezt bekapcsolták, ezt a beállítást komolyan veszik — mi is komolyan vesszük.
08
A hozzáférhetőség.
Két dolog kötelező minden oldalon. Az egyik egy CSS-tulajdonság, ami a felhasználók fele számára életbevágó. A másik egy mindenkire vonatkozó alapelv. A többi része szakmai gondosság.
Az első — color-scheme: light
Ezt a deklarációt minden Forrás • oldalra és emailre be kell tenni. Anélkül a sötét rendszermódot használók (a mobilos közönség jelentős része!) inverziós algoritmussal kapnak egy „dark mode" verziót, ami szétesik — sötét szöveg sötét háttéren, eltűnt kontrasztok, eltört kártyák.
A második — kontraszt
Minden szín-páros megfelel WCAG AA-nak (4.5:1 normál szöveghez, 3:1 nagyhoz). Ink cream háttéren ~13:1 — bőven. Oxblood cream háttéren ~7:1 — bőven. Egy kivételt nem engedélyezünk: oxblood ink háttéren ~2:1, ez nem olvasható szövegként. Sötét hátéren a hangsúly cream legyen, nem oxblood.
Egyebek
Szemantikus HTML. Címeket h1-h6-ban, nem div-ben. Gombokat button-ben, nem div-ben. Linkeket a-ban. Egy oldalon egy h1.
Billentyűzet-navigáció. Minden interaktív elem fókuszálható és aktiválható billentyűzetről. A fókusz-ring látható (browser-default jó kezdés, de ha felülírjuk, akkor visible focus-ring marad).
Érintő-célok. Min 44×44px tappable area. A 48px chip-magasság ebből jön.
09
Email-szabályok.
Az emailek a webnél is konzervatívabb terep. A Gmail és az Outlook a mondatok közepén tudnak megrongálni egy oldalt. Néhány szabály kötelező minden Forrás •-emailre, különben a teljes brand-tapasztalat elmegy.
Light-mode lock
A landing page-eknél is kötelező, de az emailek esetében életbevágó. A Gmail dark mode bizonyos esetekben invertálja a hex-eket — a cream sötétté válik, a sötét szöveg eltűnik. A meta name="color-scheme" és a kettős CSS-fallback nélkül a Forrás •-email szétesik.
Layout — tábla, nem flexbox
Outlook (Word renderer alatt) nem ismeri a flexbox és grid-jelentős részét. A kártyákat <table> elemekkel rendezzük. Igen, 2026-ban is. Igen, ez fáj. Nincs alternatíva.
Színek
A kártyák hátterét #FFFFFF-re (tiszta fehér) tesszük, nem cream-re. Cream egyes klienseknél sárgásan jelenik meg, vagy a dark-mode passz megsemmisíti. A tiszta fehér survives. A többi szín ugyanaz (ink, oxblood, stone).
Subject line
Konkrét, rövid, brand-hangú. Példák, amik működnek:
- →„Itt a három forrás, ami illik rád" — első match email
- →„18 nap a határidőig" — deadline reminder
- →„Új pályázat illik a CNC-beruházásodra" — új match
Felkiáltójel nem létezik. „MOST!", „SOS!", „⚡" — semmilyen körülmény közt.
Preheader szöveg
A subject után megjelenő rövid előnézet. Ne hagyjuk üresen — különben a Gmail az email első sorát teszi ide, ami random lehet. Maximum 80 karakter, brand-hangú, kiegészíti a subject-et:
Pl. subject: „Itt a három forrás" + preheader: „12 fős cég, Debrecen, gép-beruházás — együtt működő csomag"
10
Ezt sose tedd.
Az anti-pattern-ek listája. Ha bármelyiket meglátod a Forráson, az hiba — sürgető hiba. Ezek a dolgok azonnal olyanná teszik a terméket, mint bármelyik másik szürke kkv-portál.
Végül
Ha valami eldöntetlen, és nem találod a választ ebben a dokumentumban: tedd el visszafogottabbra, mint amit először gondoltál. A Forrás • kevésbel többet mond. Ez a recept.