slidev-theme-insight-ai

Insight AI narrative Slidev theme — combines the clean architecture of slidev-theme-insight-lite (design tokens, dark mode, rational type scale) with the distinctive visual identity of the Insight AI presentation (PrismBg watermark, practice cards, Align/Deliver/Embed components).

Install

npm install -D @insight-services-apac/slidev-addon-insight-ai

Use in your slides

In your slides.md frontmatter:

---
theme: insight-ai
---

# My Presentation

Content goes here

Updating the Theme

If you make changes to this theme in the repository and want to publish a new version:

1. Bump the version

cd slidev-theme-insight-ai
npm version patch   # 0.1.0 → 0.1.1 (bug fixes)
npm version minor   # 0.1.0 → 0.2.0 (new features)
npm version major   # 0.1.0 → 1.0.0 (breaking changes)

2. Publish

npm publish

3. Update in consuming projects

npm update @insight-services-apac/slidev-theme-insight-ai

Developing Locally

To preview the theme with the example deck:

cd slidev-theme-insight-ai
npx slidev --port 3333 --remote

To use the theme from a local path (without publishing) in another presentation:

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

Important: When using a local path, Slidev only serves the presentation's own public/ folder — not the theme's. You need to symlink the theme's public assets into your presentation:

# From your presentation folder
ln -s ../../slidev-theme-insight-ai/public public

This is not needed when the theme is installed via npm — Slidev resolves theme assets automatically for installed packages.

Light / Dark Mode

The theme supports both light and dark modes. Toggle with the Slidev toolbar or via frontmatter:

---
colorSchema: light   # or "dark"
---

• Light mode: White backgrounds, gradient headings, subtle accents
• Dark mode: Deep purple-black canvas, luminous brand accents, auto-inverted logo

Layouts

All layouts from slidev-theme-insight-lite are included, plus new PrismBg background options.

| Layout | Description | Key Props | |--------|-------------|-----------| | cover | Title slide | background: "gradient" \| "clean" \| "prism" \| CSS | | section | Section divider | number, background: "gradient" \| "dark" \| "clean" | | default | Content with gradient strip | strip, variant: 1-5, background: "prism" | | two-cols | Two-column | strip, variant — slots: header, left, right | | three-cols | Three-column | strip, variant — slots: header, col1–col3 | | four-cols | Four-column | strip, variant — slots: header, col1–col4 | | image-right | Content left, image right | image — slot: image | | image-left | Image left, content right | image — slot: image | | cards-vertical | 3-up vertical cards | strip, variant — slots: header, card1–card3 | | cards-horizontal | 4-up horizontal cards | strip, variant — slots: header, card1–card4 | | quote | Testimonial with gradient wash | strip | | team | Team member grid | strip, variant — slot: header | | fact | Big stat/number | strip, variant | | end | Closing/thank-you | background: "gradient" \| "dark" |

PrismBg Backgrounds

The cover and default layouts support background: "prism":

• Cover + prism: White background with animated, rotating Prism gem watermark (filled symbol)
• Default + prism: White background with subtle wireframe Prism gem watermark (replaces gradient strip)

---
layout: cover
background: prism
---

Strip Variants

Content layouts support a variant prop (1–5) that selects different CSS gradient colours for the top accent line:

| Variant | Colours | |---------|---------| | 1 | Cyan → lavender → pink | | 2 | Lavender → deep purple | | 3 | Pink → magenta → purple | | 4 | Purple → magenta → red | | 5 | Purple → deep purple → black |

Components

All components are auto-imported. Includes the full lite component library plus Insight AI narrative components.

From Insight Lite

• InsightFooter — Logo + confidential text
• ContentCard — Card with coloured left accent border
• Badge — Category label (solid/outline/subtle)
• Pill — Small coloured tag
• ChevronFlow — Horizontal process chevrons
• BrandGradient — Gradient text wrapper
• TeamGrid — Team member grid
• QuoteBlock — Styled quote with attribution

Insight AI Narrative Components

• PrismBg — White background with Prism gem watermark. Props: variant: "default" | "cover" | "warm" | "cool"
• InsightBadge — Gradient "INSIGHT AI" badge for slide headers
• PillarCard — Align/Deliver/Embed phase column card. Props: phase: "align" | "deliver" | "embed", tagline. Slot: default (for OfferBullet children)
• OfferBullet — Bullet point with optional offer name pill. Props: offer, color
• PhaseCard — Gradient phase cards (Frontier Firm stages). Props: phase, title, description, color
• ActionStep — Numbered action step with coloured left border. Props: number, title, color. Slot: default (description)
• PracticeRow — Grid row for practice matrix. Props: name, subtitle, highlight. Slots: align, deliver, embed
• ConnectorBar — Gradient bar for horizontal connectors. Props: items: [{ name, description }]

Brand Colours

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

Practice Colour Coding

| Practice | Colour | Hex | |----------|--------|-----| | AI & Business Transformation | Heart (purple) | #582873 | | AI Business Solutions | Harmony (magenta) | #D40E8C | | AI Apps & Data | Vision (blue) | #5990F0 | | Modern Platforms & Ops | Teal (derived from Zeal) | #2BA4C4 |