Formula Botanica Slide Deck Generator
Core Principle
Create beautiful, on-brand presentations instantly. Generate complete HTML-based slide decks that match Formula Botanica's botanical aesthetic with zero setup required.
When to Activate
Activate this skill when user:
- Asks to create a "presentation" or "slide deck"
- Mentions "Formula Botanica" or "botanical slides"
- Requests slides for finance processes, SOPs, or team presentations
- Wants to visualize data with charts, tables, or diagrams
- Says "create slides about [topic]"
Do NOT ask questions about branding - automatically apply Formula Botanica design system.
Formula Botanica Brand System (MANDATORY)
Brand Colors
Primary Green Palette:
--green-primary: #009247; /* Main brand green */
--green-accent: #8cc644; /* Bright lime green */
--green-light: #D0E6B5; /* Light sage green */
--green-sage: #92AC86; /* Medium sage */
--green-dark: #273C2C; /* Dark forest green */
Supporting Colors:
--grey-light: #D9E0E3; /* Light grey for backgrounds */
--grey-medium: #808287; /* Medium grey for text */
--grey-dark: #515052; /* Dark grey for headings */
--grey-darker: #383C3A; /* Darker grey for emphasis */
--grey-darkest: #282828; /* Almost black */
--red-cta: #C40000; /* Bright red for CTAs/buttons */
Usage Guidelines:
- Primary text: Dark grey (#515052) - NOT green (makes text harder to read)
- Headings: Use green (#009247 or #8cc644) for visual impact
- Backgrounds: White or light grey (#D9E0E3) with green accents
- Buttons/CTAs: Bright red (#C40000) for high click-through rates
- Offset greenery with lighter and darker greys
Typography
Primary Fonts (Google Fonts):
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&family=Futura+PT:wght@700&family=Lovelo:wght@900&display=swap" rel="stylesheet">
Font Hierarchy:
/* Logo & Course Covers */
font-family: 'Roboto', sans-serif;
font-weight: 300; /* Light */
font-weight: 400; /* Thin */
/* Body Text (Written Materials) */
font-family: 'Roboto', sans-serif;
font-weight: 400;
/* Fallback Sans-Serif */
font-family: Arial, sans-serif;
/* Website Headings (ALL-CAPS ONLY) */
font-family: 'Futura PT', sans-serif; /* If unavailable, use Arial */
text-transform: uppercase;
/* Canva Headers & Quotes (ALL-CAPS ONLY) */
font-family: 'Lovelo', sans-serif;
text-transform: uppercase;
font-weight: 900;
/* NOT for body text */
/* Botanical Table of Elements (Sans Serif) */
font-family: 'Century Gothic', sans-serif;
Typography Rules:
- NEVER use Lovelo for body text - headers and quotes only
- ALWAYS use ALL-CAPS for Futura PT and Lovelo headings
- Body text: Roboto 400 (regular), dark grey color
- Slide titles: Lovelo 900, all-caps, green (#009247)
- Subtitles: Futura PT, all-caps, medium grey
Logo Usage
Two Main Logos:
-
Main Logo (Horizontal)
- Two green colors: #009247 (dark green) and #8cc644 (bright lime)
- White background
- Text: "FORMULA BOTANICA" (grey + green two-tone lettering)
- Botanical leaf star motif above text
-
Social Media Logo (Circular)
- Two green colors: #009247 and #8cc644
- White background
- Circular botanical leaf star motif
- No text version for icons
Logo Placement:
- Footer: Bottom right or bottom center of every slide
- Use as SVG/CSS recreation (no external image dependencies)
- Maintain aspect ratio
- Minimum clear space around logo
Slide Structure
Standard Slide Layout:
<section class="slide">
<!-- Decorative botanical element (optional) -->
<div class="botanical-accent"></div>
<!-- Slide header -->
<h1 class="slide-title">SLIDE TITLE IN ALL-CAPS</h1>
<h2 class="slide-subtitle">Optional Subtitle</h2>
<!-- Content area -->
<div class="slide-content">
<!-- Text, charts, tables, images -->
</div>
<!-- Footer with logo -->
<footer class="slide-footer">
<div class="fb-logo"></div>
</footer>
</section>
Slide Types:
-
Title Slide
- Large title (Lovelo, all-caps, green)
- Subtitle/description
- Large botanical background motif
- Logo bottom right
-
Content Slide
- Title (Lovelo, all-caps, green)
- Bullet points or paragraphs (Roboto, dark grey)
- Optional chart or image
- Logo footer
-
Chart/Data Slide
- Title
- Chart visualization (bar, pie, line, flow diagram)
- Data table below (optional)
- Logo footer
-
Process Flow Slide
- Title
- Step-by-step boxes with arrows
- Green accents on active steps
- Logo footer
-
Section Divider Slide
- Large section title
- Full botanical background
- Minimal text
- Logo footer
Complete CSS Template (Use This Exactly)
/* === FORMULA BOTANICA SLIDE DECK STYLES === */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
/* Root Variables */
:root {
/* Brand Colors */
--green-primary: #009247;
--green-accent: #8cc644;
--green-light: #D0E6B5;
--green-sage: #92AC86;
--green-dark: #273C2C;
--grey-light: #D9E0E3;
--grey-medium: #808287;
--grey-dark: #515052;
--grey-darker: #383C3A;
--grey-darkest: #282828;
--red-cta: #C40000;
/* Typography */
--font-body: 'Roboto', Arial, sans-serif;
--font-heading: 'Roboto', Arial, sans-serif;
}
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background: var(--grey-light);
color: var(--grey-dark);
line-height: 1.6;
overflow-x: hidden;
}
/* Slide Container */
.slide-deck {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Individual Slide */
.slide {
background: white;
width: 100%;
min-height: 600px;
padding: 60px 80px;
margin-bottom: 40px;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
display: flex;
flex-direction: column;
page-break-after: always;
}
/* Botanical Accent Elements */
.botanical-accent {
position: absolute;
top: 20px;
right: 20px;
width: 120px;
height: 120px;
background: radial-gradient(circle, var(--green-accent) 0%, var(--green-primary) 100%);
opacity: 0.1;
border-radius: 50%;
z-index: 0;
}
.botanical-accent::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background: var(--green-light);
border-radius: 50%;
opacity: 0.5;
}
/* Slide Titles */
.slide-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 48px;
color: var(--green-primary);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 16px;
z-index: 1;
}
.slide-subtitle {
font-family: var(--font-heading);
font-weight: 400;
font-size: 24px;
color: var(--grey-medium);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 32px;
z-index: 1;
}
/* Content Area */
.slide-content {
flex: 1;
z-index: 1;
margin-bottom: 40px;
}
/* Typography */
.slide-content h3 {
font-size: 28px;
color: var(--green-primary);
margin-top: 24px;
margin-bottom: 12px;
text-transform: uppercase;
}
.slide-content p {
font-size: 18px;
line-height: 1.8;
margin-bottom: 16px;
color: var(--grey-dark);
}
.slide-content ul,
.slide-content ol {
margin-left: 32px;
margin-bottom: 16px;
}
.slide-content li {
font-size: 18px;
line-height: 1.8;
margin-bottom: 12px;
color: var(--grey-dark);
}
.slide-content strong {
color: var(--green-primary);
font-weight: 700;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
}
thead {
background: var(--green-primary);
color: white;
}
th {
padding: 16px;
text-align: left;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
td {
padding: 12px 16px;
border-bottom: 1px solid var(--grey-light);
}
tbody tr:hover {
background: rgba(140, 198, 68, 0.05);
}
/* Buttons/CTAs */
.cta-button {
background: var(--red-cta);
color: white;
padding: 16px 32px;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
text-decoration: none;
}
.cta-button:hover {
background: #a00000;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(196, 0, 0, 0.3);
}
/* Footer */
.slide-footer {
display: flex;
justify-content: center;
align-items: center;
padding-top: 24px;
border-top: 2px solid var(--grey-light);
}
/* Formula Botanica Logo (CSS Recreation) */
.fb-logo {
font-family: var(--font-heading);
font-weight: 300;
font-size: 18px;
color: var(--grey-medium);
letter-spacing: 2px;
display: flex;
align-items: center;
gap: 12px;
}
.fb-logo::before {
content: '';
width: 40px;
height: 40px;
background: radial-gradient(circle, var(--green-accent) 0%, var(--green-primary) 100%);
border-radius: 50%;
display: inline-block;
position: relative;
}
.fb-logo::after {
content: 'FORMULA BOTANICA';
color: var(--grey-dark);
font-weight: 700;
}
/* Process Flow Boxes */
.process-flow {
display: flex;
gap: 24px;
align-items: center;
margin: 32px 0;
flex-wrap: wrap;
}
.process-step {
flex: 1;
min-width: 200px;
padding: 24px;
background: white;
border: 3px solid var(--green-light);
border-radius: 8px;
text-align: center;
position: relative;
}
.process-step.active {
border-color: var(--green-primary);
background: rgba(0, 146, 71, 0.05);
}
.process-step h4 {
font-size: 20px;
color: var(--green-primary);
margin-bottom: 8px;
text-transform: uppercase;
}
.process-step p {
font-size: 14px;
color: var(--grey-dark);
}
.process-arrow {
font-size: 32px;
color: var(--green-accent);
}
/* Chart Styles */
.chart-container {
width: 100%;
max-width: 800px;
margin: 32px auto;
padding: 24px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* Highlight Boxes */
.highlight-box {
background: rgba(140, 198, 68, 0.1);
border-left: 4px solid var(--green-accent);
padding: 20px;
margin: 24px 0;
border-radius: 4px;
}
.highlight-box h4 {
color: var(--green-primary);
margin-bottom: 8px;
text-transform: uppercase;
}
/* Title Slide Specific */
.slide.title-slide {
justify-content: center;
text-align: center;
background: linear-gradient(135deg, rgba(140, 198, 68, 0.1) 0%, rgba(0, 146, 71, 0.05) 100%);
}
.slide.title-slide .slide-title {
font-size: 64px;
margin-bottom: 24px;
}
.slide.title-slide .botanical-accent {
width: 300px;
height: 300px;
opacity: 0.15;
}
/* Section Divider Slide */
.slide.section-divider {
justify-content: center;
text-align: center;
background: var(--green-primary);
color: white;
}
.slide.section-divider .slide-title {
color: white;
font-size: 56px;
}
/* Print Styles */
@media print {
.slide {
margin-bottom: 0;
box-shadow: none;
}
body {
background: white;
}
}
/* Responsive */
@media (max-width: 768px) {
.slide {
padding: 40px 32px;
min-height: auto;
}
.slide-title {
font-size: 36px;
}
.process-flow {
flex-direction: column;
}
}
Slide Generation Process
1. Understand User Request
- Topic/content for presentation
- Target audience (team, stakeholders, etc.)
- Presentation type (finance SOP, process flow, data analysis, etc.)
2. Auto-Generate Slide Structure
For Finance SOPs:
Slide 1: Title Slide - "FINANCE PROCESS OVERVIEW"
Slide 2: Process Summary - Key points
Slide 3: Step-by-Step Flow - Process diagram
Slide 4-N: Individual Process Details - One per major step
Slide N+1: Key Metrics/Data - Charts if applicable
Slide N+2: Action Items/Next Steps
For Team Presentations:
Slide 1: Title Slide - Topic name
Slide 2: Agenda/Overview
Slide 3-N: Content slides - Main points
Slide N+1: Key Takeaways
Slide N+2: Q&A or Next Steps
For Data Analysis:
Slide 1: Title Slide - Analysis topic
Slide 2: Executive Summary
Slide 3-N: Data visualization slides - Charts/graphs
Slide N+1: Insights & Recommendations
Slide N+2: Action Plan
3. Apply Brand Styling Automatically
- All titles: Lovelo-style (bold Roboto 700), all-caps, green
- All body text: Roboto 400, dark grey
- Charts: Green color scheme with grey accents
- Tables: Green headers, white/light grey alternating rows
- CTAs: Red buttons (#C40000)
- Footer: Formula Botanica logo on every slide
4. Include Visuals
Charts (Use Chart.js or CSS-based visuals):
<!-- Bar Chart Example -->
<canvas id="barChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('barChart'), {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Revenue',
data: [12, 19, 3, 5],
backgroundColor: '#009247'
}]
},
options: {
responsive: true,
plugins: {
legend: { display: true }
}
}
});
</script>
Process Flow Diagrams:
<div class="process-flow">
<div class="process-step active">
<h4>Step 1</h4>
<p>Initial Setup</p>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<h4>Step 2</h4>
<p>Data Collection</p>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<h4>Step 3</h4>
<p>Analysis</p>
</div>
</div>
Complete HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentation Title - Formula Botanica</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<style>
/* [Complete CSS from above] */
</style>
</head>
<body>
<div class="slide-deck">
<!-- ========== TITLE SLIDE ========== -->
<section class="slide title-slide">
<div class="botanical-accent"></div>
<h1 class="slide-title">PRESENTATION TITLE</h1>
<h2 class="slide-subtitle">Subtitle or Description</h2>
<footer class="slide-footer">
<div class="fb-logo"></div>
</footer>
</section>
<!-- ========== CONTENT SLIDE ========== -->
<section class="slide">
<div class="botanical-accent"></div>
<h1 class="slide-title">SLIDE TITLE</h1>
<div class="slide-content">
<p>Content goes here...</p>
<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
<li>Bullet point 3</li>
</ul>
</div>
<footer class="slide-footer">
<div class="fb-logo"></div>
</footer>
</section>
<!-- ========== PROCESS FLOW SLIDE ========== -->
<section class="slide">
<div class="botanical-accent"></div>
<h1 class="slide-title">PROCESS OVERVIEW</h1>
<div class="slide-content">
<div class="process-flow">
<div class="process-step active">
<h4>Step 1</h4>
<p>Description</p>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<h4>Step 2</h4>
<p>Description</p>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<h4>Step 3</h4>
<p>Description</p>
</div>
</div>
</div>
<footer class="slide-footer">
<div class="fb-logo"></div>
</footer>
</section>
<!-- ========== SECTION DIVIDER ========== -->
<section class="slide section-divider">
<h1 class="slide-title">SECTION TITLE</h1>
<footer class="slide-footer">
<div class="fb-logo"></div>
</footer>
</section>
</div>
<!-- Navigation (Optional) -->
<script>
// Add keyboard navigation
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) {
currentSlide++;
slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
}
if (e.key === 'ArrowLeft' && currentSlide > 0) {
currentSlide--;
slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
}
});
</script>
</body>
</html>
File Naming Convention
[topic]-slides-[date].html
Examples:
- finance-sop-slides-2025-10-19.html
- team-quarterly-review-slides-2025-10-19.html
- process-documentation-slides-2025-10-19.html
Quality Checklist
Before delivering, verify:
- ✅ All titles in ALL-CAPS (Lovelo style with bold Roboto)
- ✅ Green color scheme (#009247 primary, #8cc644 accent)
- ✅ Dark grey body text (#515052) - NOT green
- ✅ Roboto font family for all text
- ✅ Formula Botanica logo in footer of every slide
- ✅ Botanical accent elements (circles/leaves) for visual interest
- ✅ Red CTA buttons if applicable (#C40000)
- ✅ Charts use green color palette
- ✅ Tables have green headers
- ✅ Process flows have green borders and accents
- ✅ Responsive layout (works on mobile)
- ✅ Print-friendly styles included
- ✅ Keyboard navigation (arrow keys)
- ✅ Standalone HTML (no external dependencies except Google Fonts)
Success Criteria
This skill works correctly when:
- ✅ User requests slides → Full branded presentation generated
- ✅ All slides match Formula Botanica brand guidelines exactly
- ✅ No questions asked about fonts/colors (auto-applied)
- ✅ Process flows, charts, tables styled correctly
- ✅ Presentation opens in browser and is immediately usable
- ✅ Can be printed or exported to PDF
- ✅ Keyboard navigation works (arrow keys)
- ✅ Logo appears on every slide
- ✅ Content is clear, well-structured, and professional