Logo cover
logo-coverClean opener — workshop or webinar logo, centered on white.
Visual Identity · v1
EAP Workshop visual identity
The visual language of every EAP Workshop deck — built one chapter at a time from the original brand source.
01 · The mark
Logo
The EAP Workshop logo is the signature mark of every workshop surface — title slides, section dividers, the workshop list, and this brand book. It is a sub-brand of EAP Online and is used exclusively on workshop-related material.
Anatomy
- Speech-bubble container. A circular bubble with a triangular tail in the upper-right, signaling dialogue and exchange — the heart of every workshop.
- Two interlocking gears. One large, one small, set in solid white — symbolizing mechanism, mindset, and the inner workings of well-being.
- EAPWORKSHOP wordmark. Set in Calibri Bold, all caps, with tight tracking. The wordmark sits above the bubble in horizontal lockup.
Primary colors
The logo uses only two solid brand colors — burgundy and blue — applied across the mark and wordmark.
Burgundy
#A3308A
Blue
#1000C3
Solid fallback: When only one color is available (single-color print, embroidery, favicons), use solid brand blue #1000C3.
Variants
Full color
Default. Use on white, brand cloud (#FAFAFC), and soft pastel surfaces with strong contrast.
White (reversed)
Use on the brand gradient, deep ink, charcoal, and over photo backgrounds — but only where contrast is sufficient.
Clear space & minimum size
Always preserve a margin around the logo equal to the height of the large gear icon. Never crowd the mark with text, edges, or imagery.
Clear space = gear height on all sides
32px · min48px72px Where to use
- Workshop deck cover slides
- Section divider slides
- Slide footers as a small mini-mark
- Workshop list cards on /workshops
- This brand book header
- Shareable workshop link previews
Where not to use
- The EAP Online homepage hero (that is EAP Online's exclusive surface)
- Recolored, distorted, or rotated
- On busy photos without a scrim
- At sizes below 32px height
- Next to a competing logo without clear separation
02 · The palette
Colors
Every solid color and gradient documented here is taken directly from the source PDF. Nothing is invented — only what already exists in the workshop deck is catalogued.
A. Surfaces
Backgrounds on which content sits. Two solid surfaces, three gradient surfaces, and — in selected contexts — a full-bleed photograph.
#FFFFFF
White
Default content slide background.
#EAE1FC
Pale lavender
Soft surface for pastel pill boxes and split-screen panels.
Gradient surface
#A3308A → #1000C3
Gradient surface
#6610F2 → #45D0CF
Gradient surface
#FFC107 → #6610F2
IMG
Photo surface
Full-bleed photograph used as a section background — pair with a tinted scrim so text stays legible.
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.
B. Brand hues
The five solid brand colors. Used for type, accents, icons, and as endpoints of the brand gradients.
#A3308A
Burgundy
Primary warm brand color.
#1000C3
Blue
Primary cool brand color.
#6610F2
Violet
Secondary brand color, central anchor of several gradients.
#45D0CF
Teal
Cool accent.
#FFC107
Amber
Warm accent.
C. Gradients
Six two-stop linear gradients. Use them on title slides, section dividers, pill boxes, and cards.
- #A3308A →
- #1000C3
- #6610F2 →
- #45D0CF
- #FFC107 →
- #6610F2
- #45D0CF →
- #1000C3
- #A3308A →
- #FFC107
- #45D0CF →
- #FFC107
03 · The voice
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
Calibri
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? · — / @
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? · — / @
Calibri
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.
The quick brown fox jumps over the lazy dog.
Calibri Light
Large display lines on quiet surfaces.
300
The quick brown fox jumps over the lazy dog.
Calibri Light Italic
Editorial pull quotes.
300 · italic
The quick brown fox jumps over the lazy dog.
Calibri Regular
Default body text and labels.
400
The quick brown fox jumps over the lazy dog.
Calibri Regular Italic
Inline emphasis and captions.
400 · italic
The quick brown fox jumps over the lazy dog.
Calibri Bold
Headings, eyebrows, the EAPWORKSHOP wordmark, and UI buttons.
700
The quick brown fox jumps over the lazy dog.
Calibri Bold Italic
Rare — strong inline emphasis inside bold headings only.
700 · italic
C. Type scale
The scale used across the workshop hub and inside the decks.
Display
EAP Workshop
H1
Workshops that travel.
H2
Built for sharing in one link.
H3
A single visual language.
Lead
Interactive, shareable webinars in a unified EAP Online visual identity.
Body
Every workshop is rebuilt in the EAP Workshop look — title slides, dividers, body grids — so any expert can hand over a single link and trust the brand carries.
Small
Reusable across 28 workshop locales.
Eyebrow
EAP Workshop · brand
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.
Tips for setting boundaries
- 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
Specification
- 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.
Never use
No other markers, dingbats, arrows, checkmarks, or numbered/lettered prefixes inside bulleted lists.
◦▪■►▶→✓1.a)
Do
- ✓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
Don't
- ✕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
04 · Imagery
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
Tips for setting boundaries
- 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
Tips for setting boundaries
- 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
Chapter 02
What can you do?
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
Mindfulness and relaxation
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
Which one to pick
| 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 |
05 · Diagrams & illustrations
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.
White
Default illustration background — used when the diagram itself carries the color.
#FFFFFF
Pale lavender #EAE1FC
Soft surface that lets the gradient shapes breathe. The dominant background of the illustration system.
#EAE1FC
50 / 50 split
White on one half, #EAE1FC on the other — usually text on white, diagram on lavender. Always exactly half and half, never asymmetric.
#FFFFFF / #EAE1FC
B. Color rules
Two rules cover every shape on every diagram. There are no other colors allowed inside an illustration.
Line graphics → black only
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.
Filled graphics → gradient only
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.
Stresszreakció
Gradient pill / card
Rounded rectangle filled with a brand gradient. White text inside. The workhorse — used for labels, callouts and grid tiles.
A
Gradient bubble
Circle filled with a brand gradient. White centered label. Used for nodes in concept diagrams.
inner
Nested circles
Two concentric gradient bubbles — outer and inner — to express containment (e.g. focus, circle of control).
Line graph
Thin black axes, thin black curve, black axis labels. A small gradient pill or arrow may sit at one anchor point as accent.
Process arrow
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.
Comparison bar
Horizontal capsule filled with the warm gradient, split by a vertical black dotted line. Labels above each half.
Hálanapló
• Kutatások bizonyítják…
Header cap + lavender panel
A gradient pill header sits above a lavender rounded panel containing dark body text. A small gradient triangle connects them.
Gradient card grid
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. Equal panel sizing
Whenever a group of colored panels, cards, or pills appears together, they MUST share identical width AND identical height. Lock them to fixed dimensions and size them to each other — never to the text inside. Uneven heights make the slide look broken even when everything else is on-brand.
Panel types
Workshop slides use two interchangeable panel UIs. Both follow the same sizing law — identical width and identical height inside a group — but they read very differently. Pick one and stick with it for the whole row; never mix the two within a single group.
Cortisol response
Prolonged stress activates the cortisol cascade — the body stays alert long after the trigger is gone.
Solid gradient panel
Full brand-gradient body with white text. Confident and high-contrast — used when each panel is a short, headline-weight statement. Reference: workshop slide 10.
Simple practice
- Sit still, close your eyes
- Inhale for 4s, hold for 4s
- Exhale for 6s
- Repeat 4–6 times
Header cap + lavender panel
A gradient pill header sits on top of a lavender body that holds dark bullet text. Used when each panel carries multiple lines or a short list. Reference: workshop slide 18.
Three-panel row (e.g. workshop slide 10)
Wrong — sized to text
Each panel hugs its own copy, so heights and widths drift apart. The grid looks broken even though every panel is on-brand.
Right — locked to each other
Same width, same height across the group. Copy lengths vary, but the boxes stay rigid — the eye reads a clean grid.
Four-card grid (e.g. workshop slide 18)
Wrong — sized to text
Each panel hugs its own copy, so heights and widths drift apart. The grid looks broken even though every panel is on-brand.
Right — locked to each other
Same width, same height across the group. Copy lengths vary, but the boxes stay rigid — the eye reads a clean grid.
E. Do & Don't
Do
- 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
- Colored panels in a group MUST share identical width AND identical height — lock them to fixed dimensions and size them to each other, never to the text inside
Don't
- 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
- Size panels to their text content — uneven heights look broken
F. 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.
One library: lucide-react
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.
lucide-react
Treatment
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
Black on white
Gradient stroke on #EAE1FC
Icons — Do
- 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
Icons — Don't
- 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
Slide archetypes
The 17 layouts (plus surface and flip variants) available in the shared SlideRenderer. When rebuilding a slide from a source PDF, find the visually closest preview below, copy its id into the slide JSON, then fill in the content fields.
Cover gradient
cover-gradientBrand-gradient title slide with eyebrow + subtitle.
Dark photo title
dark-photo-titleFull-bleed photo + bold title, white text on dark scrim.
Intro paragraphs
intro-paragraphsTwo-column intro: prose on the left, supporting photo on the right.
Intro paragraphs (flipped)
intro-paragraphsSame layout, photo on the left — set flip: true in the JSON.
Split bullets + photo
split-bullets-photoTitle + bulleted list paired with a supporting photo.
Split bullets + photo (flipped)
split-bullets-photoPhoto on the left, bullets on the right — set flip: true.
Split two-column + photo
split-twocol-photoTwo sub-headings each with their own bullets, plus a photo.
Split two-column + photo (flipped)
split-twocol-photoPhoto on the left, columns on the right — set flip: true.
Photo overlay bullets
photo-overlay-bulletsFrosted glass card with bullets floating over a full-bleed photo.
Photo overlay quote
photo-overlay-quoteLarge pull quote inside a frosted card over a photo.
Tri-bubble panels
tri-bubble-panelsThree gradient bubble panels, with an optional closing bubble. RULE: every panel must use a visually distinct gradient (e.g. g1 / g3 / g6) — never repeat the same gradient on two panels unless the source PDF explicitly shows them identical.
Tri-bubble panels (lavender)
tri-bubble-panelsSame layout on pale lavender — set surface: "lavender". Same gradient rule: every panel uses a distinct gradient.
Two-column gradient headers
two-column-gradient-headersTwo columns with gradient header strips over pastel bullet panels.
Two-column gradient headers (lavender)
two-column-gradient-headersSame layout on pale lavender — set surface: "lavender".
Photo + multi scrim
photo-multi-scrimPhoto with a strong dark scrim, title + multiple text blocks.
Text-only bullets (lavender)
text-only-bulletsTitle + intro + bullets on a solid surface, no photo.
Text-only bullets (white)
text-only-bulletsSame layout on white — omit surface or set surface: "white".
Text-only quote
text-only-quoteLarge centered quote on a solid surface, optional attribution.
Text-only quote (gradient 1)
text-only-quoteQuote on official gradient g1, white text — set surface: "gradient", gradientIndex: 0.
Text-only quote (gradient 2)
text-only-quoteQuote on official gradient g2, white text — set surface: "gradient", gradientIndex: 1.
Text-only quote (gradient 3)
text-only-quoteQuote on official gradient g3, white text — set surface: "gradient", gradientIndex: 2.
Text-only quote (gradient 4)
text-only-quoteQuote on official gradient g4, white text — set surface: "gradient", gradientIndex: 3.
Text-only quote (gradient 5)
text-only-quoteQuote on official gradient g5, white text — set surface: "gradient", gradientIndex: 4.
Stage cards + arrow
stage-cards-arrowHorizontal sequence of stage cards joined by thin black chevrons.
Term + definition rows
term-definition-rowsGlossary-style rows: bold term on the left, definition on the right.
Cause → effect cards (lavender)
cause-effect-cardsPairs of cards joined by an arrow — cause on the left, effect on the right.
Cause → effect cards (white)
cause-effect-cardsSame layout on white — set surface: "white".
Card grid 2×2 (lavender)
card-grid-2x2Four equal cards in a 2×2 grid with optional headings.
Card grid 2×2 (white)
card-grid-2x2Same grid on white — set surface: "white".
Card grid 3×2 (gradient cards)
card-grid-2x3Six equal gradient cards in a 3×2 grid on a lavender (default) or white surface. Each card cycles through the six official brand gradients, so the slide showcases the full palette in one view. Use for short label sets (themes, dimensions, factors) where each item is one short phrase.
Numbered factor card
numbered-factor-cardLavender slide with three white rounded cards in a 2-column grid: numbered title card (top-left), intro/why card (bottom-left), and a full-height Példa/Kérdés card (right). Use for numbered enumerations where each item has a why + example + reflective question.
06 · The send-off
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.
Share your thoughts on the workshop with us!
www.workshop.24eap.com
Surface
Full-bleed photograph on a cyan background. No gradient, no panel — the photo is the slide.
Visual
Three hand-held yellow discs in a row: QR code, sad face, happy face. Hands enter from the bottom.
Copy
Headline in Calibri Bold, white, centered in the upper third where the cyan sky is empty. Includes the call-to-action and the URL www.workshop.24eap.com — translated per locale.
Workshop — required
Every workshop deck ends with this QR closing slide. It is appended automatically and cannot be removed.
Webinar — different closing
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.