EAP Workshop visual identity
The visual language of every EAP Workshop deck — built one chapter at a time from the original brand source.
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.
Solid fallback: When only one color is available (single-color print, embroidery, favicons), use solid brand blue #1000C3.
Variants
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.
32px · min48px72px- 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
- 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
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.
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.
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
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.