Six skills · one token contract

A design system for documents

Analytical reports, diagrams, charts, decks, eighteen document types, and brand theming. Writing lands as Markdown in your repo by default. Designed HTML is opt-in: no JavaScript to read, no build step to open, and it prints.

/plugin marketplace add Avinava/document-design-system
/plugin install document-design-system@document-design-system

Then ask for a report, or /document-design-system:handoff (or adr, design-doc, …).

Several voices, one contract

Identical markup in every panel — only data-theme differs. Four house styles plus horizon, a client brand.

The same content block rendered under editorial-coral, executive-navy, field-notes, console-violet, and horizon

Open the comparison

Same document, three voices

The proposal you send. Identical markup. Navy is the system's board voice; Horizon is the client brand; coral is the default analytical voice.

executive-navy

Board packet

horizon

Client brand — send this

editorial-coral

Default analytical

How the brand was built

brand-theme-design: extract with provenance, map (mostly subtraction), audit, then wear it on a real document. Do not eyeball contrast.

Open the exhibit · the document you send

Analytical report

Evidence-led, reconciled, printable. Named denominators, a limit ledger, a methodology block.

Inventory report: 41 percent of footprint sits on ingestion

Same report further down: cohort columns and an attribution table

analytical-document-design · theme editorial-coral · Open the report

Deck — a presented ask

Fourteen slides, one idea each, claim titles. Not a document with page breaks.

Title slide: Split ingestion before the next halt

Title names the argument, not the meeting

Statement slide: Four of the last six incidents ended the same way

Statement slides are the lines that should stick

Comparison slide: three options, split path accented

Three options, one accent — that is the recommendation

Chart slide: Ingestion holds 41 percent of the footprint

Chart at full-width, not the document size

presentation-design · theme executive-navy · 14 slides → 14 PDF pages · Open the deck

Figures — diagrams and charts on one token set

Mermaid is an input. The shipped figure is SVG whose colors are var(--…). Change data-theme and the focal bar moves with the page.

Figure gallery: architecture, sequence, ranked bars, columns, line chart, and a limit ledger

diagram-design + chart-design · Open the figure gallery

Eighteen document types

writing-documents writes Markdown in your repo by default. These are the designed gallery — one Northwind Ingestion world.

design-doc

The skills

Each row is a committed example, not a description of intent.

Skill	Owns	Does not own
`analytical-document-design`	Evidence models, metric semantics, report architecture	Prose-first docs, slides, standalone charts
`diagram-design`	When a diagram earns its place; Mermaid → themed SVG	Quantitative charts, UI mockups, `.drawio`
`chart-design`	Chart-type selection, axis honesty, token palettes	Narrative structure, dashboards-as-applications
`presentation-design`	16:9 HTML slides, claim titles, one idea per slide, PDF	Documents meant to be read; editable `.pptx`
`writing-documents`	Eighteen types; Markdown by default; HTML only when asked	Metric-led reports; casual markdown edits
`brand-theme-design`	Brand → theme, semantic mapping, contrast audit	Picking a shipped theme; restyling one document

The one idea

Everything renders to an SVG string at authoring time. The only thing still live in the shipped HTML is CSS custom properties.