EAP Workshop vizuelni identitet
Vizuelni jezik svake EAP Workshop prezentacije — gradi se poglavlje po poglavlje iz originalnog izvora brenda.
Logo
Logo EAP Workshop je karakterističan znak svake površine radionice — naslovnih slajdova, separatora sekcija, liste radionica i ovog priručnika brenda. To je podbrend EAP Online, koristi se isključivo na materijalima vezanim za radionice.
Anatomija
- Oblačić dijaloga. Kružni oblačić sa trouglastim repom u gornjem desnom uglu — znak dijaloga i razmene, srce svake radionice.
- Dva zupčanika koja se međusobno spajaju. Jedan veliki, jedan mali, u punoj beloj — simbolizuju mehanizam, način razmišljanja i unutrašnje funkcionisanje blagostanja.
- Wordmark EAPWORKSHOP. Calibri Bold, sva velika slova, čvrst tracking. Wordmark stoji iznad oblačića u horizontalnom rasporedu.
Primarne boje
Logo koristi isključivo dve pune brend boje — bordo i plavu — na znaku i wordmark-u.
Jednobojna varijanta: Kada je dostupna samo jedna boja (jednobojna štampa, vez, favicon), koristi brend plavu #1000C3.
Varijante
Zaštitni prostor i minimalna veličina
Uvek očuvaj margine oko loga jednake visini velikog zupčanika. Nikada ne pritiskaj znak tekstom, ivicama ili slikom.
32px · min48px72px- Naslovni slajdovi radionica
- Slajdovi separatora sekcija
- Podnožja slajdova kao mali mini-znak
- Kartice u listi radionica na /workshops
- Zaglavlje ovog priručnika brenda
- Pregledi deljenih linkova radionica
- Hero početne stranice EAP Online (isključiva površina EAP Online)
- Promenjenih boja, izobličen ili rotiran
- Na užurbanim fotografijama bez scrim-a
- U veličini manjoj od 32 px visine
- Pored konkurentskog loga bez jasnog razdvajanja
Boje
Svaka puna boja i gradijent ovde dokumentovan preuzeti su direktno iz izvornog PDF-a. Ništa nije izmišljeno — katalogizuje se samo ono što već postoji u prezentaciji radionice.
Površine
Backgrounds on which content sits. Two solid surfaces, three gradient surfaces, and — in selected contexts — a full-bleed photograph.
Background rhythm
Alternate white and colored full-slide backgrounds so consecutive slides separate cleanly while scrolling. After a white slide, prefer a non-white surface next — pale lavender #EAE1FC is the default colored option whenever a slide carries diagrams, colored panels, or illustrations. STRICT RULE: two identical colored backgrounds must NEVER appear back-to-back either — if two consecutive slides would both use the brand gradient (or any other colored surface), swap one of them for a different surface (white, lavender, or another colored option). This only applies to full-slide backgrounds; photo-dominant slides (full-bleed photo or split with image) are exempt and don't count toward the rhythm.
Boje brenda
Ovih šest nijansi nikada se ne pojavljuju kao velika puna ispuna u prezentaciji — postoje isključivo kao krajnje tačke četiri gradijenta ispod.
B. Gradijenti
Četiri dijagonalna linearna gradijenta nose celu prezentaciju. Isečci su jednog prelaza od toplog ka hladnom i primenjuju se na zaobljene pravougaonike, pilule i pun separator sekcije.
- #A3308A →
- #1000C3
- #6610F2 →
- #45D0CF
- #FFC107 →
- #6610F2
- #45D0CF →
- #1000C3
- #A3308A →
- #FFC107
- #45D0CF →
- #FFC107
Typography
One typeface carries the entire EAP Workshop identity — Calibri. Three weights, each with an italic, cover every slide, headline, label, and body paragraph.
A. The typeface
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? · — / @
Calibri is a humanist sans-serif with soft, rounded terminals. It carries warmth at body size and stays crisp at display size — exactly the register the EAP Workshop sub-brand needs.
B. Cuts
Six Calibri cuts are shipped with the project — Light, Regular, Bold, and their italics.
C. Type scale
The scale used across the workshop hub and inside the decks.
D. Bullets
Across all 72 slides of the source deck only one bullet glyph is used — the round filled bullet — set in the same Calibri weight and size as the body line it belongs to.
- phone- and internet-free windows
- a home office, even just a corner of the desk — a physical boundary
- an end-of-work ritual that closes the day
- don't only think and talk about work — an emotional boundary
- Glyph
- • U+2022 · round filled bullet — the only allowed marker.
- Size
- Always identical to the body line it belongs to — typically 22–44 pt on a 1920×1080 slide.
- Color
- Black on light surfaces, white on dark or gradient backgrounds.
- Indent
- One bullet-width gap between the marker and the text. Wrapped lines align under the text, not under the bullet.
- Nesting
- Single level only. If a list needs sub-points, restructure it into two separate lists or a card grid.
No other markers, dingbats, arrows, checkmarks, or numbered/lettered prefixes inside bulleted lists.
- ✓Use Calibri for every workshop surface
- ✓Set headings in Bold 700
- ✓Set body in Regular 400
- ✓Reserve Light 300 for large display lines only
- ✓Use italics sparingly, for emphasis or quotes
- ✕Substitute another sans-serif (Arial, Inter, Helvetica)
- ✕Use a serif anywhere in the workshop identity
- ✕Stretch, condense, or outline the glyphs
- ✕Use Light at body size — it loses contrast
- ✕Mix more than two weights in the same paragraph
Image usage
Photographs play three distinct roles in the workshop deck. Each role has a fixed layout, a fixed scrim rule, and a fixed text color — never improvise. CRITICAL: never reuse any image cropped or extracted from a source PDF. Every photo must come fresh from the image library or Unsplash, picked for the slide's meaning.
A. Split — text + image
- phone- and internet-free windows
- a home office, even just a corner of the desk
- an end-of-work ritual that closes the day
- don't only think and talk about work
- phone- and internet-free windows
- a home office, even just a corner of the desk
- an end-of-work ritual that closes the day
- don't only think and talk about work
Top: default — text left, photo right. Bottom: swapped — photo left, text right. Alternate on consecutive split slides.
Used for content slides with a headline and a bulleted list. The slide is split exactly in half: by default text on the left and photo on the right — but the sides may be swapped. When several split slides follow one another, alternate the photo side for visual rhythm.
- Always 50 / 50 split
- Default: text left, photo right — sides may be swapped
- When several split slides follow one another, alternate the photo side
- Headline + max. 3–5 bullets
- Photo of people, environment or product detail
- Black text on white
B. Full-bleed divider — chapter opener
Used to open a chapter or section. The photograph fills the entire slide edge-to-edge, no rounded scrim or panel beneath the text.
- Photo covers the full slide, edge to edge
- No white scrim or rounded panel under the text
- Text color is always white
- Use only photographs with enough quiet area for the title
- Reserve for chapter / section openers — never for body content
C. Background photo + soft scrim
Two components shape mindful awareness: self-regulated attention and an open, accepting orientation toward the present moment.
Used when a photograph is the slide background but body content needs to remain legible. A soft white rounded panel sits behind the text so it always reads cleanly.
- Soft white rounded panel always behind the text
- Panel uses the same corner radius as the rest of the surfaces
- Text color inside the panel is always black
- Panel sits inside the slide — never edge-to-edge
- Keep the panel narrow enough to let the photo breathe around it
| When | Layout | Scrim | Text color |
|---|---|---|---|
| A Headline + bullet list with a supporting photo | 50 / 50 split — sides swappable, alternate on consecutive slides | None | Black on white |
| B Chapter / section opener | Full-bleed photo, edge to edge | None | White |
| C Body content over a photographic background | Full-bleed photo + rounded panel inside | Soft white rounded panel | Black |
Illustrations & diagrams
Every diagram in the workshop deck is custom-drawn for its slide — but they all share the same surface, the same color rule, and the same element library. The gradient is almost always the strongest visible element; the soft lavender surface is the second. CRITICAL: never paste, crop, or screenshot a diagram from a source PDF. Diagrams, charts, arrows, and text blocks must always be rebuilt natively from the element library.
A. Surfaces
Illustration slides sit on one of three surfaces. Mix them only in a clean 50 / 50 split — never as quarters or random panels.
Default illustration background — used when the diagram itself carries the color.
Soft surface that lets the gradient shapes breathe. The dominant background of the illustration system.
White on one half, #EAE1FC on the other — usually text on white, diagram on lavender. Always exactly half and half, never asymmetric.
B. Color rules
Two rules cover every shape on every diagram. There are no other colors allowed inside an illustration.
Anything drawn as a stroke — axes, curves, brackets, dotted dividers, decision trees — is always solid black. Never a gradient stroke, never a brand color stroke.
Anything drawn as a filled shape — pill, card, bubble, arrow, bar — is filled with one of the brand gradients. Never a flat brand color, never a tint.
C. Element library
Eight reusable shapes form every diagram in the deck. Combine them, never invent a ninth.
Rounded rectangle filled with a brand gradient. White text inside. The workhorse — used for labels, callouts and grid tiles.
Circle filled with a brand gradient. White centered label. Used for nodes in concept diagrams.
Two concentric gradient bubbles — outer and inner — to express containment (e.g. focus, circle of control).
Thin black axes, thin black curve, black axis labels. A small gradient pill or arrow may sit at one anchor point as accent.
The standard arrow between cards, stages, or causes and effects is a thin black chevron — a horizontal line with a small chevron head, strokeWidth ~2.2, rounded line caps. This is the ONLY arrow style allowed in workshop diagrams. Never use thick filled arrows, gradient-filled arrows, or colored arrow markers — this rule overrides anything seen in source PDFs.
Horizontal capsule filled with the warm gradient, split by a vertical black dotted line. Labels above each half.
A gradient pill header sits above a lavender rounded panel containing dark body text. A small gradient triangle connects them.
2 × 3 or 3 × 2 mosaic of gradient cards on a lavender surface. Cards rotate through the six brand gradients — never repeat the same gradient twice in a row.
D. Do & Don't
- Use white, #EAE1FC, or a clean 50 / 50 split as the surface
- Keep every line and axis solid black
- Fill every shape with one of the six brand gradients
- Vary which gradient sits on which shape — never one gradient for the whole slide
- Let the lavender background carry the visual weight
- Use any background color other than white or #EAE1FC
- Stroke a curve or axis with a brand color or gradient
- Fill a shape with a flat brand color (use the gradient)
- Split the background into quarters or asymmetric panels
- Use a photo behind a diagram — illustrations and photos never share a slide
E. Icons
Icons are rare in the workshop deck — but when they appear, they follow the same logic as line illustrations. Pure stroke, black or brand gradient, never filled.
All icons come from lucide-react. It is already in the codebase and ships clean, geometric line icons that match the illustration system. Do not mix in Font Awesome, Material Icons, emoji, or hand-drawn SVGs.
Icons are line graphics — so they follow the line-graphics color rule: solid black on white or lavender. The brand gradient is allowed only as a stroke (via an SVG linearGradient), never as a fill.
- strokeWidth · 1.6 (consistent across the deck)
- size · 20–32 px inline, 40–56 px for hero icons
- color · #000000 by default, or url(#brand-gradient) for accent icons
- Use lucide-react for every icon
- Keep strokeWidth at 1.6 across the whole deck
- Color icons solid black, or stroke with a brand gradient
- Pair icons with a label — never use an icon alone as a control
- Size icons to match the surrounding text or pill
- Mix in icons from a different library (Font Awesome, Material, emoji)
- Fill an icon with a solid brand color
- Apply a drop shadow, glow or 3D effect
- Use multi-color or skeuomorphic icons
- Resize a single icon out of proportion with the rest of the slide
Closing slide
Every EAP Workshop deck ends with one fixed, non-editable closing slide. A cyan photographic surface shows three hand-held yellow circles — a QR code, a sad face, a happy face — inviting the audience to share feedback. EAP Webinar decks do NOT include this slide.
Every workshop deck ends with this QR closing slide. It is appended automatically and cannot be removed.
Webinar decks NEVER use the QR slide. Instead they end with a dedicated 'Thank you for your attention!' slide on the brand gradient background — large white headline, WebinarLogo top-left, copyright line at the bottom. This slide is appended automatically and is the only valid webinar ending.