EAP Workshop vizuální identita
Vizuální jazyk každé prezentace EAP Workshop — budovaný kapitolu po kapitole z původního značkového zdroje.
Logo
Logo EAP Workshop je charakteristický znak každé workshopové plochy — titulních slidů, mezisekčních předělů, seznamu workshopů a tohoto manuálu značky. Je to submarka EAP Online a používá se výhradně na materiálech souvisejících s workshopy.
Anatomie
- Bublina dialogu. Kruhová bublina s trojúhelníkovým ocáskem v pravém horním rohu — znamení dialogu a výměny, srdce každého workshopu.
- Dvě do sebe zapadající ozubená kola. Jedno velké, jedno malé, v plné bílé — symbolizují mechanismus, myšlení a vnitřní fungování pohody.
- Wordmark EAPWORKSHOP. Calibri Bold, verzálky, sevřený tracking. Wordmark sedí nad bublinou v horizontálním uskupení.
Primární barvy
Logo používá výhradně dvě plné značkové barvy — bordó a modrou — na značce i wordmarku.
Jednobarevná varianta: Když je k dispozici jen jedna barva (jednobarevný tisk, výšivka, favicon), použij značkovou modrou #1000C3.
Varianty
Ochranná zóna a minimální velikost
Vždy zachovej okolo loga okraj odpovídající výšce velkého ozubeného kola. Nikdy značku netěsně neobklopuj textem, okraji ani obrazem.
32px · min48px72px- Titulní slidy workshopových prezentací
- Slidy mezisekčních předělů
- Patičky slidů jako malá mini-značka
- Karty v seznamu workshopů na /workshops
- Hlavička tohoto manuálu značky
- Náhledy sdílených odkazů workshopů
- Hero domovské stránky EAP Online (výhradní plocha EAP Online)
- Přebarvené, deformované nebo otočené
- Na rušných fotografiích bez scrimu
- Ve velikosti pod 32 px výšky
- Vedle konkurenčního loga bez jasného oddělení
Barvy
Každá plná barva a gradient zde dokumentovaný je převzat přímo ze zdrojového PDF. Nic není vymyšlené — katalogizuje se pouze to, co v prezentaci workshopu už existuje.
Plochy
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.
Značkové odstíny
Těchto šest odstínů se v prezentaci nikdy nezobrazuje jako velká plná výplň — žijí výhradně jako koncové body čtyř gradientů níže.
B. Gradienty
Čtyři diagonální lineární gradienty nesou celou prezentaci. Jsou výseky jednoho přechodu od teplé ke studené a aplikují se na zaoblené obdélníky, pilulky a celoplošný předěl sekce.
- #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.