Brand deck

The brand deck is the General Translation identity in 93 slides. Its source is the deck/ folder of the Prototemplate repository, and pnpm build:deck turns it into one viewer page, with its pictures as files beside it, that prototemplate.com/deck serves. Kevin judges product surfaces against it (2026-09-25) and had Prototemplate's viewer shell built from its viewer (2026-09-08), so every slide meets the grammar below in both themes before it ships.

Paths are relative to a Prototemplate checkout ($PROTOTEMPLATE). The two scripts in scripts/ read that checkout: from its root they need no flag, and from an installed copy of this skill they take --root <checkout> or the PROTOTEMPLATE variable. The deck's own written grammar is deck/DECK-GRAMMAR.md; this skill distils it with the head CSS, the scripts and Kevin's directives. Detail lives in references/: full-picture-slides.md, viewer-and-build.md, type.md, writing.md, borrowing.md and sources.md.

1. Files and ownership

deck/parts/head.html (tokens, slide and viewer CSS, the icon sprite, the GT mark symbol) and deck/parts/tail.html (SECTIONS, the viewer script, the mood picture engine) are locked unless the brief says otherwise; each deck/slides/NN-slug.html belongs to the lane assigned that slide; deck/fonts/deck-fonts.css changes only with a type decision; the grammar, the shooter, the assembler and scripts/build/deck.mjs belong to the deck owner. The full table is in references/viewer-and-build.md ("Files and ownership").

• A slide file is exactly one <section class="slide ..."><div class="in"> ... </div></section> preceded by an HTML comment that names the slide. It carries no <script>; the build refuses one.
• The checkout is often shared, and another session may own deck/ and push to main from its own worktree. Read git status and git log -- deck/ first, edit only the slides you were assigned, stage files by name, and leave head.html, tail.html and the registries in section 12 to the integrator unless the brief hands them to you.
• The build, the shooter and the assembler read only file names that match ^\d\d-.*\.html$, in sorted order. A slide's number everywhere (the counter, the hash, shoot-slide.mjs, SECTIONS, DECK_SLIDES) is its position in that order. The prefixes 37 and 54 have been unused since two mood slides were retired on 2026-10-05, so after slide 36 the prefix runs ahead of the position: 38-motion.html is slide 37 and 95-closing.html is slide 93.
• A new slide takes a free two-digit prefix that sorts it into place. An interim name such as 12a-slide.html does not match the pattern: the shooter skips it silently and the build fails its count. When no prefix is free, renumber the files after the insertion point. A prefix past 99 needs the pattern changed in the build, the shooter, the assembler and check-deck.mjs.

2. The sheet

• The sheet is 1600 by 900 px. The viewer scales it to the window, so nothing in a slide depends on the window size.
• The viewer draws two vertical rails 56 px in from the left and right edges, two horizontal rules 56 px in from the top and bottom, and an 11 px registration cross where they meet, in --hair with the crosses in --cross. A slide never draws them.
• .slide is inset 57 px on every side and padded 72 px top and bottom and 80 px left and right. The usable area inside .in is 1326 by 642 px, from x 137 to 1463 and y 129 to 771 on the stage.
• Nothing may leave the sheet, and text must not touch a rail or a rule.
• The wordmark (the GT mark at 28 by 18, bottom left) and the counter (13 px titanium, bottom right) sit in the bottom margin. Leave them alone. Full-picture slides put solid paper chips under them.

3. Type

• Inter is the only typeface (Kevin, 2026-09-09): --display and --text resolve to 'Inter', the rsms InterVariable roman registered by deck/fonts/deck-fonts.css, with font-optical-sizing: auto. No italic face is inlined, so the sheet sets no italic or <em>.
• h1, h2 and .big share one rule in head.html (weight 500, -0.025em, balanced, cv11 and ss01), and slide CSS never restates the features or the tracking. Weight 500 is the ceiling and running text is 400, except the specimen on the Typography slide.
• Sizes: h1 88, .big 72, h2 44, .lead 26, p 22, .rows 20, .cap 15; SVG text never under 18. Text under 15px on the sheet is a defect.
• Copy follows the deck's register and gt-voice: plain sentence-case headings with no trailing period, full sentences in the body, and every standalone GT in rendered copy set as the mark (Kevin, 2026-09-09), referenced from an <svg> sized in the mark's aspect with no viewBox of its own.

The size table, the measures, the copy rules in full and the #gt-mark markup are in references/type.md.

4. Color

