Design system for slides & docs

One visual language. Two formats. Zero CSS to touch.

PruTAN · v1.0 · Sample deck

Every pattern, in one deck

If you can't find what you need in this deck, it doesn't exist yet — open a PR.

Title, section dividers, agenda, content
Two- and three-column layouts
Cards, callouts, stats, tables, code
Quote and end slides

Part 01

Typography & copy

The patterns most slides use — and the rules that keep them readable.

The shape of a normal slide

Eyebrow above, a clear headline, optional lead paragraph, then either bullets or a structured layout. Authors never set fonts, colors, or sizes — only content.

Eyebrow comes from data-eyebrow="…" on the section
Headline is just an <h2>
Bullets are a normal <ul> — no class needed
Add <strong> for emphasis where it earns its keep

Compare, contrast, choose

What we do

Build the AI-first intelligence layer for payments engineering — sits next to your existing infrastructure.

What we don't do

Rip-and-replace your switch, your simulator, or your CI pipeline. We integrate, not displace.

Positioning: the intelligence layer customers add, not the platform they migrate to.

The five workflows

Hover any card to focus it. Useful for self-paced viewing.

Parse & explain

Paste hex, get parsed structure plus plain-English diagnosis.

Read

Dialect diff

Field-by-field comparison between scheme variants with impact classes.

Read

Cert pack gen

Generate full certification test packs — 4-stage validation, never invalid.

Write

Failure diagnosis

Paste a failed message + reject reason, get expert-level explanation.

Diagnose

Bulletin ingest

Scheme bulletin in, structured rule updates out — architect-reviewed.

Ingest

Story 6 — later

Natural-language message construction. Describe a scenario, get wire-valid output.

Future

One attribute. Hover-to-focus.

Add data-deck-focus="hover" to any grid. Hover a card — the others dim. Move away — they all return. Off by default; use it when a slide is read alone, not presented live.

Without focus mode

Card A

Hovering doesn't dim the others.

Card B

Both stay equally bright.

With `data-deck-focus="hover"`

Card A

Hover me — Card B fades.

Card B

Hover me — Card A fades.

The code: just add the attribute to the grid container.

<div class="deck-grid" data-deck-focus="hover">
  <div class="deck-card accent-teal">…</div>
  <div class="deck-card accent-amber">…</div>
</div>

What changes for the engineer

6h → 3min

Cert failure diagnosis

Per incident, real data

30m → 3m

3am production debug

Hex to root cause

6 wks → days

Scheme onboarding

Spec ingestion to live

3–5

FTE-equivalent recovered

Annually, per customer

Four flavors of emphasis

Default: indigo accent. Use for the main takeaway of a slide.

Success: green. Use for wins, confirmations, positive signals.

Warning: amber. Use for caveats, "watch out", "this is the trade-off".

Danger: red. Use for breaking changes, blockers, hard limits.

Part 02

Data, code, structure

Tables, code blocks, and the patterns that handle technical content without breaking layout.

Roadmap by stage

Stage	Goal	What customers see
MVP Weeks 1–8	Prove the AI-first thesis on five concrete workflows.	Public corpus demos. Parse, diff, cert pack, diagnosis, bulletin.
Pilot Weeks 9–16	Validate with 2–3 paying design-partner customers in their VPCs.	SSO, CI integration, Jira hooks, MCP server, plugin SDK (private).
Scale M5–12	Compounding moat through shared library; stateful sim.	Curated baseline library, public plugin registry, scheme partners.

Code blocks, syntax-highlighted

Use <pre><code class="language-…">. Highlight.js plugin handles it.

from prutan import Client

client = Client(api_key="...")

# Parse an ISO 8583 capture and explain it
result = client.parse(
    hex_dump="0200B23A40010AE0801216...",
    dialect="visa-base-i"
)

print(result.explanation)
print(result.fields["DE 22"].description)

We collapsed a six-hour cert investigation to under three minutes. The engineer who used to dread Tuesdays now opens PruTAN before his coffee. VP Engineering, top-5 European acquirer

Three layers, one tenant boundary

Intelligence layer — AI models, curated library, dialect overlays
Tenant layer — customer overlays, audit trail, plugins
Integration layer — MCP server, REST API, CI hooks

Press ↓ to drill in.

Intelligence layer

What lives here: the curated baseline library that took years to build. Schemes, dialects, expert-curated enums, positional decoders, provenance trails.

This is the moat. The AI is commodity; the library is not.

Tenant layer

Each customer's overlays and audit history live in their tenant — isolated, exportable, never visible to other tenants.

When you want the slide to feel "important"

Filled card — indigo

For the one thing on the slide that matters most. Use sparingly.

Default card

For everything else. Quiet, scannable, gets out of the way.

Thank you

Questions, or open a PR · presentations.prutan.com