---
name: cloudeli-slides
description: Build on-brand Cloudeli slide decks. Use this skill whenever the user asks to create, design, or update a Cloudeli presentation, slide deck, or pitch. Provides the Cloudeli brand system (Poppins type, brand-blue palette, gradient + glow treatments), an 11-layout slide library, copy-paste HTML snippets, and a ready-to-fork 1920×1080 deck template. Cloudeli is a Managed IT Services company (tagline "Cloud Made Simple").
---

# Cloudeli Slide Deck Skill

Reusable system for building minimalist, projection-ready **Cloudeli** slide decks at **1920×1080 (16:9)**, Poppins throughout, on the Cloudeli brand palette. Fork the bundled template, swap in real copy, reorder.

## Files in this skill
- `SKILL.md` — this file (brand tokens, layout library, build workflow).
- `template/Cloudeli Deck Template.dc.html` — the 11-slide starter deck. **Copy this to begin.**
- `assets/cloudeli-logo.png` — primary wordmark. On dark slides render white via `filter: brightness(0) invert(1)`.
- `assets/deck-stage.js` / `assets/image-slot.js` / `assets/support.js` — runtime the template imports (keep alongside the deck).
- `reference/Cloudeli-Brand-Guidelines.md` — full source brand guide.

---

## 1. Brand tokens (use these exact values — never invent new ones)

### Colour
| Role | Hex |
|---|---|
| Brand Blue | `#1a76D1` |
| Brand Blue light | `#2889E4` |
| Brand Blue dark | `#155FA8` |
| Ink / Navy (headings) | `#2C2D3F` |
| Body text | `#5B6172` |
| Muted (captions) | `#8B90A0` |
| Soft tint bg | `#EEF4FC` |
| Line / border | `#E8EEF7` |
| White | `#FFFFFF` |
| NOC dark bg | `#0D1B34` |
| Glow (on dark) | `#2F8BFF` |
| Dark-slide body text | `#9DB2D4` |

- **Brand gradient:** `linear-gradient(135deg, #2889E4 0%, #1a76D1 100%)` — reserve for **one focal element per slide** (icon tile, stat, table header, CTA pill, section divider).
- **Glow on dark:** `radial-gradient(900px 700px at 82% 18%, rgba(47,139,255,.42), transparent 60%)` over `#0D1B34`.

**Don't:** use Trustpilot green or Microsoft colours as general accents; use flat black/gray shadows; place credential badges directly on the gradient; mix in other typefaces.

### Type — Poppins everywhere (Google Fonts, weights 300–800)
| Level | Weight | Size | Colour | Notes |
|---|---|---|---|---|
| Title-slide headline | 800 | 96px | White / Ink | `letter-spacing:-.025em`, line-height 1.04 |
| Slide title | 800 | 60px | Ink `#2C2D3F` | `letter-spacing:-.02em` |
| Section number | 800 | 200px | `rgba(255,255,255,.28)` on gradient |
| Eyebrow / kicker | 700 | 18px | Brand `#1a76D1` | `letter-spacing:.16em`, UPPERCASE |
| Lead paragraph | 400 | 28px | Body `#5B6172` | line-height 1.7 |
| Body / bullets | 400 | 21–26px | Body `#5B6172` | line-height 1.6–1.7 |
| Stat figure | 800 | 104px | gradient (clipped to text) |
| Caption / footer | 500 | 18–20px | Muted `#8B90A0` |

> **Minimum size on slides: 24px.** Eyebrows/footers (~18px) are the only exceptions.

### Shape & depth
- Radii: cards/panels `20px`, icon tiles `16px`, pills/chips `50px` (full).
- Shadows (always blue-tinted): small `0 6px 20px rgba(26,118,209,.08)`, medium `0 16px 44px rgba(26,118,209,.13)`, button `0 10px 26px rgba(26,118,209,.30)`.
- Slide padding: `110px` sides, `110–120px` top/bottom. Keep it airy.

---

## 2. Layout library (the 11 slides)

| # | Layout | Background | When to use |
|---|---|---|---|
| 01 | **Title** | Dark navy + top-right glow | Deck opener — white logo top-left, eyebrow, big headline, presenter · date |
| 02 | **Agenda** | White | 4–5 numbered items (`01`–`0n`) in a 2-col grid with bottom rules |
| 03 | **Section divider** | Brand gradient + soft circles | Before each major part — giant number, eyebrow, section title (all white) |
| 04 | **Content (lead + points)** | White | Eyebrow + title + lead paragraph + three short points with gradient ticks |
| 05 | **Two-column** | White | Narrative left, highlighted `#EEF4FC` callout panel right |
| 06 | **Feature tiles** | White | Three cards, each a gradient icon tile + heading + one line |
| 07 | **Stats** | Soft `#EEF4FC` | Three big gradient-clipped figures with labels |
| 08 | **Image + text** | White | Half-bleed `<image-slot>` left, copy + CTA pill right |
| 09 | **Quote** | Dark navy + glow | One testimonial, big quote mark, attribution |
| 10 | **Comparison table** | White | Gradient header row, alternating light rows, `20px` rounded container |
| 11 | **Closing** | Dark navy + glow | White logo, "Thank you", contact columns with blue eyebrows |

