slidev-theme-insight

Insight Enterprises branded Slidev theme — 15 components, 15 layouts, light + dark mode support.

Install

npm install -D @insight-services-apac/slidev-theme-insight

---
theme: @insight-services-apac/slidev-theme-insight
---

Light / Dark Mode

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

| Layout | Description | Key Props | |--------|-------------|-----------| | cover | Title slide | background: "gradient" \| "clean" \| CSS | | section | Section divider | number, background: "gradient" \| "dark" \| "clean" | | default | Content with gradient strip | strip, variant: 1-5 | | 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 | | swimlane | Gantt-style timeline (backwards-compat wrapper — prefer <SwimlaneChart> component) | strip, variant, periods, lanes, milestones | | end | Closing/thank-you | background: "gradient" \| "dark" |

Strip Variants

Content layouts support a variant prop (1-5) for different gradient accent colours:

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

SwimlaneChart Component

A Gantt-style timeline for project plans with lanes, activity bars, and milestone markers. Non-overlapping items share a row; overlapping items stack vertically to show concurrency.

Use the <SwimlaneChart> component inline in any layout:

<SwimlaneChart
  :periods="['Week 1', 'Week 2', 'Week 3', 'Week 4']"
  :lanes="[
    { name: 'Design', color: '#582873', items: [
      { label: 'UX Research', start: 0, end: 2 },
      { label: 'Wireframes', start: 2, end: 3.5 },
    ]},
    { name: 'Build', color: '#5990F0', items: [
      { label: 'Sprint 1', start: 2, end: 4 },
    ]},
  ]"
  :milestones="[{ label: 'Go Live', at: 4, color: '#D30C55' }]"
/>

A layout: swimlane is also available for backwards compatibility (frontmatter-driven props).

0-based positioning — a single linear scale for start, end, and at:

| Value | Position | |-------|----------| | 0 | Left edge of period 1 | | 0.5 | Middle of period 1 | | 1 | Right edge of period 1 | | N | Right edge of period N |

Best with 3–6 lanes and 4–10 periods.

Components

All components are auto-imported by Slidev:

• ActionStep — Numbered action step with description slot
• Badge — Category label (solid/outline/subtle variants)
• BrandBadge — Top-left badge (e.g. "DEEP DIVE")
• BrandGradient — Gradient text wrapper
• ChevronFlow — Horizontal process chevrons
• ConnectorBar — Gradient bar with labelled items
• ContentCard — Card with coloured left accent border
• InsightFooter — Logo + confidential text
• OfferBullet — Bullet point with optional offer badge
• PhaseCard — Phase card (Align/Deliver/Embed style)
• PillarCard — Column card for pillar content
• Pill — Small coloured tag
• PracticeRow — Grid row with column slots
• QuoteBlock — Styled quote with attribution
• SwimlaneChart — Gantt-style horizontal timeline chart
• TeamGrid — Team member grid

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 |

Preview

npx slidev example.md