Glyph kit

<skill>

Make one

1. Pick the type from this table; it goes in the spec's

   kind

   field.

   The task is about	Types
   Interviews, surveys, usability tests, quotes	likert themeMatrix affinity quoteCard taskStats emotionCurve
   Funnels, retention, A/B results, metrics, charts	funnel cohort abResult metricPanel barChart compare forecast meter sparkline heatmap calendarStrip
   Flows with decisions, state machines, journeys, sitemaps	flow branchFlow stateMachine journeyMap tree
   Roadmaps, priorities, ownership, timelines, decisions	board impactEffort swimlane gantt statusKey decisionLog
   Screens: one screen, an app shell, a card grid, list and detail, a modal	screen responsive appShell cardGrid listDetail modal
   Tokens, scales, colour, contrast, component states, layers	spacingScale typeScale palette colourRoles contrast stateMatrix layerStack tokenTable table
   Redlines, QA checklists, component anatomy, before and after	redline qaChecklist anatomy compare
   Motion intent, timing, transitions, stagger, easing	motionTiming intentCard transitionSpec stagger filmstrip easingTable
   Work moving over time: rework loops, state machines, queues, rollouts, loading	loop states queue rollout loading
   A whole deliverable on one page: readout, dashboard, PR summary, design review, status update	readout dashboard prSummary designReview statusUpdate

   Unsure between two? Read the area's guide,

   reference/areas/<area>.md

   (research, metrics, flows, planning, wireframes, systems, handoff, motion, process, layouts): it shows each type drawn.
2. Get its data shape:

   node <skill>/scripts/glyph-kit.mjs guide <kind>

   prints the kind's example spec and what to watch for. Copy that shape; don't read the scripts.
3. Write the spec as JSON next to the document that uses it:
   json

   {
     "kind": "funnel",
     "title": "Signup to paid, last 30 days",
     "intent": "Find the step where most people leave.",
     "source": "Product analytics export, 2026-10-15",
     "data": [{ "label": "Visited pricing", "value": 12400 }, { "label": "Paid", "value": 610 }]
   }

   Data comes from the user or their files (

   "data": "@results.csv"

   reads a file next to the spec), never from you. If numbers are missing, ask. Only if the user wants a sketch anyway, start

   source

   with "Illustrative": every format then carries a SAMPLE DATA stamp. A spec with numbers and no

   source

   is refused.
4. Render, fix, render again in one command:
   bash

   node <skill>/scripts/glyph-kit.mjs render spec.json --to markdown > figure.md

   The kit refuses a spec it can't draw truthfully and says why in a sentence. Labels over the limit (usually 24 cells) are cut with "…", and the kit lists each one on stderr with its limit. Shorten those labels and render again: a figure with "…" loses words.
5. Put the conclusion in the sentence around the figure. The figure supports it.

check spec.json

node <skill>/scripts/lint.mjs <file.md>

Other outputs

node <skill>/scripts/glyph-kit.mjs <command>

render spec.json [--to text|markdown]

screen

render spec.json --to html [--map design-system.map.json]

reference/fidelity.md

deck deck.json > deck.html

guide deck

export report.json --to html|pdf

guide report

export <file> --to md|mdx|html|svg|png|pdf

reference/export.md

check spec.json

check notes.md

render spec.json --to markdown --with-spec

redraw notes.md

read notes.md

reference/editing.md

--theme ink

--theme theme.json

--theme mixed:#7a5cff

--map

reference/colour.md

live spec.json --to html

--to markdown

reference/live.md

export layouts.json --to html|pdf

reference/areas/layouts.md

--to text

--compact

Rules

1. Every glyph has a referent: a number, a state or a structure. No decoration, no green-on-black or glyph rain unless the product is a terminal.
2. One meaning per glyph per document.

   █

   measured or done,

   ░

   projected or the empty part of a scale,

   ·

   an empty cell.
3. To call something out, use

   focus

   , never a colour. "Highlight the drop-off", "show where it fails": name it as drawn in

   focus.on

   , pick a tone, and say the point in

   focus.say

   (

   reference/spec.md

   ). It colours, recedes the rest and arrives last in every form, and the text keeps a

   ►

   line.
4. Numbers are printed as text next to the glyphs, and every figure with numbers shows its source.
5. Labels may use any script. Width is counted in cells: CJK takes two. Set

   lang

   for casing and number format. Font and right-to-left limits:

   reference/characters.md

   .
6. Every type moves in HTML and decks. The processes and a test result with readings over time keep moving; every other type arrives once, in the order that carries its point, then stays still. Each keeps a still that makes the same point; it is what reduced motion, print and Markdown show. Say what the motion shows in the sentence next to it.
7. Drawing by hand (only when no type fits): use the glyphs in

   reference/characters.md

   , follow

   reference/layout.md

   (two cells of padding inside a box, four between boxes, at most 80 columns), then lint.
8. Going up in fidelity (prototype, production code): use only the components and tokens the design-system map names, and ask when it has no entry.

   reference/spec.md

   describes the spec fields and the map.