npm package: @insight-services-apac/slidev-addon-insight-ai
Description: Insight AI narrative addon — PrismBg watermark and prism cover variant
Author: Insight Services APAC
Latest version: 0.2.5

# slidev-theme-insight-ai

Insight AI narrative [Slidev](https://sli.dev) 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

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

### Use in your slides

In your `slides.md` frontmatter:

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

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

```bash
npm publish
```

### 3. Update in consuming projects

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

## Developing Locally

To preview the theme with the example deck:

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

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

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

```bash
# 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:

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

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