• Slides use only these variables. On the sheet, hard-coded colors exist only in the .swatch, .panel and .ic hue rules in head.html, and in the reference-logo plates on The name (15-naming.html), which check-deck.mjs reports as warnings.
• No accent color on text, lines or fills anywhere in the deck. The brand accent appears only as an outlined, labeled swatch on the Color slide.
• Semantic color lives only on icons: .ic.ok green #12a37a for done or passing, .ic.warn amber #f0a020 for open or in review, .ic.no red #e5484d for excluded or rejected, .ic.info GT blue #2f5ce0 for GT itself. The four hues are the same in both themes, and text and lines stay monochrome. Kevin asked for them on 2026-09-09: "use more colorful stuff like green check marks or other icons across tables and other kind of sparse, just text slides".
• Code sits on .panel: #101010 in both themes, white monospace, with a --hair border in dark. Nothing else on the sheet uses monospace. The ASCII monogram on slide 23 draws its @ characters in a monospace stack because it is a pasted mark.
• --mood-ink and --mood-opacity belong to the artifact picture standard. scripts/lint/pictures.mjs holds their values, so a slide never sets them.

5. Layout classes

All are defined in head.html; check there before writing slide CSS.

• Lists are ruled rows. The deck has no bullets.
• No cards with shadows, no rounded corners, no gradients, no icon fonts.
• Columns align, gaps in a pair are equal, and a slide never leaves one column empty while the content crowds the other.

6. Icons

