muriel

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](channels/raster.md) — Pillow, typeset.py, store dimensions, fonts, inline pattern | | Vector | SVG | [channels/svg.md](channels/svg.md) — svgwrite, cairosvg, Mermaid, Excalidraw, viewBox theming | | Web | HTML + CSS | [channels/web.md](channels/web.md) — marginalia, pandoc filter, Playwright/weasyprint capture, data-URI | | Interactive | WebGL / Canvas / D3 | [channels/interactive.md](channels/interactive.md) — single-file scaffold, PermalinkManager, CodePen, Observable | | Video | MP4 / GIF | [channels/video.md](channels/video.md) — ffmpeg + desktop-control + tooltip burn + editing recipes | | Terminal | Unicode | [channels/terminal.md](channels/terminal.md) — chart.py bar charts, sparklines, tables | | Density viz | PNG | [channels/heatmaps.md](channels/heatmaps.md) — Tobii-style Gaussian overlays | | Gaze plots | PNG / SVG / JS | [channels/gaze.md](channels/gaze.md) — scanpath, bubble, AOI timeline, saccade rose | | Science | matplotlib + LaTeX | [channels/science.md](channels/science.md) — rcparams, stats reporting, notebook editorial, paper figures | | Dimensions | cross-channel reference | [channels/dimensions.md](channels/dimensions.md) — social cards, device footprints, viewport tiers, video, paper/print, favicons, scale factors | | Style guides | brand schema | [channels/style-guides.md](channels/style-guides.md) — brand.toml schema, loader, rule enforcement, CSS/matplotlibrc derivation, example brand.toml files | | Infographics | SVG → PNG | [channels/infographics.md](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](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](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](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](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](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](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 also channels/interactive.md for the pretext API and the pretext-coachella reference exemplar.
• [vocabularies/pixijs.md](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](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 /iblipper when the output itself is the animated artifact or the rhetorical-typography social-graphic still.
• [vocabularies/katex.md](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-block pattern, sectional background accents, auto-render config. Don't use for paper figures (use channels/science.md matplotlib + LaTeX); don't use for moving math (use Manim CE).
• [vocabularies/declassified.md](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](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 (#e6e4d2 cream, #0a0a0f near-black, #50b4c8 cyan accent), wordmark conventions (muriel always lowercase, built with muriel as 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](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