Every slide type of the h&w slide engine with each of its variants, and the content blocks a content slide is built from, as they look in a printed deck. All content is made up. Click a name to see its slide at 1440 px.
Built by bun run build from specimen/slide-catalogue.ts into dist/, where it also opens from the disk: fonts and logos load from dist/brand/. bun run dev serves it at http://127.0.0.1:4335/slides/catalog/print/, beside the catalog of every slide type and part.
Three layers, as in the document engine. Tokens: styles/tokens.css names every value a slide draws (colour, type step, tracking, leading, measure, rule) from @hackersandwizards/brand; test/tokens.test.ts fails on a raw length or colour anywhere else. Parts below are built from tokens only, each with its variants. Slide types compose parts; a difference between two types is a part's variant.
| Part | What it is | Used by |
|---|---|---|
ChartFrame | A chart's plot area: a card of fixed height the chart fills. | chart |
CodePanel | The website's run log, brand's code panel (`hw-code` `panel`): its corner, hairline and colours. | content, regular, grid, process, lanes |
DashedFrame | A dashed frame round a group of parts that belong together, brand's `hw-frame` (line width and corner): the factory frame, a pipeline's group, a content slide's container. | content, regular, grid, phased-pills, overview, process |
DisplayHeading | The display heading of a slide that stands on one statement: the title, a divider, a statement, a question, the closing line, a roadmap column's name. | title, content, regular, statement, grid, comparison, process, question, transition, closing, roadmap, deep-dive-divider |
NumberTile | A number or an icon on a square tile: a step's number, a pillar's badge, a phase's mark. | content, regular, grid, process, wheel |
SlideCaption | The purple caption under a slide's diagram, fading in when `visible`: the last step of a reveal. | process |
SlideCard | The brand card (`hw-card`): a neutral card whatever its look, and the primary `tint`, the one that matters, as the brand's tinted card. | content, regular, grid, comparison, profiles, process, transition, closing, roadmap, decision, activity |
SlideSubtitle | The line under a headline, fading in after it. | content, regular, grid, roadmap, team-topology, wheel, decision, activity |
SlideTitle | The slide headline (`.slide-title`), fading in. | content, regular, grid, comparison, media, profiles, process, lanes, chart, roadmap, gantt, team-topology, agenda, wheel, decision, activity |
TitledContent | A titled slide's column: headline on top, `.slide-body` below, both under the fit guard. | content, regular, grid, profiles, process, lanes, roadmap, gantt, team-topology, agenda, wheel, decision, activity |
VideoPlayer | The one video player: the recording on night in the brand corner, a round teal play button straddling its bottom edge, centred (the caller leaves 2.5rem below for its lower half), and a progress line. | content, regular, grid, media |
GradientTitlePill | The factory frame's title, a caps label on the brand gradient pill over the frame's edge. | phased-pills, overview |
PulseDot | The dot on a stage that is new or active, in its category's colour, ringed white. | phased-pills, overview |
The elements the slides take from @hackersandwizards/brand, each at the stage scale (data-hw-scale="stage", which every slide sets), on day and on night, then the elements the slides keep as their own, each with its reason. brand-elements measures both, last in bun run check, here and on every specimen slide.
hw-card cataloguehw-label cataloguehw-pill cataloguehw-callout catalogueAn info callout flags one thing.
hw-link catalogueA paragraph with a link.
hw-strip cataloguehw-status cataloguehw-frame cataloguehw-icon-button cataloguehw-focus-ring cataloguecard-toneA card in purple, which means no state, a tinted card in a meaning's hue with its full line (tint), a card outlined on white in any hue (outline, line), and the quiet grey card: brand's card has white and the teal tint only, its status box the four meanings at a 40 % line. The tinted card stays: blind panel 02.11., the highlighted cell as brand's status box scored lower in all five runs (Claude 8:8, 9:8, 8:7; Codex 8.8:8.7, 9.1:9).
label-hueA label in a meaning's, a column's or a speaker's hue (purple, amber, red, green): brand's hw-label with the slide's colour, since brand's label has teal-dark, muted and ink only.
On the slides: overview, phased-pills, comparison-guidance
callout-statusAmber and green callouts for a risk and a result, their text mixed 40 % into ink for 4.5:1: brand's callout has teal and purple only.
On the slides: frames.html
code-panelThe code panel is brand's hw-code panel (corner, hairline, colours) with its padding and type set per layout (a terminal's title bar, an annotated line's marker column) and the slide's code ground, night-2 on a night slide: brand's panel sets one padding, the code role's type and the night ground.
claude --print "fix the failing test" # one run
number-tileThe KPI and number tile: a figure on a square tile, which no other system shows.
chart-barsChart bars: a slide's data in the slide engine's context and highlight marks.
On the slides: chart, block-bars
slide-tableThe slide table: projected rows at stage size with the slide's own column heads, kept per system.
On the slides: block-table
header-barsHeader bars: the roadmap column's bar and the factory frame's gradient title pill, kept per system.
stage-statusThe stage strip: the pipeline's stages with the active ones marked, a status no other system shows.
On the slides: frames.html
stance-quoteThe two sides of a stance face each other: the right one's rule stands on the right, each in its side's hue; brand's quote has a purple rule on the left only.
On the slides: block-positions
frame-toneThe dashed frame in the slide's teal or purple, filled with its tone's tint when active and white otherwise: brand's frame has the border colour and no fill. Its line width and corner are brand's hw-frame.
Every slide type, variant and content block, by the job a slide does. An entry may sit under two jobs. The search finds every type, block and variant name, and the old names of types that now draw through another. Click a name to see its slide at 1440 px with its jobs.
No tile: Shiki sets a code block's colours inline, which the brand colour scan allows only in styles/slides.css.
No entry matches.