AIOS Presentation Standard

When to Use Each Variant

Always start from a template in templates/ rather than writing from scratch.

Template Library

White Mode (AIOS Official Curriculum)

Dark Mode (Online Presentations)

1. Design System

Color Palettes

Typography

• Headings: Inter Tight — weights 600, 800
• Mono/Labels: JetBrains Mono — weights 400, 700
• Minimum sizes: 13px footer; 16px descriptions; 20px body; 24px subtitles; 46–80px h1

Slide Dimensions

• Width: 1280px, min-height: 720px
• Content slides: padding: 60px 80px 80px
• Title slides: padding: 80px 100px 80px
• Never less than 80px bottom — the chrome zone (footer + logo) occupies ~70px

2. Required Chrome (Every Slide)

All three elements MUST be inside .slide-container.

Top-Right: AIOS Icon

.aios-icon-topright {
    position: absolute; top: 40px; right: 40px;
    width: 50px; height: 50px; object-fit: contain;
}

Bottom-Right: AIOS Logo Wordmark

/* White mode: color wordmark */
.aios-logo-bottom {
    position: absolute; bottom: 8px; right: 40px;
    height: 48px; width: auto; object-fit: contain;
}
/* Dark mode: white wordmark lockup */
.aios-lockup { position: absolute; bottom: 20px; right: 80px; display: flex; align-items: center; }
.aios-lockup-icon { height: 36px; width: auto; object-fit: contain; }

Centering math (white mode): footer text center = bottom: ~32px; logo center = 8 + 24 = 32px. ✓

Bottom-Left: Footer Text (white mode, non-title slides only)

.slide-footer {
    position: absolute; bottom: 24px; left: 40px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; color: #f44800;
    font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
}

Standard footer text: AI FOR BUSINESS PROFESSIONALS | BEYOND THE PROMPT: CREATING REPRODUCIBLE WORKFLOWS

3. Content Delivery Patterns

Both variants use the same content structure — only the visual treatment differs. Match the slide type to the pattern below.

Pattern A — Hook / Problem Statement

White: Large h1 with border-bottom: 2px solid #111111 header divider. Subtitle in JetBrains Mono. Key stat in large orange text. Dark: Same structure. Stat boxes use border: 1px solid #333; background: #1A1D24. Highlight box: border-left: 4px solid #f44800; background: rgba(244,72,0,0.1).

<!-- White example (from white_content_slide.html) -->
<div class="header">
    <h1>Why AI is Different</h1>
    <p class="subtitle">// It's not just another tech upgrade.</p>
</div>
<div class="comparison-container">
    <div class="side old"> ... Previous Tech ... </div>
    <div class="side new"> ... Generative AI ... </div>
</div>

Pattern B — Data / Gap Visualization

Use CSS horizontal bars (not Chart.js) for maximum reliability. See white_chart_slide.html.

<div class="bar-track">
    <div class="bar-fill access"><span class="bar-pct">~100%</span></div>
</div>
<div class="gap-callout">
    <div class="gap-line"></div><div class="gap-label">92% Gap</div><div class="gap-line"></div>
</div>
<div class="bar-track">
    <div class="bar-fill workflow"><span class="bar-pct-outside">&lt;8%</span></div>
</div>

Pattern C — Framework / Process Flow

5-step horizontal layout. Orange letter, bold title, short description. Arrow connectors between steps.

<!-- White example (from white_framework_slide.html) -->
<div class="framework-container">
    <div class="connector"></div>
    <div class="step-box">
        <div class="letter">S</div>
        <div class="step-title">Sort</div>
        <div class="step-desc">Audit your tasks.</div>
    </div>
    <!-- repeat for M, A, R, T -->
</div>

Dark variant: Replace step-box with step-card (dark background), add ::after arrow connector. See dark_framework_slide.html.

Pattern D — Action Plan / Closing

3-column card grid. Numbered steps with time badges. One card highlighted in orange.