**Rhythm rules (keep parallel):**
- Every content slide opens with an UPPERCASE brand-blue **eyebrow**, then a heavy navy title.
- Section dividers all look identical (only number/title change).
- Dark slides (title / quote / closing) are the only places the glow appears.
- Exactly **one** gradient focal element per slide.

---

## 3. Build a new deck from the template

This is a **Design Component** project — decks are single `.dc.html` files that stream live.

1. **Copy** `template/Cloudeli Deck Template.dc.html` → `My New Deck.dc.html` (preserve the original). Keep `deck-stage.js`, `image-slot.js`, `support.js`, and `assets/cloudeli-logo.png` alongside it.
2. **Keep the `<helmet>`** (Poppins links + reset) and the two `<x-import>` mounts (`image-slot`, `deck-stage`) exactly as-is.
3. Each slide is a `<section data-label="…" data-screen-label="NN" data-speaker-notes="…">` child of the `deck-stage` import. **Duplicate the layout block** you want, change its label/number, edit the copy.
4. **Do not** set `position`/`inset`/`width`/`height` on the `<section>` — the stage sizes it to 1920×1080. Use `display:flex; flex-direction:column; justify-content:center; padding:…`; use `position:absolute` only for in-slide corner items (logo, glow circles).
5. **Inline styles only** — no CSS classes/stylesheets (repeat the literal values per slide). Only `@font-face`/`@keyframes`/body reset belong in `<helmet><style>`.
6. **Static markup** for text (each heading/line its own leaf element; write repeated items out, don't loop) so copy is click-editable.
7. Put each slide's speaker note in its `data-speaker-notes` attribute.

### Reusable snippets

**Eyebrow + title:**
```html
<div style="font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; letter-spacing:.16em; text-transform:uppercase; color:#1a76D1; margin-bottom:18px;">Eyebrow</div>
<h2 style="font-family:'Poppins',sans-serif; font-weight:800; font-size:60px; letter-spacing:-.02em; color:#2C2D3F; margin:0 0 56px;">Slide title</h2>
```

**Gradient icon tile:**
```html
<div style="width:72px; height:72px; border-radius:16px; background:linear-gradient(135deg,#2889E4,#1a76D1); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(26,118,209,.30);">
  <!-- 34px white stroke SVG icon -->
</div>
```

**CTA pill:**
```html
<div style="display:inline-flex; align-items:center; gap:12px; padding:15px 34px; border-radius:50px; background:linear-gradient(135deg,#2889E4,#1a76D1); box-shadow:0 10px 26px rgba(26,118,209,.30); font-family:'Poppins',sans-serif; font-weight:600; font-size:20px; color:#FFFFFF;">Label</div>
```

**Gradient-clipped stat figure:**
```html
<div style="font-family:'Poppins',sans-serif; font-weight:800; font-size:104px; line-height:1; letter-spacing:-.03em; background:linear-gradient(135deg,#2889E4,#1a76D1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;">99.9%</div>
```

**White logo on dark slide:**
```html
<img src="assets/cloudeli-logo.png" alt="Cloudeli" style="height:62px; filter:brightness(0) invert(1);">
```

---

## 4. Edit, share & export
- **Edit copy:** click any heading/paragraph in the preview and retype.
- **Reorder / duplicate / skip slides:** thumbnail rail (drag to reorder, right-click for options).
- **Images:** drag a file onto any `<image-slot>`; it persists.
- **Export:** prints to PDF (one page per slide); exports to PPTX with `resetTransformSelector: "deck-stage"`.

## 5. Pre-ship checklist
- [ ] Every title uses one grammatical style; reading titles alone tells the story.
- [ ] Poppins everywhere; headings 800, body 400.
- [ ] One gradient focal element per slide — no more.
- [ ] Blue-tinted shadows, never gray/black.
- [ ] Eyebrow → navy title rhythm on every content slide.
- [ ] No text below 24px (eyebrows/footers excepted).
- [ ] Credential badges (MSFT/CSA) on white chips, never on the gradient.
- [ ] Generous margins; no dense edge-to-edge text.
