Catalog
Every slide type of the h&w slide engine, each state a slide of the specimen deck, and the parts the types are built from, each with its variants. All content is made up.
slides catalog/stories · @hackersandwizards/brand v2.24.1 · 44 components · 150 states
Types 21
- Activity slide3 states
- Agenda slide4 states
- Chart slide6 states
- Closing slide4 states
- Comparison slide7 states
- Content slide55 states
- Decision slide3 states
- Gantt slide2 states
- Grid slide6 states
- Lanes slide3 states
- Phased pills slide1 state
- Process slide6 states
- Profiles slide2 states
- Question slide1 state
- Regular slide3 states
- Roadmap slide2 states
- Statement slide6 states
- Team topology slide4 states
- Title slide4 states
- Transition slide3 states
- Wheel slide2 states
Parts 21
- Axis tick1 state
- Before after sides1 state
- Chart frame1 state
- Code panel1 state
- Dashed frame1 state
- Display heading1 state
- Frame title1 state
- Link caption1 state
- Number tile1 state
- Picture link1 state
- Portrait1 state
- Pulse dot1 state
- Quote1 state
- Side highlight1 state
- Slide caption1 state
- Slide card1 state
- Slide footer1 state
- Slide subtitle1 state
- Slide title1 state
- Titled content1 state
- Video player1 state
Deck 2
Foundations
Tokens (styles/tokens.css) feed the parts, the parts make the slide types. Every story renders at the stage scale.
24 elements from brand: hw-card, hw-label, hw-label-box, hw-pill, hw-callout, hw-link, hw-arrow-link, hw-inline-code, hw-strip, hw-rule, hw-button, hw-status, hw-frame, hw-field, hw-icon-button, hw-quote, hw-focus-ring, hw-search, hw-nav, hw-table, hw-kbd, hw-empty, hw-dialog, hw-avatar.
12 kept as the slides' own:
icon-button-disabled: The phone deck's step buttons at the ends of a deck: disabled at 25 % opacity with a not-allowed cursor. Brand's round icon control has no disabled state, while its button stands at half opacity; drop once brand's control has one.card-tone: A 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).callout-status: Amber 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.code-panel: The 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.number-tile: The KPI and number tile: a figure on a square tile, which no other system shows.chart-bars: Chart bars: a slide's data in the slide engine's context and highlight marks.slide-table: The slide table: projected rows at stage size with the slide's own column heads, a tinted head and hovered row and a framed white box, kept per system. Every second body row is tinted too, where brand's table draws hairlines alone: a blind review kept these stripes, since the tint holds a row where a projected or streamed hairline fades (docs/agent-work/2026-11-12-table-stripe.md).stage-status: The stage strip: the pipeline's stages with the active ones marked, a status no other system shows.frame-tone: The 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.qr-card: A QR code's card is white on a night slide too, since a scanner reads dark modules on light, and its padding is the code's quiet zone: brand's card takes the night ground.phased-pills-slide: A slide type named for its layout, not brand's pill: its boxes are the stages of a phase plan in the brand corner, coloured by getStageClasses for default, active and done like the stage strip (stage-status), where brand's pill is a label holding a value in the pill corner.notes-field: The presenter view's speaker-notes textarea keeps the brand corner of the notes panel it replaces, where brand gives a form field the small one: a blind review (two personas, Claude and Codex, two runs each) preferred the brand corner in all eight runs (Claude 7.25 against 6.0, Codex 8.75 against 7.75), since the small corner changes the panel's shape when the pencil is pressed and clashes with the rounded slide frames.
The print page shows each as a tile.