Claude Code plugin — chart palettes and cross-format document templates. Five colorblind-safe palettes, 240+ tokens, HTML / PDF / DOCX / LaTeX / XLSX.

Chart Palettes Design System

A color & document system for data visualization. Five palettes, six implementations, one token contract.

Structure

.
├── tokens/                       The source of truth
│   └── colors-and-type.css       All 240+ tokens · activate by class
│
├── specs/                        Reference documents
│   ├── design-document.html      The full system — principles, palettes, usage
│   ├── color-spec.html           HEX / RGB / CMYK / LCH per token
│   └── comparison.html           Same data, all five palettes
│
├── preview/                      Per-card previews used by the asset review
│   ├── {palette}-categorical.html
│   ├── {palette}-scales.html
│   ├── {palette}-neutrals.html
│   ├── {palette}-charts.html
│   ├── omics-umap.html
│   └── type-{scale,families}.html
│
└── templates/                    Cross-format implementations
    ├── pdf-template.html         Print-grade publication layout
    ├── excel-template.html       Workbook visual conventions
    ├── palette-system.docx       Word styles + theme colors
    ├── palette-system.tex        LaTeX preamble + sample report
    └── palette-system.xlsx       Excel theme + chart presets

The five palettes

Class	Use
`.palette-common`	Everyday dashboards, product analytics
`.palette-cold`	Engineering, observability, finance
`.palette-humanist`	Editorial, annual reports, essays
`.palette-pub`	Nature / Cell / Science figures (Okabe–Ito)
`.palette-omics`	scRNA-seq, spatial transcriptomics (Scanpy + viridis)

Use

<link rel="stylesheet" href="tokens/colors-and-type.css">

<div class="palette-pub">
  <svg><rect fill="var(--chart-1)" /></svg>
</div>

Switch the wrapping class to re-skin every chart underneath.

Tokens

Every palette exposes the same variables: --chart-1..8, --seq-{1,2}-{1..8}, --div-{neg,mid,pos}-{1..5}, plus semantic (--s-success, --s-warning, --s-danger) and surface tokens.

Claude Code plugin

A Claude Code plugin wrapping this design system is published on npm:

npx data-doc-design-system              # install for current user (~/.claude/plugins/)
npx data-doc-design-system --project    # install for this project only
npx data-doc-design-system --help       # all options

Source lives in data-doc-design-system/. The plugin bundles tokens/colors-and-type.css and the five templates/* files as assets, plus lazy-loaded reference docs for Claude. Re-copy the source into data-doc-design-system/skills/data-doc-design-system/assets/ whenever the tokens or templates change.

License

Code · MIT · LICENSE.txt Design content · CC BY 4.0 · LICENSE-CONTENT.txt

Upstream scientific palettes — Okabe–Ito (PD), viridis (CC0), Scanpy defaults (BSD-3) — keep their original licenses.

Author

Frank Zhang · Frank24167@gmail.com