slidev-theme-insight

Insight Enterprises branded Slidev 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):

---
theme: ../../slidev-theme-insight
---

npm (once published):

---
theme: insight
---

Quick Start

# 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.) |

---
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 |

---
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.

---
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) |

---
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 |

<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) |

<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 |

<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. |

<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.) |

<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) |

<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) |

<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:

<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

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

Pills (CSS class)

For pills without the Vue component:

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

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

Separators

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

Animations

<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:

: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:

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

Disable Content Strip

Set strip: false on any content layout:

---
layout: default
strip: false
---

Custom Slide Background

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

---
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

# 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