<!-- White example (from white_action_plan_slide.html) -->
<div class="plan-grid">
    <div class="plan-card">
        <span class="step-number">01</span>
        <div class="time-badge">1 Hour</div>
        <div class="card-title">Audit</div>
        <div class="card-desc">Identify one repetitive task.</div>
    </div>
    <div class="plan-card highlight"> ... </div>
    <div class="plan-card"> ... </div>
</div>

Pattern E — Stats / Evidence

Large numbers (80–96px) with supporting labels. Use 2×2 grid for 4 stats.

<!-- Dark example (from dark_content_slide.html) -->
<div class="stats-grid">
    <div class="stat-box highlight">
        <div class="stat-number">77<span class="stat-sup">%</span></div>
        <div class="stat-label">Use AI at least weekly</div>
        <div class="stat-desc">But only for one-off tasks</div>
    </div>
    <!-- repeat -->
</div>
<div class="insight-box">
    <p class="insight-text">The gap isn't <strong>access</strong> — it's <strong>workflow</strong>.</p>
</div>

4. Key Differences Between Variants

5. Common Editor Artifacts to Strip

The slide editor injects these — always remove when editing HTML directly:

• <ms-img style="..."><img ...></ms-img> → replace with clean <img class="aios-logo-bottom">
• style="transform: translate(...)" on .slide-footer or logo → remove the style attribute
• Logo <img> placed after closing </div> of .slide-container → move inside

6. Narrative Structure (45-Min Deck)

7. Quality Checklist

• Logo inside .slide-container, not outside
• padding-bottom: 80px minimum on .slide-container
• Non-title slides: footer text present, no inline transforms
• Logo: height: 48px, bottom: 8px, right: 40px (white); height: 36px, bottom: 20px, right: 80px (dark)
• No <ms-img> wrappers remaining
• No broken image src paths
• Charts: CSS bars preferred; Chart.js canvas wrapped in <div style="height: 300px;">
• Footer spelling: "PROFESSIONALS" not "PROFESSIONAS"; "REPRODUCIBLE" not "REPRODUCTIBLE"
• Title slide: no footer text; logo present
• PDF export: minimum 20pt readable text in output (verify with font audit script)

8. PDF Export Standard

CRITICAL: Always use scripts/render_slides_to_pdf.py when exporting to PDF. Do NOT use the default Chromium headless settings — they scale fonts down by 0.75x.

Root Cause

Chromium renders at 96dpi but prints at 72dpi, applying a 0.75x scale to all fonts. A 20px CSS font becomes 15pt in the PDF without the fix.

The Fix

The render script uses two compensating flags:

1. --force-device-scale-factor=1.333 (= 96/72) — counteracts the dpi conversion
2. @page { size: 1280pt 720pt; margin: 0; } — forces exact slide dimensions with no margins

Usage

# Edit SLIDE_DIR, OUTPUT_PDF, and SLIDE_IDS at the top of the script, then:
python3 scripts/render_slides_to_pdf.py

Verification

After rendering, verify minimum font sizes:

from pypdf import PdfReader
import re
r = PdfReader('output.pdf')
for i, page in enumerate(r.pages):
    content = page.get_contents()
    data = content.get_data().decode('latin-1', errors='replace')
    sizes = [float(s) for s in re.findall(r'(\d+(?:\.\d+)?)\s+Tf', data)]
    # Filter out SVG logo artifacts (always appear as ~4.27pt scaled 3x)
    readable = [s for s in sizes if s > 10]
    if readable:
        print(f'Page {i+1}: min readable = {min(readable):.1f}pt')

Expected minimum: 20pt for body text (= 20px CSS at 1:1 scale).

Upload to Google Drive

import configparser, json, requests
cfg = configparser.ConfigParser()
cfg.read('/home/ubuntu/.gdrive-rclone.ini')
token = json.loads(cfg['manus_google_drive']['token'])['access_token']
with open('output.pdf', 'rb') as f:
    data = f.read()
resp = requests.patch(
    f'https://www.googleapis.com/upload/drive/v3/files/{FILE_ID}?uploadType=media',
    headers={'Authorization': f'Bearer {token}', 'Content-Type': 'application/pdf'},
    data=data
)
print(resp.status_code, resp.json())