EAP Workshop arculat
Minden EAP Workshop prezentáció vizuális nyelve — fejezetről fejezetre építve az eredeti arculati forrásból.
Logó
Az EAP Workshop logó minden workshop felület jellegzetes jegye — címdiák, szekcióelválasztók, a workshop lista és ez az arculati kézikönyv. Az EAP Online alkmárkája, és kizárólag workshop-jellegű anyagokon használjuk.
Felépítés
- Szövegbuborék. Kör alakú buborék, jobb felső sarkában háromszögletű farokkal — a párbeszéd és a csere jele, minden workshop szíve.
- Két egymásba kapcsolódó fogaskerék. Egy nagy, egy kicsi, tömör fehérrel — a működés, a gondolkodásmód és a jóllét belső mechanizmusát jelképezi.
- EAPWORKSHOP szóvédjegy. Calibri Bold, csupa nagybetű, szoros betűközzel. A szóvédjegy a buborék felett, vízszintes elrendezésben.
Alapszínek
A logó kizárólag két alapszínt használ — bordót és kéket — a jelen és a szóvédjegyen.
Egyszínű változat: Amikor csak egy szín áll rendelkezésre (egyszínű nyomtatás, hímzés, favicon), használd a brand kék #1000C3 színt.
Változatok
Védőtér és minimális méret
Mindig hagyj a logó körül a nagy fogaskerék magasságával egyenlő szabad területet. Soha ne szorítsd szöveghez, élhez vagy képhez.
32px · min48px72px- Workshop prezentáció címdiáin
- Szekcióelválasztó diákon
- Diák láblécében kis méretben
- Workshop lista kártyákon a /workshops oldalon
- Ennek az arculati kézikönyvnek a fejlécében
- Megosztott workshop linkek előnézetein
- Az EAP Online főoldalának hero-jában (az EAP Online kizárólagos felülete)
- Átszínezve, torzítva vagy elforgatva
- Zsúfolt fotón scrim nélkül
- 32 px magasság alatti méretben
- Konkurens logó mellett egyértelmű elválasztás nélkül
Színek
Minden itt dokumentált tömör szín és színátmenet közvetlenül a forrás PDF-ből származik. Semmi nincs kitalálva — csak az kerül katalógusba, ami a workshop prezentációban tényleg ott van.
A. Felületek
Hátterek, amelyekre a tartalom kerül. Két tömör felület, három színátmenetes felület, és — bizonyos esetekben — teljes felületű fotó.
Háttér-ritmus
Váltogasd a fehér és a színes teljes oldal hátteret, hogy görgetés közben a diák tisztán elkülönüljenek egymástól. Fehér dia után lehetőleg ne jöjjön újabb teljesen fehér hátterű dia — ha az oldalon diagram, színes panel vagy illusztráció van, bátran használd a halvány levendula #EAE1FC felületet alapértelmezett színes opcióként. SZIGORÚ SZABÁLY: két egyforma színes háttér SOHA nem lehet egymás után sem — ha két egymást követő dia ugyanazt a márka színátmenetet (vagy bármely más színes felületet) használná, az egyiket cseréld másik felületre (fehér, levendula vagy más színes opció). A szabály csak a teljes oldalas háttérre vonatkozik; a fotódomináns diák (teljes felületű fotó vagy split-screen képpel) kivételt képeznek, ezek nem számítanak bele a ritmusba.
B. Brand színek
Az öt tömör brand szín. Tipográfiához, kiemelésekhez, ikonokhoz és a színátmenetek végpontjaiként használjuk.
C. Színátmenetek
Hat két-stop lineáris színátmenet. Címdiákon, szekcióelválasztókon, pill dobozokon és kártyákon használjuk.
- #A3308A →
- #1000C3
- #6610F2 →
- #45D0CF
- #FFC107 →
- #6610F2
- #45D0CF →
- #1000C3
- #A3308A →
- #FFC107
- #45D0CF →
- #FFC107
Tipográfia
Egyetlen betűtípus viszi az egész EAP Workshop arculatot — a Calibri. Három súly, mindegyikhez dőlt változat, lefedi az összes diát, címet, címkét és törzsszöveget.
A. A betűtípus
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? · — / @
A Calibri egy humanista talp nélküli betűtípus lágy, lekerekített végződésekkel. Törzsméretben meleg, display méretben éles — pontosan az a hangvétel, amit az EAP Workshop al-márka igényel.
B. Vágások
Hat Calibri vágás van beépítve a projektbe — Light, Regular, Bold, és mindegyik dőlt változata.
C. Tipográfiai skála
A workshop hub-on és a prezentációkon belül használt skála.
D. Felsorolási jelek
A teljes 72 diás forrásban egyetlen felsorolási jel szerepel — a kerek, tömör pont — mindig ugyanabban a Calibri súlyban és méretben, mint a sor, amelyhez tartozik.
- telefon- és internetmentes időszakok
- otthoni iroda, akár csak egy asztal(rész) — fizikai határ
- munkaidő végét lezáró rituálé
- ne csak a munkáról gondolkodj és beszélj — érzelmi határ
- Jel
- • U+2022 · kerek, tömör pont — az egyetlen engedélyezett felsorolási jel.
- Méret
- Mindig azonos a sorral, amelyhez tartozik — diaméretben jellemzően 22–44 pt 1920×1080-as oldalon.
- Szín
- Világos felületen fekete, sötét vagy színátmenetes háttéren fehér.
- Behúzás
- Egy jel-szélességnyi rés a jel és a szöveg között. A tördelt sorok a szöveg alá igazodnak, nem a jel alá.
- Beágyazás
- Csak egy szint. Ha alpontok kellenének, bontsd két külön listára vagy kártyarácsra.
Más jelek, dingbatek, nyilak, pipák, valamint számozott/betűzött prefixek nem használhatók felsorolásokban.
- ✓Calibri minden workshop felületre
- ✓Címek Bold 700-ban
- ✓Törzsszöveg Regular 400-ban
- ✓Light 300 kizárólag nagy display soroknál
- ✓Italic csak kiemelésre vagy idézetre, takarékosan
- ✕Más sans-serif behelyettesítése (Arial, Inter, Helvetica)
- ✕Serif betű bárhol a workshop arculatban
- ✕Glifek nyújtása, sűrítése vagy körvonalazása
- ✕Light használata törzsméretben — elveszti a kontrasztot
- ✕Kettőnél több súly egy bekezdésen belül
Képkezelés
A fotók három jól elkülönülő szerepet töltenek be a workshop prezentációban. Minden szerephez fix elrendezés, fix scrim-szabály és fix szövegszín tartozik — improvizálni nem szabad. KRITIKUS: a forrás PDF-ből kivágott vagy kimentett képet TILOS újra felhasználni. Minden fotót frissen kell behozni a képkönyvtárból vagy az Unsplash-ről, az adott dia jelentéséhez választva.
A. Split — szöveg + kép
- telefon- és internetmentes időszakok
- otthoni iroda, akár csak egy asztal(rész)
- munkaidő végét lezáró rituálé
- ne csak a munkáról gondolkodj és beszélj
- telefon- és internetmentes időszakok
- otthoni iroda, akár csak egy asztal(rész)
- munkaidő végét lezáró rituálé
- ne csak a munkáról gondolkodj és beszélj
Fent: alapeset — szöveg balra, fotó jobbra. Lent: felcserélve — fotó balra, szöveg jobbra. Egymás utáni split diáknál váltogasd.
Headline-os, felsorolásos tartalmi diáknál. A dia pontosan fele-fele arányban oszlik: alapesetben a szöveg balra, a fotó jobbra kerül — de az oldalak felcserélhetők. Ha több ilyen dia követi egymást, váltogasd a fotó oldalát a vizuális ritmusért.
- Mindig 50 / 50 felosztás
- Alapesetben: szöveg balra, fotó jobbra — az oldalak felcserélhetők
- Ha több ilyen dia követi egymást, váltogasd a fotó oldalát
- Cím + max. 3–5 bullet
- Embert, környezetet vagy termékrészletet ábrázoló fotó
- Fekete szöveg fehéren
B. Teleoldalas — fejezetelválasztó
Fejezet vagy szekció megnyitásához. A fotó kitölti az egész oldalt élig, a szöveg alatt nincs lekerekített fehér flekk vagy panel.
- A fotó teljes oldalon, élig
- A szöveg alatt nincs fehér scrim vagy lekerekített panel
- A szöveg színe mindig fehér
- Csak olyan fotót használj, amin van elég nyugodt felület a címnek
- Kizárólag fejezet / szekció megnyitóra — nem body tartalomra
C. Háttérkép + halvány scrim
Az éber tudatot két komponens alkotja: önregulációs figyelem, valamint nyitott, elfogadó orientáció a jelen pillanat felé.
Ha a fotó a dia háttere, de body tartalomnak olvashatónak kell maradnia. A szöveg mögött mindig egy halvány fehér, lekerekített flekk van, hogy tisztán olvasható maradjon.
- A szöveg alatt mindig halvány fehér, lekerekített flekk
- A flekk lekerekítése azonos a többi felületével
- A flekken belül a szöveg színe mindig fekete
- A flekk a dián belül helyezkedik el — nem fut élig
- A flekket tartsd elég keskenyen, hogy a fotó körülötte lélegezni tudjon
| Mikor | Elrendezés | Scrim | Szövegszín |
|---|---|---|---|
| A Headline + felsorolás, kísérő fotóval | 50 / 50 felosztás — az oldalak felcserélhetők, egymást követő diákon váltakozva | Nincs | Fekete fehéren |
| B Fejezet / szekció megnyitó | Teleoldalas fotó, élig | Nincs | Fehér |
| C Body tartalom fotó háttéren | Teleoldalas fotó + lekerekített flekk benne | Halvány fehér, lekerekített flekk | Fekete |
Illusztrációk és diagramok
A workshop deck minden diagramja egyedi rajz — de mind ugyanazon a felületen ülnek, ugyanazt a színszabályt követik, és ugyanabból az elemtárból építkeznek. A színátmenet szinte mindig a legerősebb látható elem; a halvány lila felület a második. KRITIKUS: a forrás PDF-ből diagramot, nyilat, kártyát vagy szövegblokkot beilleszteni, kivágni vagy screenshotolni TILOS. Minden diagramot, ábrát és elemet az elemtárból, natívan kell újra felépíteni.
A. Felületek
Az illusztrációs oldalak három felület egyikén ülnek. Csak tiszta 50 / 50-es osztásban keverhetők — soha nem negyedekben vagy esetleges flekkekben.
Alapértelmezett illusztrációs háttér — amikor maga a diagram viszi a színt.
Lágy felület, amely levegőt ad a színátmenetes formáknak. Az illusztrációs rendszer domináns háttere.
Az egyik felén fehér, a másikon #EAE1FC — általában szöveg a fehéren, diagram a liláson. Mindig pontosan félbe vágva, soha nem aszimmetrikusan.
B. Színszabályok
Két szabály lefedi az összes diagramon szereplő összes formát. Más szín nem megengedett egy illusztráción belül.
Minden vonalként rajzolt elem — tengely, görbe, kapcsoló, pontozott elválasztó, döntési fa — mindig tömör fekete. Soha nem színátmenetes vonal, soha nem márkaszínű vonal.
Minden tele grafika — pill, kártya, buborék, nyíl, sáv — egyetlen márkaszínátmenettel van kitöltve. Soha nem lapos márkaszín, soha nem áttetsző tint.
C. Elemtár
Nyolc újrahasznosítható forma építi fel a deck összes diagramját. Kombinálhatók, de új, kilencediket nem találunk ki.
Lekerekített téglalap, márkaszínátmenettel kitöltve. Fehér szöveg benne. A munkagép — címkék, kiemelések és rácselemek.
Kör, márkaszínátmenettel kitöltve. Fehér, középre igazított felirat. Csomópont a koncepciódiagramokon.
Két koncentrikus színátmenetes buborék — külső és belső — a tartalmazás kifejezésére (pl. fókusz, befolyási kör).
Vékony fekete tengelyek, vékony fekete görbe, fekete tengelyfeliratok. Egy kis színátmenetes pill vagy nyíl ülhet egy horgonypontnál akcentusként.
A kártyák, állomások, vagy okok és okozatok közötti standard nyíl egy vékony fekete chevron — vízszintes vonal kis chevron heggyel, kb. 2.2 strokeWidth, lekerekített vonalvégekkel. Ez az EGYETLEN megengedett nyíl-stílus a workshop diagramokban. Soha ne használj vastag, kitöltött nyilat, színátmenetes nyilat vagy színes nyílmarkert — ez a szabály felülír mindent, amit forrás PDF-ekben látsz.
Vízszintes kapszula a meleg színátmenettel kitöltve, függőleges fekete pontozott vonallal kettéosztva. Feliratok minden fél felett.
Egy színátmenetes pill fejléc ül egy lekerekített lila panel felett, amely sötét törzsszöveget tartalmaz. Egy kis színátmenetes háromszög köti össze őket.
2 × 3 vagy 3 × 2 mozaik színátmenetes kártyákból, lila felületen. A kártyák a hat márkaszínátmenet között váltogatnak — soha nem ugyanaz a színátmenet kétszer egymás után.
D. Szabályok
- Használj fehér, #EAE1FC, vagy tiszta 50 / 50-es osztott felületet
- Tartsd minden vonalat és tengelyt tömör feketének
- Tölts ki minden formát a hat márkaszínátmenet egyikével
- Variáld, melyik színátmenet melyik formára kerül — ne legyen egyetlen színátmenet az egész oldalon
- Hagyd, hogy a lila háttér vigye a vizuális súlyt
- Ne használj a fehéren és a #EAE1FC-n kívül más háttérszínt
- Ne húzz görbét vagy tengelyt márkaszínnel vagy színátmenettel
- Ne tölts ki formát lapos márkaszínnel (használj színátmenetet)
- Ne oszd a hátteret negyedekre vagy aszimmetrikus flekkekre
- Ne tegyél fotót diagram mögé — illusztráció és fotó soha nem osztozik egy oldalon
E. Ikonok
Ikon ritkán szerepel a workshop deckben — de amikor mégis, ugyanazt a logikát követi, mint a vonalas illusztrációk. Tisztán kontúr, fekete vagy márkaszínátmenet, soha nem kitöltött.
Minden ikon a lucide-react könyvtárból jön. Már be van építve a projektbe, és tiszta, geometrikus vonalas ikonokat ad, amelyek illeszkednek az illusztrációs rendszerhez. Ne keverj bele Font Awesome-ot, Material Iconst, emojit vagy kézzel rajzolt SVG-t.
Az ikonok vonalas grafikák — így a vonalas színszabályt követik: tömör fekete fehéren vagy lila felületen. A márkaszínátmenet csak kontúrként (SVG linearGradient stroke) megengedett, kitöltésként soha.
- strokeWidth · 1,6 (egységesen a teljes deckben)
- size · 20–32 px szövegben, 40–56 px hero ikonként
- color · Alapból #000000, vagy url(#brand-gradient) az akcentus ikonoknál
- Minden ikont a lucide-react-ből használj
- Tartsd a strokeWidth-et 1,6-on az egész deckben
- Színezd az ikonokat tömör feketére, vagy márkaszínátmenetes kontúrral
- Ikont mindig címkével párosíts — soha ne legyen önmagában kontroll
- Méretezd az ikont a körülötte lévő szöveghez vagy pillhez
- Ne keverj más könyvtárból származó ikont (Font Awesome, Material, emoji)
- Ne tölts ki ikont tömör márkaszínnel
- Ne tegyél rá árnyékot, glow-t vagy 3D effektet
- Ne használj több színű vagy szkeumorfikus ikont
- Ne méretezz egyetlen ikont arányaiból kibillentve a többihez képest
Záró oldal
Minden EAP Workshop anyag egyetlen fix, nem szerkeszthető záró oldallal végződik. Cián fotós háttéren három, kéz által tartott sárga korong — QR-kód, szomorú smiley, mosolygó smiley — hívja visszajelzésre a résztvevőket. Az EAP Webinar anyagokhoz NEM tartozik ez az oldal.
Minden workshop anyag ezzel a QR-kódos záró oldallal végződik. Automatikusan kerül a végére, és nem vehető le.
A webinar anyagok SOHA nem használják a QR-oldalt. Helyette egy külön „Thank you for your attention!” záró oldal kerül a végükre a márka színátmenetes hátterén — nagy fehér headline, WebinarLogo bal felül, copyright sor alul. Ez az oldal automatikusan kerül a végére, és ez az egyetlen érvényes webinar-zárás.