• Icons are Heroicons 20 solid from the sprite in head.html (63 glyphs on 2026-10-05), written as <svg class="ic ok" aria-hidden="true"><use href="#i-check-circle"/></svg>. Use ok, warn, no or info for the four hues, or no color class for a monochrome category glyph.
• An icon sits only in a key cell (.rows > div > b, or the key cell of a slide's own ruled table) or at the start of a .plain row. An icon inside a sentence is a defect. It is 20 px on 20 px rows with 10 px before the label, and 24 px on 24 px display lists with 12 px. A key that wraps keeps its second line under the label; the hanging indent in head.html does this.
• .ic.ext is the 16 px titanium external glyph (#i-arrow-top-right-on-square) that follows a link in a table.
• To add a glyph, run node skills/gt-deck/scripts/heroicon-symbol.mjs <name>. It prints the <symbol id="i-name" viewBox="0 0 20 20"> from @heroicons/react 20 solid in the checkout, or reports that the sprite already has it.
• A lane allowed to edit head.html adds the symbol to the sprite.
• A lane that is not defines it in its own slide inside <svg width="0" height="0" style="position:absolute" aria-hidden="true">, with a comment saying it waits for the sprite, as 93-fixed-points.html does for i-lock-closed. When the sprite gains the glyph, delete the slide's copy; the script names such copies. Symbol ids are global across the assembled deck.

7. Diagrams

• A diagram earns its place only when it shows a relationship the text alone does not. A slide of five clean statements stays a list, and a diagram that restates a list in boxes is a defect.
• Draw inline: <svg class="dia" viewBox="0 0 W H">, width 100%, overflow: visible. Size the viewBox to the width it renders at where you can, so 20 px labels and 1 px strokes stay 20 px and 1 px on the sheet; the Diagrams slide draws its four examples in 300-unit boxes at 300 px.
• Strokes take class="ink", "mid" (ink-2) or "hair", at stroke-width 1 or 1.5, with square caps and no rounded joins.
• Fills are var(--ink), var(--paper) or var(--plate). Isometric faces are ink at fill-opacity 0.04 on top, 0.09 on the left and 0.15 on the right, lit from the upper left.
• Labels are <text> in the same SVG at 20 px in ink-2, or .lab at 26 px in ink at weight 500, with .sm at 18 px as the floor. They stay horizontal and 12 px clear of any line.
• An 11 px filled ink square marks a value on a scale or a step on a flow. Draw no arrowheads: direction comes from reading order, a marker or a short perpendicular tick. DECK-GRAMMAR.md still allows a filled triangle up to 8 px, the Diagrams slide states the stricter rule, and no slide draws one.
• Links between objects use the doubled connector, and flows, axes and scales use one 1 px line. Registration crosses and hairline grids may appear inside a diagram where they carry its structure; a decorative one is a defect.
• Good subjects: a flow of three to six steps, a before and after pair, a scale or axis, a stacked layer model, a grid or ladder, a timeline.
• gt-diagrams holds the doubled connector's construction, the wider diagram method and, in references/isometric.md, the 30 degree projection.

8. Pictures

• A slide lane adds no image files. A new visual is inline SVG. New captures, crops and pictures come from a round that is assigned them, through the pipelines recorded in deck/shots/OPENERS.md and docs/ARTIFACT-PICTURES.md.
• A screenshot names its light file in src and its dark twin in data-dark, for example <img class="shot" src="shots/<name>-light.jpg" data-dark="shots/<name>-dark.jpg" alt="...">. Page twins are site-<page>-{light,dark}.jpg, 1440 wide from 2x captures. Detail crops are detail-<name>-{light,dark}.jpg at native 2x pixels. proto-* and glyph-* files are Prototemplate and Glyphfield captures. A screenshot is never stretched or cropped through content, and it keeps its 1 px --hair border.
• Section openers (eight) are two-tone shader dithers or gem smoke renders behind a lower-left plate: the section name in .big, one sentence that starts "This section covers", and a credit.
• Mood slides (ten) are artifact pictures. Each is a tone grid on a <canvas class="mood-img" data-tone="...">, screened live by the viewer at 1 CSS px cells, behind a lower-right plate with the picture's title at 44 px, one or two sentences on why it is in the deck, and the credit.
• A mood slide follows a dense content slide, and at least one content slide separates it from the next opener.
• The ramp on the Dither slide is a canvas.dither that the viewer redraws per theme at 2 px cells.
• references/full-picture-slides.md has the markup, the plate geometry, the credit formats, the image rules and the steps for adding a mood picture.

9. Speed marks

Slides 17 to 23 present the seven race-type marks Kevin chose on 2026-09-29. Each slide pastes its file from public/marks, and The lockup also pastes bar-monogram.svg at 375, 187 and 94 px on a paper and an ink ground:

• Paste the file's <svg> whole and add width and height in px before xmlns, keeping the viewBox's aspect. The monogram is 1100 by 282 for its 499.6 by 128 viewBox. The files fill with currentColor, so a mark takes the slide's ink in both themes.
• A mark is never redrawn or edited by hand in a slide. To change one, edit scripts/build/speed-marks.mjs, run pnpm build:marks, paste the new markup over the old, re-crop the marks page capture for Skills and marks (slide 71, deck/shots/proto-marks-speed-*.jpg), and rebuild the deck.
• check-deck.mjs fails when any mark pasted on these slides differs from every file in public/marks, and warns when a size breaks the file's aspect.

10. Slide-scoped CSS

• A rule that head.html lacks goes in a <style> that is the first child of the slide's <section>. Every selector starts with a class you add to that section: <section class="slide s08">, then .s08 .track { ... }. An unscoped rule reaches every slide and every thumbnail.
• A rule meant for the stage copy only, such as the openers' paper chips, starts #stage > .<class>, because the thumbnails clone slides without the viewer chrome.
• The scope class is a name. It does not track the slide's position, and renumbering never renames it (.s19a is the Diagrams slide at position 33). Search the slides for a class before you take it.
• Openers share one .s-opener block and mood slides one .s-mood block, repeated in each file. Keep the copies identical; check-deck.mjs warns on a copy that drifts.
• Slide CSS uses the tokens and obeys the 15 px floor. It does not restate the heading rule, the features or the tracking. The thumbnails drop every id, so style by class.
• check-deck.mjs fails on any selector that does not start with a class on its section.

11. Both themes

• Check every slide in light and dark. Dark is a token remap, so a slide built only from the tokens follows it.
• An <img> that shows a page or a crop takes a data-dark twin when one exists in shots/. Without one it keeps its 1 px --hair border, so a light capture reads as a plate on the dark ground.
• The deck opens dark when no theme is stored and never reads prefers-color-scheme. The D key and the site's theme button flip it. The viewer then swaps every data-dark image and redraws the dither ramps and the mood canvases.
• Look in dark for an ink swatch or plate that vanishes into the ground, a hard-coded color, a light capture without its border, and titanium text that loses contrast.
• references/viewer-and-build.md has the theme mechanics.

12. Build and check

node deck/shoot-slide.mjs 8 15                        # positions 8 and 15, light and dark, into deck/preview
node deck/shoot-slide.mjs all                         # every slide
node skills/gt-deck/scripts/check-deck.mjs --titles   # registries, structure, scoping, marks; writes nothing
pnpm build:deck                                       # public/brand-deck.html, public/deck-assets and public/shots/deck
pnpm lint:pictures                                    # the mood grids, slides and the built deck's grids
pnpm lint:lines:shell                                 # the line audit, /deck included, against the dev server on 3005
node scripts/lint/lines.mjs --shell --only /deck --width 1440 --theme dark   # the deck alone, about 45 s

• Shoot after every edit and look at both JPEGs. The shooter prints elements that overflow the sheet and any page error; it does not see a label on a line, text touching a rail, or an empty half-slide.
• Run check-deck.mjs before a commit. It exits 1 on an error.
• Commit public/brand-deck.html and public/deck-assets/ with the slides. The page is the file /deck serves, pnpm build runs lint/pictures.mjs against it and its grid files, and the line audit reads it.
• references/viewer-and-build.md covers the build's image files and lazy loading, its macOS and Pillow requirements, the deck/tmp/shots symlink, the shooter's Chromium path, and the size-limited artifact copy.

When a slide is added, removed, retitled or moved, nine places restate it: SLIDE_COUNT in deck/assemble.mjs, the #bar-total count, SECTIONS in tail.html, DECK_SLIDES in src/lib/search-index.ts, the slide count sentence on /brand, the /deck lines in README.md and public/llms.txt, deck/shots/OPENERS.md, and the section opener's "This section covers" sentence. The table with what changes in each, and what check-deck.mjs verifies, are in references/viewer-and-build.md ("The registries a slide touches").

13. What a defect is

• Overflow past the sheet, or text in the margins or touching a rail or rule.
• Text under 15 px on the sheet, or SVG text under 18 px.
• A label crossing a line, or closer than 12 px to one.
• Misaligned columns, unequal gaps in a pair, or an empty half-slide.
• A slider marker or chart mark that does not match its value, or numbers that contradict another slide.
• A screenshot that is stretched or cropped through content, or a light capture on the dark ground without its border.
• Low contrast in either theme.
• Color on text or lines, an accent outside the swatch, monospace outside .panel, bullets, shadows, rounded corners or gradients.
• An icon inside a sentence, or an icon from outside the sprite's set.
• A heading with a period, a comma tail, Title Case, or a product token as its first word; a metaphor, an "X, not Y" pair, an em dash or an exclamation mark in the copy.
• A picture's lit cells under its plate, two full-picture slides in a row, or a mood picture with plain English prose on it.
• An unscoped rule, a hand-edited speed mark, or a registry in section 12 that disagrees with the slides.

Writing a presentation

These rules hold for any GT presentation, the brand deck included (Kevin, 2026-07-29 and 2026-10-05): plan the narrative and each slide's text in text first; each slide stands alone, has a reason to exist and connects to the one before it; introduce an idea before a slide relies on it; open with how the brief was approached; return to an earlier style when it read better; and run the presentation in a real viewer. The detail and Kevin's words are in references/writing.md.

Borrowing the grammar for another surface

Kevin judged the first dashboard, onboarding and auth pass against the deck on 2026-09-25. A surface that borrows the grammar takes the tokens with the dark theme as a remap, the type ladder with tracking on Inter's curve, weight 500 as the ceiling, and one rule per seam with ruled rows. The rails, rules and registration crosses belong to the sheet, and icons and dither material follow the host repository. The detail is in references/borrowing.md; gt-aesthetic holds Kevin's verdicts across surfaces.

Review checklist

• [ ] Only the assigned slide files changed, or the brief named the shared files.
• [ ] Each slide file is one <section class="slide ..."> with its name comment, a scoped <style> if any, and no <script>.
• [ ] Type uses the head classes; nothing under 15 px; no weight above 500 outside the Typography specimen; no italic; no restated features or tracking.
• [ ] Color comes from the tokens; semantic hues appear only on icons; code sits on .panel.
• [ ] Lists are ruled rows; icons sit only in key cells or at the start of .plain rows.
• [ ] A diagram shows a relationship, follows section 7, and keeps labels horizontal and 12 px clear.
• [ ] No new image files outside an assigned picture round; screenshots carry data-dark twins or their border.
• [ ] Copy reads as plain technical English: sentence-case headings without periods, full sentences, the GT word as the mark.
• [ ] node deck/shoot-slide.mjs N shows no overflow and no page error, and both JPEGs were looked at.
• [ ] node skills/gt-deck/scripts/check-deck.mjs exits 0, with every registry in section 12 updated for an added, moved or retitled slide.
• [ ] pnpm build:deck ran, public/brand-deck.html and public/deck-assets/ are staged with the slides, and pnpm lint:pictures passes.
• [ ] A new presentation was planned in text first, each slide stands alone and ties to the one before it, and every idea is introduced before a slide relies on it.

Related skills

gt-voice (the writing rules the copy follows), gt-diagrams (diagram construction, the isometric family included), gt-dither and gt-graphics (the Bayer screen and the artifact picture standard behind the mood slides), gt-brand (the identity the deck presents, and the Inter rules for every other surface), gt-aesthetic (Kevin's verdicts across surfaces), gt-lints (the line audit and the picture lint), prototemplate (the repository and its shell). From the wiki: agent-browser for driving the viewer in a browser, create-graphics, design-engineering-polish.

Sources

Dated provenance for every rule is in references/sources.md: the deck's files and grammar, the build and check scripts, and Kevin's dated directives.