# Sardius Slides - AI Reference Guide
> **Purpose**: This document provides all the information an AI agent (Claude, GPT, etc.) needs to generate valid Sardius Slides presentation content in Markdown format.
## Quick Start
Sardius Slides uses a simple Markdown format with HTML comment directives. Each slide is separated by `---` (three dashes on their own line).
```markdown
# Title Here
## Subtitle with **Accent Word**
Content paragraph.
---
# Next Slide
More content...
```
---
## Slide Structure
### Basic Format
```markdown
# Overline (smaller text above heading)
## Main Heading with **Accent**
> Optional quote or callout
Body content, paragraphs, or special content types.
```
### Required Elements
- **At minimum**: A slide needs either a `# heading`, `## heading`, or body content to render
- **Slide separator**: `---` on its own line separates slides
---
## Directives Reference
Directives are HTML comments placed at the **top of each slide** before any content.
### Theme
```markdown
```
| Theme | Background | Text Color | Best For |
|-------|------------|------------|----------|
| `dark` | #08162B (navy) | White | Technical content, emphasis, dramatic |
| `light` | #FFFFFF | Dark | Detailed content, readability |
**Default**: `dark` if not specified.
### Layout
```markdown
```
| Layout | Description | Use Case |
|--------|-------------|----------|
| `cover` | Full-screen branded cover with gradient background | Product title slides, branded openers |
| `hero` | Animated network background, centered content | Opening/title slides |
| `center` | Centered with padding, no illustration | Key points, quotes, data, image grids |
| `split` | 2-column: accent panel left, content right | Feature explanations |
| `split-reverse` | 2-column: content left, accent panel right | Feature lists with dark panel or image |
| `left` / `right` | Content + illustration side by side | Standard content slides |
| `top` | Content top, illustration bottom | Closing slides |
| `bg` | Illustration as background | Visual impact slides |
| `bg-image` | Full-bleed photo background with text overlay | Hero images, dramatic visuals |
| `two-col` | 2-column grid layout | Feature lists, comparisons |
| `roadmap` | Horizontal timeline with progress tracking | Project timelines, phases |
**Default**: Auto-detected based on content (center for data, cycles through illustration layouts otherwise).
### Illustration
```markdown
```
**Available illustrations and their auto-detection keywords:**
| Name | Keywords | Best For |
|------|----------|----------|
| `rocket` | launch, rocket, ambition, go, speed, fast, accelerate, future | Launch announcements, future vision |
| `ai` | ai, artificial, intelligence, analysis, tagging, machine, neural, discover, smart | AI features, smart automation |
| `streaming` | live, stream, broadcast, signal, streaming | Live video, broadcasting |
| `video` | video, vod, content, library, on demand, media | Video features, content library |
| `distribution` | distribution, fast, channel, roku, pluto, device, screen, iptv, app, platform, ott, tv | Multi-platform, app distribution |
| `cloud` | cloud, infrastructure, server, hosting, aws, scale, architecture, devops, transcode | Infrastructure, cloud services |
| `team` | team, partner, people, collaborate, support, together, run, clarity, everyone | Team, collaboration |
| `workflow` | workflow, process, steps, automation, how, works, simple, three, framework, boulder, rock | Process explanations, frameworks |
| `growth` | growth, analytics, data, metrics, results, numbers, stats, measure, revenue, profit, target, financial | Analytics, metrics, growth |
| `security` | security, uptime, reliable, sla, trust, shield, monitor, infrastructure, storage | Security, reliability, trust |
| `globe` | global, reach, audience, worldwide, everywhere | Global reach, worldwide |
| `roi` | roi, value, cost, pricing, revenue, money, investment, budget, pays | Financial, ROI, pricing |
| `calendar` | calendar, schedule, event, timeline, date, demo, next, upcoming, quarter, q1, q2, q3, q4 | Scheduling, timelines |
| `hub` | hub, connect, network, central, integration | Central hub, connectivity |
| `checkmark` | check, complete, done, verify, success, confirm | Confirmation, benefits, checklists |
**Auto-detection**: If no illustration is specified, the engine auto-detects based on slide content keywords.
### Images
```markdown
```
| Directive | Effect | Layout |
|-----------|--------|--------|
| `image` | Replaces the SVG illustration with a photo in any illustration layout | Works with `split`, `split-reverse`, `left`, `right`, etc. |
| `bg-image` | Full-bleed photo background with dark overlay and centered content | Auto-selects `bg-image` layout |
### Image Grid Options
When using image cards (`- `), these directives control the grid:
```markdown
```
| Columns | Default Aspect Ratio | Best For |
|---------|---------------------|----------|
| 3 | `4/3` | Standard galleries |
| 4 | `16/10` | Wider captioned cards |
| 6 | `9/16` (portrait) | Phone screenshots |
### Panel Styling (Split-Reverse)
For `split-reverse` layouts, control the right-side accent panel:
```markdown
```
When `panel-theme: dark` is set and no image is present, a constellation network pattern is auto-generated in the panel.
### Banners
```markdown
```
| Banner Type | Appearance | Use Case |
|-------------|------------|----------|
| `diagonal-banner` + `dark` | Navy diagonal strip with white text | Category labels, callouts |
| `diagonal-banner` + `red` | Red diagonal strip with white text | CTAs, urgent messages |
| `footer-banner` | Full-width strip at bottom | Taglines, supplementary info |
### Branding & Badges
```markdown
```
### Cover Slide Directives
```markdown
```
### Contact Info
```markdown
```
Renders a contact footer with pipe-separated items.
### Feature Styling
```markdown
```
When set, feature list descriptions render in bold red Oswald italic uppercase — ideal for product feature callouts.
### Heading Size
```markdown
```
### Display Control
```markdown
```
### Date Badge
```markdown
```
Displays a date badge (typically used with hero layout for title slides).
---
## Content Types
### Standard Text
```markdown
# Overline Text
## Main Heading with **Accented Word**
Regular paragraph text. Use **bold** for emphasis.
> This is a quote or callout block.
```
**Inline formatting:**
- `**text**` → Bold (in headings: accent color highlight)
- `==text==` → Highlight (bright background emphasis)
- `*text*` → Italic (wrapping entire heading makes it italic)
- `**→ text**` → Call-to-action style (orange arrow formatting)
- `{{seal}}` → Inline Sardius seal SVG badge
### Bullet Lists
```markdown
- First bullet point
- Second bullet point with **bold**
- Third point
```
### Arrow Bullet Lists
Circle-arrow icon bullets for emphasis lists. Supports `**bold**` within items.
```markdown
- >> **LONG DELAYS** between events and feedback.
- >> **QUALITY ISSUES** across sites, often undetected.
- >> **COMMUNICATION INCONSISTENCIES** that compound over time.
```
### Feature Lists (with descriptions)
Arrow-prefixed items with bold title and pipe-separated description. Best with `split-reverse` layout.
```markdown
- -> **Real Time Monitoring** | REAL TIME MONITORING
- -> **Instant Access** | INSTANT ACCESS
- -> **White Labeling** | WHITE LABELING
```
Combine with `` for bold red uppercase descriptions.
### Icon Cards (4-column grid)
For feature grids with icons. Format: `- EMOJI | Title | Description`
```markdown
- 🔍 | Discovery | Help users find content with AI
- 🚀 | Expansion | Open new markets and capabilities
- ✨ | Polish | Make the experience feel right
- 🔗 | Integration | Meet users where they are
```
**Renders as**: 4-column card grid with colored accent lines.
### Stat Cards
For highlighting key metrics. Format: `- **VALUE** | Label`
```markdown
- **$2.5M** | Annual Revenue
- **99.99%** | Uptime SLA
- **150+** | Enterprise Clients
```
**Renders as**: Large value with label below, animated number counting on slide entry.
### Progress Bars
For showing completion percentages. Format: `- [XX%] | Label`
```markdown
- [90%] | SonLife Launch
- [75%] | Bitmovin Player
- [60%] | AI Discovery Phase 1
- [50%] | Client Migrations
```
**Renders as**: Horizontal progress bars with percentage labels.
### Image Cards
Photo grids with optional captions. Respects `image-cols`, `image-shadow`, and `image-aspect` directives.
```markdown
- 
- 
- 
```
**Renders as**: Responsive image grid. Caption text appears below each image.
### Badge Grid
Pill-style badge items for benefits or feature lists.
```markdown
- {badge} Reduce Travel Costs
- {badge} Improve Feedback Timing
- {badge} Speed Up Review
- {badge} Increase Quality Consistency
```
**Renders as**: Grid of pill badges with staggered entrance animation.
### Tag Pills
Inline pill badges with a tag label. Format: `- [tag] Label Text`
```markdown
- [new] AI-Powered Search
- [beta] Mobile App
- [live] Streaming Platform
```
**Note**: `[NN%]` patterns are treated as progress bars, not tags.
### Timeline (Roadmap Layout)
For roadmap/timeline slides. Format: `- * PERIOD | Description` (asterisk = completed/active)
```markdown
# The Year Ahead
- * Q1 | Product launch, client migrations
- * Q2 | Platform expansion, new features
- Q3 | New product launch
- Q4+ | Infrastructure hardening
```
**Asterisk prefix (`*`)**: Marks item as active/completed (fills progress rail to that point).
---
## Complete Slide Examples
### Cover Slide (Branded)
```markdown
## SARDIUS MEDIA
PULSE {{seal}}
```
### Title Slide (Hero)
```markdown
# Company Name
## 2026 **Product Roadmap**
Running together at speed.
```
### Feature Explanation (Split)
```markdown
# AI Discovery
## Find Content **Instantly**
> Our AI helps audiences find exactly what they need.
Visual search and smart recommendations transform how users interact with your video library.
```
### Problem Statement (Split-Reverse with Dark Panel)
```markdown
## MANAGING MULTIPLE LOCATIONS CREATES ==LAG TIME, BLIND SPOTS,== AND OTHER ISSUES
- >> **LONG DELAYS** between events and feedback.
- >> **QUALITY ISSUES** across sites, often undetected.
- >> **COMMUNICATION INCONSISTENCIES** that compound over time.
```
### Split-Reverse with Photo
```markdown
## WHEN REVIEW TAKES DAYS, ==EXCELLENCE== TAKES A HIT
- >> Teams move on before receiving feedback
- >> Small issues become major problems
- >> Brand inconsistencies spread unchecked
```
### Product Features (Bold-Red Style)
```markdown
# INTRODUCING PULSE
## ATTEND EVERY LOCATION SIMULTANEOUSLY
Pulse enables administrators to watch events live across multiple sites.
- -> **Real Time Monitoring** | REAL TIME MONITORING
- -> **Instant Access** | INSTANT ACCESS
- -> **White Labeling** | WHITE LABELING
```
### Image Gallery with Captions
```markdown
## SIMPLE INTEGRATION, **POWERFUL RESULTS**
- 
- 
- 
- 
```
### Diagonal Banner with Image Grid
```markdown
- 
- 
- 
- 
```
### Badge Grid with Illustration
```markdown
## *TRANSFORM YOUR OPERATION WITH INSTANT INSIGHTS*
- {badge} Reduce Travel Costs
- {badge} Improve Feedback Timing
- {badge} Speed Up Review
- {badge} Increase Quality Consistency
```
### Footer Banner with Images
```markdown
## INTEGRATE PULSE WITH YOUR **COMPLETE BROADCAST STRATEGY**
- 
- 
- 
```
### Background Image with CTA
```markdown
```
### Data/Metrics Slide (Center)
```markdown
# Q1 Results
## Strong **Performance**
- **$2.5M** | Revenue
- **142%** | YoY Growth
- **99.99%** | Uptime
```
### Icon Cards (Center)
```markdown
# Strategic Themes
## Four Pillars, **One Direction**
- 🔍 | Use Their Content | Help clients discover and repurpose video with AI
- 🔗 | Meet Them Where They Are | Integrate with tools clients already use
- 🚀 | Expand What's Possible | New markets, platforms, and capabilities
- ✨ | Make It Feel Right | Polish the experience, earn trust
```
### Progress Slide (Center)
```markdown
# Q1 Commitments
## What's **Locked In**
- [90%] | SonLife Launch
- [75%] | Bitmovin Player
- [60%] | AI Discovery Phase 1
- [50%] | Client Migrations
```
### Roadmap Timeline
```markdown
# The Year Ahead
## Where We're **Headed**
- * Q1 | SonLife launch, AI Discovery, Bitmovin player, client migrations
- * Q2 | App platform unification, Android TV, Samsung TV, LG TV, AI Phase 2
- Q3 | Sardius Relay launch, mobile app beta, new TV store submissions
- Q4+ | Mobile app launch, infrastructure hardening, monetization
```
### Phone Screenshots (6-col Portrait)
```markdown
## IPHONE **EXAMPLES**
- 
- 
- 
- 
- 
- 
```
### Closing Slide (Top)
```markdown
# What's Next
## Let's **Build This Together**
This roadmap evolves. Your input shapes what comes next.
**→ Let's go build.**
```
---
## Full Presentation Template
```markdown
## COMPANY NAME
PRODUCT {{seal}}
---
## THE PROBLEM STATEMENT WITH ==HIGHLIGHTED WORDS==
- >> **KEY ISSUE ONE** that needs addressing.
- >> **KEY ISSUE TWO** that compounds the problem.
- >> **KEY ISSUE THREE** that creates urgency.
---
## WHEN THE PROBLEM PERSISTS, ==IMPACT== GROWS
- >> First consequence of inaction
- >> Second consequence of inaction
- >> Third consequence of inaction
---
# INTRODUCING PRODUCT
## SOLVE THE PROBLEM COMPLETELY
Description of the product and its value proposition.
- -> **Feature One** | FEATURE ONE DESCRIPTION
- -> **Feature Two** | FEATURE TWO DESCRIPTION
- -> **Feature Three** | FEATURE THREE DESCRIPTION
---
## SIMPLE INTEGRATION, **POWERFUL RESULTS**
- 
- 
- 
- 
---
## BUILT FOR EXCELLENCE
- -> **Capability** | CAPABILITY DESCRIPTION
- -> **Feature** | FEATURE DESCRIPTION
- -> **Integration** | INTEGRATION DESCRIPTION
---
- 
- 
- 
- 
---
## *TRANSFORM YOUR OPERATIONS*
- {badge} Benefit One
- {badge} Benefit Two
- {badge} Benefit Three
- {badge} Benefit Four
---
## INTEGRATE WITH YOUR **EXISTING WORKFLOW**
- 
- 
- 
---
```
---
## All Directives (Quick Reference)
| Directive | Values | Purpose |
|-----------|--------|---------|
| `theme` | `dark`, `light` | Slide color scheme |
| `layout` | `cover`, `hero`, `center`, `split`, `split-reverse`, `left`, `right`, `top`, `bg`, `bg-image`, `two-col`, `roadmap` | Content positioning |
| `illustration` | See illustration table | SVG illustration |
| `image` | URL | Photo replacing illustration |
| `bg-image` | URL | Full-bleed background photo |
| `image-cols` | `3`, `4`, `6`, etc. | Image grid columns |
| `image-shadow` | `true` | Shadow on image cards |
| `image-aspect` | CSS ratio (`16/9`) | Override image aspect ratio |
| `date` | String | Date badge |
| `corner-badge` | `true` | Corner logo badge |
| `brand-logo` | Position string | Brand logo |
| `logo` | `centered` | Centered logo |
| `names` | Comma-separated | Names pill on cover |
| `contact` | Pipe-separated | Contact info footer |
| `panel-bg` | Color/CSS value | Accent panel background |
| `panel-theme` | `dark`, `light` | Panel text theme |
| `diagonal-banner` | Text | Diagonal overlay banner |
| `diagonal-banner-theme` | `dark`, `red` | Banner color |
| `footer-banner` | Text | Bottom banner strip |
| `feature-style` | `bold-red` | Feature list styling |
| `heading-size` | `sm`, `md`, `lg`, `xl` | Heading font size |
| `no-geo` | Flag | Disable hex background |
| `no-ambient` | Flag | Disable floating shapes |
## All Content Patterns (Quick Reference)
| Pattern | Format | Purpose |
|---------|--------|---------|
| Overline | `# Text` | Small text above heading |
| Heading | `## Text with **Accent**` | Main slide title |
| Highlight | `==highlighted text==` | Bright emphasis in headings |
| Seal | `{{seal}}` | Inline seal badge |
| CTA | `**→ Action text**` | Call-to-action styling |
| Quote | `> Text` | Pull-quote block |
| Bullets | `- Text` | Standard bullet list |
| Arrow bullets | `- >> **Bold** text` | Emphasis bullet list |
| Feature list | `- -> **Title** \| Description` | Feature with description |
| Stats | `- **Value** \| Label` | Metric cards |
| Icon cards | `- emoji \| Title \| Description` | Feature grid |
| Progress | `- [NN%] \| Label` | Progress bars |
| Timeline | `- * Label \| Description` | Roadmap items |
| Image cards | `- ` | Photo grid |
| Badges | `- {badge} Text` | Pill badge grid |
| Tags | `- [tag] Label` | Tag pill badges |
---
## Best Practices
### Visual Rhythm
- Alternate `dark` and `light` themes between slides
- Use `cover` or `hero` for opening, `top` or `bg-image` for closing
- Don't use the same layout for consecutive slides
- Use `no-geo` on image-heavy slides to reduce visual noise
### Content Balance
- Keep headings concise (3-7 words)
- Limit bullet points to 3-6 per slide
- One main idea per slide
- Use `==highlights==` sparingly for maximum impact
### Accent Words
- Use `**word**` to highlight ONE key word per heading
- Place accent on the most impactful word
- Example: `## Everyone Running at **Full Speed**`
### Image Grids
- Use 3 columns for standard galleries
- Use 4 columns for wider captioned cards
- Use 6 columns for phone screenshots (portrait)
- Add `image-shadow: true` for depth on white backgrounds
### Feature Lists
- Use `- >>` for problem statements (arrow bullets)
- Use `- ->` for product features (with descriptions)
- Combine with `feature-style: bold-red` for product callouts
### Split-Reverse Panels
- Use `panel-bg: var(--midnight)` with `panel-theme: dark` for dark constellation panels
- Use `panel-bg: #FCE8E4` for light pink accent panels
- Add an `image` directive to fill the panel with a photo instead
### Timelines
- Mark completed items with `*` prefix
- Keep period labels short (Q1, Phase 1, 2024)
- Descriptions should be scannable phrases
---
## Common Patterns
### Product Sales Deck
1. Cover slide (branded with seal and names)
2. Problem statement (split-reverse, dark panel, arrow bullets)
3. Problem detail (split-reverse with photo, arrow bullets)
4. Product intro (split-reverse, feature list, bold-red)
5. Integration gallery (center, 4-col images with shadows)
6. Feature deep-dive (split-reverse, dark panel, feature list)
7. Target audience (center, diagonal banner, image grid)
8. Benefits (center, badge grid with illustration)
9. Ecosystem (center, footer banner, 3-col images)
10. CTA (bg-image, diagonal banner red, contact info)
11. Screenshots / demos (center, image grids at various column counts)
### Problem → Solution Flow
1. Hero slide (title)
2. Light slide with problem description
3. Dark slide with solution overview
4. Light slide with detailed features
5. Dark roadmap or timeline
6. Light metrics/proof
7. Dark closing with CTA
### Product Announcement
1. Hero slide (product name)
2. Why it matters (split, light)
3. Key features (icon cards, dark)
4. How it works (split, light)
5. Timeline (roadmap, dark)
6. Call to action (top, dark)
### Quarterly Review
1. Hero slide (quarter title)
2. Key achievements (icon cards)
3. Metrics (progress bars)
4. Challenges/learnings (split)
5. Next quarter priorities (roadmap)
6. Closing (top)
---
## Validation Checklist
Before finalizing, verify:
- [ ] Every slide has `---` separator (except first)
- [ ] Directives use correct syntax: ``
- [ ] Theme is either `dark` or `light`
- [ ] Layout matches content type (roadmap for timelines, etc.)
- [ ] Illustration names are from the valid list
- [ ] Icon cards use `EMOJI | Title | Description` format
- [ ] Progress bars use `[XX%] | Label` format
- [ ] Timeline items use `* ` prefix for active items
- [ ] Accent words use `**word**` format in headings
- [ ] Image URLs are valid and accessible
- [ ] Feature lists use `- -> **Title** | Description` format
- [ ] Arrow bullets use `- >> Text` format
- [ ] Badges use `- {badge} Text` format
- [ ] Tags use `- [tag] Label` format (not `[NN%]`)
- [ ] `no-geo` is set on slides with image grids
- [ ] `corner-badge: true` is consistent across non-cover slides
- [ ] Visual rhythm alternates themes appropriately