# PruTAN — Presentations & Docs Design System Drop-in design system for Reveal.js decks and long-form HTML docs at **presentations.prutan.com**. One set of tokens, two output formats, zero CSS to edit once it's set up. --- ## TL;DR for authors > "I want to make a new deck." 1. Copy `presentations/_template/` to `presentations//`. 2. Open `index.html`. Edit **only** what's between `` and ``. 3. Add one entry to `_manifest.json` at the repo root so the deck shows up in the navigator. That's it. 4. Open the file in a browser. Done. > "I want to publish." Push the repo. The host (Vercel / Netlify / GitHub Pages / S3) serves it as static files. No build step. > "I want a PDF." Open the deck in Chrome, append `?print-pdf` to the URL, then **Print → Save as PDF** at A4 landscape. (This is Reveal.js's built-in export.) --- ## Folder structure ``` prutan-presentations/ ├── shared/ ← LOCKED. Don't touch. │ ├── styles/ │ │ ├── prutan-tokens.css ← brand source of truth (colors, fonts) │ │ ├── prutan-deck.css ← Reveal.js theme + slide patterns │ │ ├── prutan-deck-nav.css ← slide-navigator dropdown │ │ └── prutan-docs.css ← long-form doc theme │ ├── scripts/ │ │ └── prutan-deck.js ← Reveal init + dropdown + logo │ └── assets/ │ ├── prutan-logo.svg ← full wordmark │ └── prutan-mark.svg ← icon only (watermark) ├── presentations/ │ ├── _template/index.html ← starter — copy this │ └── sample/index.html ← full demo of every pattern ├── docs/sample/index.html ← doc example ├── index.html ← landing page └── README.md ``` --- ## Slide cookbook Every pattern is in `presentations/sample/index.html`. Open that file and copy the section you need. Below is the quick reference. ### Title slide ```html

Presentation title

One-line framing of the talk

Your name · Team · Date
``` ### Section divider (chapter break) ```html
Part 01

Section heading

Optional one-liner explaining the section.
``` ### Standard content slide ```html

A clear, scannable title

``` The `data-eyebrow` attribute renders the small uppercase label above the heading. No class needed — just the attribute. ### Two-column layout ```html

Two-up

Option A
…
Option B
…
``` ### Three-column grid (use `.deck-grid-3` or `.deck-grid-4`) ```html
…
…
…
…
…
…
``` ### Card accents available `accent`, `accent-blue`, `accent-teal`, `accent-amber`, `accent-rose`, `accent-violet`, plus `filled-indigo` (filled background, brand emphasis). Each accent is a triplet — a stroke color, a pale background tint, and a deep ink. Add a `…` inside the card to get a matching colored tag: ```html
…
…
Read
``` Use this when slides need to **category-code** content (e.g. all "Read" operations are teal, all "Write" are amber, all "Diagnose" are rose). The eye reads stroke + bg + tag as one unit instead of three. ### Focus mode (opt-in) For complex slides with many cards — landscape diagrams, ecosystem maps, comparison grids — add `data-deck-focus="hover"` to the grid container. Hovering one card dims the others. ```html
…
…
…
``` **When to use:** the deck will be viewed self-paced (shared as URL, read on a laptop, complex slide that rewards scanning). **When NOT to use:** live presenter mode with a speaker on stage — the speaker shouldn't have to avoid hovering the deck. Default is off for exactly this reason. The same pattern works in docs — add `data-focus="hover"` to a `.tiles` or `.flow-grid`. ### Stats / KPIs ```html
6h → 3min
Cert failure diagnosis
Per incident, real data
``` ### Callouts (four flavors) ```html
Note: …
Win: …
Caveat: …
Blocker: …
``` ### Code ```html 
def hello():
    return "world"
``` Syntax highlighting is automatic via the Reveal highlight plugin (Monokai theme). ### Quote slide ```html
The quote text in its own voice. Attribution
``` ### Vertical sub-slides (drill-down) ```html

Three layers

…

Intelligence layer

…

Tenant layer

…
``` Press **↓** during the deck to drill in. The slide navigator shows them indented under the parent. ### End / thank-you slide ```html

Thank you

Questions?

``` --- ## Slide navigator (the dropdown) The pill at the **bottom-left** shows `current / total · current slide title`. Click it to open a panel with two tabs: **Slides** (jump within this deck) and **Decks** (jump to a different deck in the repo). **Switch sides** — change the attribute on `.reveal`: ```html
``` **Override what shows in the navigator** for a specific slide: ```html

The full title that's too long for the nav pill

``` If `data-nav-title` isn't set, the navigator falls back to the first `

/

/

` in the slide. --- ## The presentations manifest The **Decks** tab in the slide navigator lists every other deck in the repo. That list comes from `/_manifest.json` at the repo root. **This is the only file you edit when you add a new deck.** ```json { "presentations": [ { "title": "Q1 Architecture Review", "description": "Read-out to the platform team", "url": "presentations/q1-arch-review/index.html" }, { "title": "Customer Onboarding", "description": "Used for design-partner kickoffs", "url": "presentations/customer-onboarding/index.html" } ] } ``` Each entry needs `title` and `url`. `description` is optional but recommended. The currently-open deck is marked with a "Here" tag and isn't clickable. By default each deck looks for `../../_manifest.json` (which resolves to the repo root). Override per-deck with `data-deck-manifest="…"` on `.reveal` if you need a non-standard path. --- ## Logo placement ```html
``` The logo auto-swaps to white on dark slides (title, section divider, end). --- ## Brand changes Open `shared/styles/prutan-tokens.css`. Every value lives there. Change `--prutan-indigo` and every accent in every deck and doc updates on next load. ```css --prutan-navy: #05387F; --prutan-indigo: #6366f1; --prutan-indigo-deep: #312e81; ``` --- ## Long-form docs For docs (architecture pages, RFCs, internal write-ups), use `shared/styles/prutan-docs.css` instead of the deck CSS. See `docs/sample/index.html` for the full pattern set. It's a drop-in replacement for your existing `style.css` — same classes, now token-driven. --- ## PDF export 1. Open the deck in Chrome. 2. Append `?print-pdf` to the URL: `…/index.html?print-pdf`. 3. **Print → Destination: Save as PDF**. 4. **Layout: Landscape**, **Margins: None**, **Background graphics: ✓**. --- ## Keyboard shortcuts (Reveal.js defaults) | Key | Action | | --------- | ------------------------------- | | `→` / `↓` | Next slide | | `←` / `↑` | Previous slide | | `Space` | Next | | `F` | Fullscreen | | `S` | Open speaker notes window | | `Esc` | Slide overview (Reveal's grid) | | `B` | Black-out screen | | `?` | Show all shortcuts | The PruTAN slide navigator (the dropdown) is a labelled alternative to Reveal's grid overview — easier for non-technical viewers. --- ## Speaker notes ```html

The slide

``` --- ## Don't touch list These files are the design system. Edits go through PR review: - `shared/styles/prutan-tokens.css` - `shared/styles/prutan-deck.css` - `shared/styles/prutan-deck-nav.css` - `shared/styles/prutan-docs.css` - `shared/scripts/prutan-deck.js` Everything else (your deck's HTML content) is yours to edit freely. --- ## License Internal use. PruTAN.