muriel — Multi-channel visual production
Channels
Each channel has a dedicated subfile with deep recipes, tooling, and lessons. This top-level index is the map; the subfiles are the territory.
| Channel | Format | Deep dive |
|---|---|---|
| Raster | PNG/JPG | channels/raster.md — Pillow, typeset.py, store dimensions, fonts, inline pattern |
| Vector | SVG | channels/svg.md — svgwrite, cairosvg, Mermaid, Excalidraw, viewBox theming |
| Web | HTML + CSS | channels/web.md — marginalia, pandoc filter, Playwright/weasyprint capture, data-URI |
| Interactive | WebGL / Canvas / D3 | channels/interactive.md — single-file scaffold, PermalinkManager, CodePen, Observable |
| Video | MP4 / GIF | channels/video.md — ffmpeg + desktop-control + tooltip burn + editing recipes |
| Terminal | Unicode | channels/terminal.md — chart.py bar charts, sparklines, tables |
| Density viz | PNG | channels/heatmaps.md — Tobii-style Gaussian overlays |
| Gaze plots | PNG / SVG / JS | channels/gaze.md — scanpath, bubble, AOI timeline, saccade rose |
| Science | matplotlib + LaTeX | channels/science.md — rcparams, stats reporting, notebook editorial, paper figures |
| Dimensions | cross-channel reference | channels/dimensions.md — social cards, device footprints, viewport tiers, video, paper/print, favicons, scale factors |
| Style guides | brand schema | channels/style-guides.md — brand.toml schema, loader, rule enforcement, CSS/matplotlibrc derivation, example brand.toml files |
| Infographics | SVG → PNG | channels/infographics.md — 10 types × layout patterns × colorblind-safe palettes, deterministic SVG (not AI), 60-30-10 color / 60-40 viz:text rule, 5-point quality rubric at 8:1 |
| Diagrams | SVG | channels/diagrams.md — rhetorical primitives (2×2 matrix, N-step cycle, Venn shipped; comparison pair, funnel, stack, DAG, spectrum, pyramid, heat-grid queued); plus Mermaid → SVG/ASCII and TeX → SVG (MathJax) Node-bridges. Each preset carries an epistemic precondition and an anti-prescription. |
| Spatial | SVG + HTML/WebGL | channels/spatial.md — depth scaffolding for layered typography. muriel.spatial perspective grids (1pt / 2pt / 3pt / iso) + render_assets/ Three.js + CSS3DRenderer exemplars sharing one helper lib. Cooper VLW / Mackinlay-Robertson-Card / Dumais Data Mountain lineage. |
| Charts | JS chart libraries | channels/charts.md — Recharts, ECharts, Chart.js, Plotly, D3/SVG. 22 numbered rules, per-library quick-ref, anti-pattern PATTERN→FIX tables, can-I-remove test, chart-type guide, validation checklist. muriel-strict 8:1 color tokens override the Tufte palette. (matplotlib lives in channels/science.md.) |
| Polish | CSS / TSX / HTML | channels/polish.md — UI micro-interaction + visual-detail discipline. 16 numbered rules: concentric border radius, optical alignment, shadows-over-borders, image outlines, 40×40px hit area, interruptible transitions, split-and-stagger enters, subtle exits, contextual icon animations (scale 0.25→1 + blur 4px→0 + bounce: 0), scale(0.96) on press, no transition: all, will-change only on compositor-friendly properties, tabular nums, macOS font smoothing, text-wrap: balance / pretty. Mined from thedavidmurray/claude-make-interfaces-feel-better (MIT, archived). |
Aesthetic vocabularies
Design grammars worth naming explicitly when a project's visual register calls for something specific. A menu of established traditions — borrow their conventions, don't reinvent them.
vocabularies/fui.md— Fantasy / Fictional User Interface. Sci-fi HUDs. Perception NYC, Territory Studio, Ash Thorp, GMUNK lineage. Thin strokes, mono numerics, staggered reveals, radial geometry, restrained palettes.vocabularies/visible-language.md— Visible Language Workshop. The MIT Media Lab design tradition (Cooper, Small, Ishizaki, Maeda → Processing → pretext). Information landscapes, multi-scale typography, typography as data structure. Contemporary substrate:@chenglou/pretext. See alsochannels/interactive.mdfor the pretext API and thepretext-coachellareference exemplar.vocabularies/pixijs.md— PixiJS 2D WebGL/WebGPU substrate. When Canvas/D3 runs out of headroom and Three.js is overkill. Particle-dense gaze overlays, shader-driven foveation demos, audio-reactive visuals. Pin to^8.18. Lifted from pixijs/pixijs-skills (MIT) — they did the documentation work; we curated the relevant subset. Read upstream for depth.vocabularies/kinetic-typography.md— Letters that move with intent. Saul Bass → Kyle Cooper → Territory Studio lineage. Max contrast, strategic motion, rehearsed emotional vocabulary, SDF alpha rule. Substrate options: pretext for typographic Canvas2D animation, iblipper for a full animation-as-language pipeline (single-frame social graphics and animated kinetic type), Troika SDF for 3D scenes. Invoke/iblipperwhen the output itself is the animated artifact or the rhetorical-typography social-graphic still.vocabularies/katex.md— KaTeX math typesetting for the web. When prose has math in it and the artifact lands on a web surface (marginalia essay, blog post, in-page explainer). MIT, CDN-clean, no bundler. Pin to^0.16. Reference exemplar:inside_the_math—.eq-blockpattern, sectional background accents, auto-render config. Don't use for paper figures (usechannels/science.mdmatplotlib + LaTeX); don't use for moving math (use Manim CE).vocabularies/declassified.md— Released, leaked, seized, discovered. The visual register of the document-not-meant-for-the-reader. FBI Vault / FOIA reading-room / Wikileaks / Stasi-files lineage. Six provenance values (foia, leak, seizure, discovery, open, seized-annotated), two redaction grammars (gov-at-creation vs view-time-censorship), exemption-code system, classification banners, decl stamps, case-file paratext, aging-as-era-distance, and a four-handed marginalia vocabulary (red/blue/pencil/typewriter-strike). Use for fiction documents framed as released, worldbuilding bibles, or editorial pieces about secrecy.vocabularies/muriel-brand.md— muriel's own brand identity. Inward-facing — canonical spec for the six-bar mark (Müller-Brockmann grid + Cooper VLW lineage), color tokens (#e6e4d2cream,#0a0a0fnear-black,#50b4c8cyan accent), wordmark conventions (murielalways lowercase,built with murielas canonical attribution), sizing rules including the subpixel rendering floor, and drop-in HTML/SVG snippets for inline + block "built with muriel" credits. Reach for this any time a project wants to attribute muriel — never trace the favicon.vocabularies/data-viz-platforms.md— Cross-platform charting design guides (Apple HIG, Google Material 3, IBM Carbon, Vega-Lite, Observable Plot, FT Visual Vocabulary, Datawrapper Academy). License posture spelled out per platform — citable precedents to reach for when porting a paper figure to an iOS / Material / Carbon surface, or when a reviewer raises an accessibility / moti