npm package: @insight-services-apac/slidev-addon-insight-pptx
Description: Insight POTX backgrounds addon — title images, content strips, and section dividers from 2026 POTX template
Author: Insight Services APAC
Latest version: 0.2.5

# slidev-theme-insight

Insight Enterprises branded [Slidev](https://sli.dev) theme — faithfully reproduces the official 2026 POTX PowerPoint template.

All background images, logos, gradient strips, and footer text are extracted directly from the `2026_Insight_PPT_Template.potx` file.

## Install

**Local path** (from any presentation in the same monorepo):

```yaml
---
theme: ../../slidev-theme-insight
---
```

**npm** (once published):

```yaml
---
theme: insight
---
```

## Quick Start

```bash
# Preview the theme showcase
cd slidev-theme-insight
npx slidev example.md --remote --port 3030
```

## Light Mode Only

This theme is **light mode only**, faithfully reproducing the official 2026 POTX template which uses white backgrounds with coloured gradient banners and geometric Prism shapes. For a theme with light + dark mode support (without POTX backgrounds), see `slidev-theme-insight-lite`.

---

## Layouts

### `cover`

Full-bleed title slide with POTX background image. Text sits on the clean left ~50% of the slide. Insight logo positioned top-left.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `String \| Number` | `1` | POTX background (1–5), each a different photo/gradient wash |
| `background` | `String` | `''` | `"gradient"` for CSS gradient, or any CSS background value |

| Slot | Description |
|------|-------------|
| `default` | Title and subtitle content |
| `meta` | Bottom metadata (date, author, etc.) |

```md
---
layout: cover
variant: 2
---

# Presentation Title

Subtitle text here
```

### `section`

Section divider with centred text. Default uses the POTX geometric Prism arrow shapes.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `number` | `String \| Number` | `''` | Faint number badge displayed top-right |
| `background` | `String` | `'potx'` | `"potx"` (default), `"gradient"`, `"dark"`, or any CSS value |

### `default`

Standard content slide with POTX gradient strip across the top.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `strip` | `Boolean` | `true` | Show/hide the POTX gradient strip |
| `variant` | `String \| Number` | `1` | Strip variant (1–5) |

### `two-cols`

Two-column grid layout with content strip.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `strip` | `Boolean` | `true` | Show/hide the POTX gradient strip |
| `variant` | `String \| Number` | `1` | Strip variant (1–5) |

| Slot | Description |
|------|-------------|
| `header` | Title area above the columns |
| `left` | Left column content |
| `right` | Right column content |

```md
---
layout: two-cols
---

::header::
# Title

::left::
Left content

::right::
Right content
```

### `three-cols`

Three-column grid layout. Same props as `two-cols`.

| Slot | Description |
|------|-------------|
| `header` | Title area |
| `col1` | First column |
| `col2` | Second column |
| `col3` | Third column |

### `four-cols`

Four-column grid layout. Same props as `two-cols`.

| Slot | Description |
|------|-------------|
| `header` | Title area |
| `col1`–`col4` | Column content |

### `image-right`

Content on the left, image on the right (50/50 split).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `image` | `String` | `''` | Image URL |

| Slot | Description |
|------|-------------|
| `default` | Content area (left side) |
| `image` | Custom image markup (overrides `image` prop) |

### `image-left`

Image on the left, content on the right. Same props and slots as `image-right`.

### `cards-vertical`

Three-column card grid with content strip.

| Slot | Description |
|------|-------------|
| `header` | Title area |
| `card1`–`card3` | Card content (use `<ContentCard>` inside each) |

### `cards-horizontal`

Four-column card grid with content strip.

| Slot | Description |
|------|-------------|
| `header` | Title area |
| `card1`–`card4` | Card content |

### `quote`

Centred quote with large gradient quote mark. Uses POTX quote background.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `strip` | `Boolean` | `true` | Show POTX quote background image |

Content is rendered as markdown — first paragraph becomes the quote text, last paragraph with `**bold**` becomes the attribution.

```md
---
layout: quote
---

The organisations that win will be those that embed AI into how they think.

**Jane Doe** — CTO, Enterprise Customer
```

### `fact`

Large centred statistic or number. The `h1` renders with brand gradient text.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `strip` | `Boolean` | `true` | Show/hide the POTX gradient strip |
| `variant` | `String \| Number` | `1` | Strip variant (1–5) |

```md
---
layout: fact
---

# 73%

of enterprise AI projects fail to move beyond pilot stage.
```

### `team`

Auto-fit grid for team member cards. Pair with the `<TeamGrid>` component.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `strip` | `Boolean` | `true` | Show/hide the POTX gradient strip |
| `variant` | `String \| Number` | `1` | Strip variant (1–5) |

| Slot | Description |
|------|-------------|
| `header` | Title area |
| `default` | Grid content (use `<TeamGrid>` here) |

### `end`

Closing slide with gradient background, mesh overlay, and inverted Insight logo.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `background` | `String` | `'gradient'` | `"gradient"` (purple-to-magenta) or `"dark"` (deep purple-black) |

---

## Components

All components are auto-imported — no `import` statements needed.

### `InsightFooter`

Persistent footer matching the POTX spec: Insight logo + confidential text. Automatically included on every layout.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `show` | `Boolean` | `true` | Show/hide the footer |
| `invert` | `Boolean` | `false` | White logo for dark/gradient backgrounds |
| `text` | `String` | `''` | Custom footer text (overrides default confidential notice) |

The default text is: *"Insight Proprietary & Confidential. Do Not Copy or Distribute. © {year} Insight. All Rights Reserved."* — with the year computed dynamically.

### `ContentCard`

Card with coloured left accent border, optional category badge, and pills.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `color` | `String` | `'#D40E8C'` | Accent colour (left border, badge, pill tints) |
| `title` | `String` | `''` | Card title (800 weight, 0.85rem) |
| `badge` | `String` | `''` | Category badge (e.g. `"DELIVER"`, `"EMBED"`) |
| `pills` | `Array` | `[]` | Array of tag strings displayed at the bottom |

| Slot | Description |
|------|-------------|
| `default` | Card body content |

```html
<ContentCard
  title="AI Strategy"
  badge="DELIVER"
  color="#582873"
  :pills="['Workshop', 'Roadmap']"
>
  Card body content here.
</ContentCard>
```

### `Badge`

Category or section label with three visual variants.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `String` | *required* | Badge text |
| `color` | `String` | `''` | Colour (defaults to brand gradient when empty) |
| `variant` | `String` | `'solid'` | `"solid"` (coloured bg, white text), `"outline"` (border + coloured text), `"subtle"` (tinted bg, coloured text) |

```html
<Badge label="DEEP DIVE" color="#5990F0" />
<Badge label="OUTLINE" variant="outline" color="#582873" />
<Badge label="SUBTLE" variant="subtle" />
```

### `Pill`

Small coloured tag for keywords and capabilities.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `String` | *required* | Pill text |
| `color` | `String` | `'#D40E8C'` | Text colour and tinted background |

```html
<Pill label="RadiusAI" color="#582873" />
```

### `ChevronFlow`

Horizontal process flow with overlapping chevron shapes.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `steps` | `Array` | `[]` | Steps: `{ label: string, color?: string }`. Colours default to brand palette if omitted. |

```html
<ChevronFlow :steps="[
  { label: 'Align', color: '#582873' },
  { label: 'Deliver', color: '#D40E8C' },
  { label: 'Embed', color: '#D30C55' },
]" />
```

### `BrandGradient`

Wraps text in the brand gradient (Hustle → Harmony → Heart).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `tag` | `String` | `'span'` | HTML tag to render (`h1`, `h2`, `span`, etc.) |

```html
<BrandGradient tag="h2">Gradient Heading</BrandGradient>
```

### `TeamGrid`

Grid of team member cards with avatar circles, names, and roles.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `members` | `Array` | `[]` | Members: `{ name: string, role?: string, image?: string }` |
| `columns` | `Number` | `0` | Fixed column count (0 = auto-fit, minimum 140px per column) |

```html
<TeamGrid :members="[
  { name: 'Jane Doe', role: 'CTO', image: '/team/jane.jpg' },
  { name: 'John Smith', role: 'Solutions Architect' },
]" />
```

Members without an `image` get a circular avatar with their first initial on a brand-gradient tinted background.

### `QuoteBlock`

Styled quote with gradient quote mark and attribution. For use on any layout (the `quote` layout has its own built-in styling).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `quote` | `String` | `''` | Quote text (or use default slot) |
| `author` | `String` | `''` | Author name |
| `role` | `String` | `''` | Author's role or title |
| `color` | `String` | `''` | Quote mark colour (defaults to brand gradient) |

```html
<QuoteBlock
  quote="AI transforms how organisations operate."
  author="Jane Doe"
  role="CTO"
/>
```

---

## Brand Colours

### Primary Palette

| Name | Hex | CSS Variable | UnoCSS |
|------|-----|-------------|--------|
| Hustle | `#D30C55` | `--insight-hustle` | `text-hustle`, `bg-hustle` |
| Inspired | `#ED1944` | `--insight-inspired` | `text-inspired`, `bg-inspired` |
| Harmony | `#D40E8C` | `--insight-harmony` | `text-harmony`, `bg-harmony` |
| Hunger | `#B01C87` | `--insight-hunger` | `text-hunger`, `bg-hunger` |
| Heart | `#582873` | `--insight-heart` | `text-heart`, `bg-heart` |
| Vision | `#5990F0` | `--insight-vision` | `text-vision`, `bg-vision` |
| Zeal | `#4EC7EA` | `--insight-zeal` | `text-zeal`, `bg-zeal` |

### Practice Colours

| Practice | Hex | CSS Variable | UnoCSS |
|----------|-----|-------------|--------|
| AI & Business Transformation | `#582873` | `--practice-abt` | `text-practice-abt` |
| AI Business Solutions | `#D40E8C` | `--practice-abs` | `text-practice-abs` |
| AI Apps & Data | `#5990F0` | `--practice-aad` | `text-practice-aad` |
| Modern Platforms & Ops | `#2BA4C4` | `--practice-mpo` | `text-practice-mpo` |

### Phase Colours

| Phase | Hex | CSS Variable |
|-------|-----|-------------|
| Align | `#582873` | `--phase-align` |
| Deliver | `#D40E8C` | `--phase-deliver` |
| Embed | `#D30C55` | `--phase-embed` |

---

## POTX Background Assets

All images from the official POTX template are in `public/potx/`:

| Asset | File | Used by |
|-------|------|---------|
| Title backgrounds (5 variants) | `title-1.jpg` – `title-5.jpg` | `cover` layout |
| Section divider | `section-divider.jpeg` | `section` layout (potx mode) |
| Content strip banners (5 variants) | `content-strip-1.jpeg` – `content-strip-5.jpeg` | All content layouts |
| Quote background | `quote-bg.jpeg` | `quote` layout |
| Logo (colour, large) | `insight-logo-color.png` | Cover, end slides |
| Logo (colour, small) | `insight-logo-footer.png` | Footer on all slides |

### Strip Variants

Content layouts (`default`, `two-cols`, etc.) support a `variant` prop (1–5) to select different gradient strips:

| Variant | Colour feel |
|---------|-------------|
| 1 | Cyan → lavender → pink with bubble shapes |
| 2 | Lavender → deep purple with circle shapes |
| 3 | Pink → magenta with circle shapes |
| 4 | Light purple → magenta gradient fade |
| 5 | Purple → deep purple with circle shapes |

---

## Utility Classes

### Highlight Text

Apply brand colours with `font-weight: 600`:

```html
<span class="highlight-hustle">Red text</span>
<span class="highlight-harmony">Pink text</span>
<span class="highlight-heart">Purple text</span>
<span class="highlight-vision">Blue text</span>
<span class="highlight-zeal">Cyan text</span>
```

Aliases: `.highlight-red`, `.highlight-pink`, `.highlight-purple`, `.highlight-blue`, `.highlight-cyan`.

### Brand Gradient Text

```html
<span class="brand-gradient">Gradient text</span>
```

### Pills (CSS class)

For pills without the Vue component:

```html
<span class="insight-pill insight-pill--heart">Label</span>
```

Variants: `--hustle`, `--harmony`, `--heart`, `--vision`, `--zeal`, `--hunger`.

### Separators

```html
<hr class="insight-separator" />
<hr class="insight-separator insight-separator--wide" />
<hr class="insight-separator insight-separator--center" />
```

### Animations

```html
<div class="animate-fade-up">Fade up</div>
<div class="animate-fade-in delay-2">Fade in with 0.2s delay</div>
<div class="animate-slide-right delay-4">Slide right with 0.4s delay</div>
<div class="animate-scale-in delay-6">Scale in with 0.6s delay</div>
```

Delay classes: `.delay-1` through `.delay-8` (0.1s increments).

---

## Customisation

### Override Brand Colours

In your presentation's `style.css`, override any CSS variable:

```css
:root {
  --insight-hustle: #E01060;
  --heading-gradient: linear-gradient(90deg, #E01060, #D40E8C, #582873);
}
```

### Custom Footer Text

Pass a `text` prop to any layout's `InsightFooter`, or override in your presentation's `global-top.vue`:

```vue
<!-- global-top.vue -->
<template>
  <InsightFooter text="My Company Confidential — Internal Use Only" />
</template>
```

### Disable Content Strip

Set `strip: false` on any content layout:

```yaml
---
layout: default
strip: false
---
```

### Custom Slide Background

The `cover` and `section` layouts accept CSS values for the `background` prop:

```yaml
---
layout: cover
background: "linear-gradient(135deg, #1a1a2e, #16213e)"
---
```

---

## CSS Architecture

| File | Purpose |
|------|---------|
| `styles/base.css` | Brand tokens, typography, animations, print support |
| `styles/light.css` | Light mode semantic tokens (backgrounds, text, cards, code) |
| `styles/layouts.css` | Grid systems, layout shells, content strip |
| `styles/utilities.css` | Highlight colours, pills, badges, chevrons, separators |
| `styles/index.ts` | Entry point (imports all CSS) |

### UnoCSS Shortcuts

The theme registers UnoCSS shortcuts for all brand colours (`text-hustle`, `bg-harmony`, `border-heart`, etc.) and practice colours (`text-practice-abt`, etc.) — see `setup/unocss.ts`.

---

## Development

```bash
# Preview example deck
cd slidev-theme-insight
npx slidev example.md --remote --port 3030

# Use from another presentation
cd presentations/my-deck
npx slidev --remote --port 3030
```

The `example.md` file demonstrates all 14 layouts and every component.

## Requirements

- Node.js >= 18.0.0
- Slidev >= 0.48.0