Long-form docs use the same design system

One set of tokens, two output formats — decks and docs always agree on colors, type, and spacing.

This document demonstrates that prutan-docs.css reads the same CSS variables as prutan-deck.css. Change a token in one place and both formats update.

v1.0 Stable Token-driven

What you get

Headings, lists, and prose styled exactly as the original style.css
Cards, callouts, pills, and tables share visual language with deck slides
Brand color changes propagate to every doc and deck on next page load

Callouts

Note: the indigo callout from the original style.css is unchanged.

Heads up: warnings use the amber palette, mirroring deck warnings.

Win: success callouts mirror deck success callouts.

Two-column layout

Decks

Reveal.js + prutan-deck.css. Use the slide patterns documented in the sample deck.

Docs

Plain HTML + prutan-docs.css. Use the components on this page.

A small table

Token	Value	Where
--prutan-navy	#05387F	Logo, dark slide backgrounds, doc header
--prutan-indigo	#6366f1	Accents, bullet markers, links
--prutan-indigo-deep	#312e81	Headings on light, branded text
--font-body	Inter	Both decks and docs

Code

Inline code: client.parse(hex_dump). Block:

$ tree presentations.prutan.com
├── shared/          ← locked, do not edit
├── presentations/
│   ├── _template/   ← copy this for new decks
│   └── sample/
└── docs/

PruTAN design system · v1.0 · This page uses prutan-docs.css