Metis Strategy Whitepaper Skill

Metis whitepapers are published thought leadership documents that establish Metis as the authoritative voice on a strategic topic for technology and digital executives. The output is a print-ready PDF rendered from HTML via Playwright, closely matching the visual style of published Metis whitepapers.

Read all three reference files before producing output:

• references/content-patterns.md — narrative structure, page templates, voice/tone, writing rules
• references/page-layouts.md — HTML/CSS templates for every page type, photo handling, rendering
• references/diagram-builders.md — SVG code for Metis framework diagrams (maturity ladders, matrices, phase flows, etc.)

The scripts/ folder contains the rendering helper — use it directly rather than rewriting from scratch each time.

Rendering Stack

One-time setup (if Playwright is not yet installed in the working directory):

npm install playwright
npx playwright install chromium

Brand Assets

All Metis brand assets live on the shared drive. Reference them using absolute file:// paths in the HTML so Playwright can resolve them regardless of where whitepaper.html is saved.

Brand root: G:\Shared drives\Knowledge Management\New Brand Assets

In HTML src attributes, use the full file:// URI with forward slashes and %20 for spaces:

file:///G:/Shared%20drives/Knowledge%20Management/New%20Brand%20Assets/Graphic%20Devices/Metis%20Trajectory%20Device%20RGB.png

Or use the helper constant defined at the top of each generated HTML file:

<script>
  const BRAND = "file:///G:/Shared%20drives/Knowledge%20Management/New%20Brand%20Assets";
</script>

Then reference assets as template literals in inline styles, or pre-resolve them before writing the HTML.

Logo fallback: If the logo cannot be resolved, render the wordmark as <span style="font-size:13px;font-weight:700;color:rgba(255,255,255,0.7);letter-spacing:0.06em;">METIS STRATEGY</span>.

Trajectory device rules (from brand guidelines):

• Always points up and to the right — never rotate or flip
• On cover and divider pages: used as a full-page overlay at 30–35% opacity on top of a teal-to-navy gradient background (linear-gradient(135deg, #20216f 0%, #256ba2 35%, #1a8a7a 60%, #3cdbc0 100%))
• Position: position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.3;pointer-events:none;
• Do NOT place the trajectory device on the introduction/abstract page (page 2)
• Do not alter its colors

Metis logo on every page:

• Every page must display the Metis Strategy logo in the top-right corner
• On light-background pages: use Metis Strategy Black-Mint RGB Logo.png
• On dark-background pages: use Metis Strategy White-Mint RGB Logo.png
• CSS: .metis-m { position: absolute; top: 22px; right: 28px; height: 22px; width: auto; }
• Fallback: <span style="font-size:13px;font-weight:700;color:rgba(255,255,255,0.7);letter-spacing:0.06em;">METIS STRATEGY</span>

Input Folder Structure

The user provides a source folder. Typical structure:

whitepaper-source/
├── config.json              ← title, authors, orientation, short_title
├── brief.md                 ← overall outline and notes (optional)
├── content/                 ← one .md or .txt file per section
│   ├── 00-abstract.md
│   ├── 01-section1.md
│   └── ...
├── assets/
│   ├── photos/              ← .jpg/.png photos for page backgrounds/banners
│   ├── diagrams/            ← pre-made diagram images (optional)
│   └── data/                ← data files if charts need to be generated
│   └── brand/               ← auto-populated from skill bundle (trajectory_device, etc.)
└── (output goes here)

On first run, copy the brand assets into the source folder:

cp -r <skill-path>/assets/brand/ whitepaper-source/assets/brand/

This ensures Playwright can resolve assets/brand/trajectory_device.png relative to whitepaper.html.

config.json format:

{
  "title": "AI Smart: Maximizing AI Value with a Balanced Strategy",
  "subtitle": "The Metis Strategy framework to guide technology executives through the ambiguity of AI",
  "short_title": "AI Smart",
  "orientation": "landscape",
  "authors": [
    { "name": "Chris Davis", "title": "West Coast Partner", "email": "chris.davis@metisstrategy.com", "phone": "+1 (609) 529-6452" }
  ],
  "contributors": ["Ben Calder", "Jasmeet Singh"],
  "cover_photo": "assets/photos/cover.jpg",
  "year": 2025
}

If the user has not organized their source folder this way, help them structure it before proceeding.

Whitepaper Anatomy

Orientation

Brand Constants

/* Copy directly into <style> tags */
:root {
  --dark-blue:  #20216f;
  --green:      #3cdbc0;
  --med-blue:   #256ba2;
  --gray:       #7b8692;
  --white:      #ffffff;
  --light-bg:   #f4f6fa;
  --teal-light: #e8f8f5;
}

Footer format on every interior page: Page X | [Short Title] — right-aligned, var(--gray), 9pt. Top-right corner: Small Metis M icon on every interior page. Never use the BrandLine footer (Driving change. Elevating leaders.) inside a whitepaper.

Step-by-Step Workflow

1. Gather requirements and length

Ask the user the following questions before proceeding:

• Length: "How long would you like the whitepaper to be? (e.g., 6–8 pages, 10–12 pages, 15+ pages)"
  • If the user does not answer or says "you decide," default to 15–28 pages
  • Adjust content density and number of sections to match the requested length
• External research: "Would you like me to conduct external research to support this whitepaper?"
  • If yes: "What topics, industries, or specific areas should I research? Any parameters or constraints?"
  • Perform web research, collect sources with URLs, and present findings to the user before outlining
  • NEVER cite sources from McKinsey, Bain, BCG, or Deloitte — these are Metis Strategy competitors. Use industry analysts (Gartner, IDC, Forrester), academic sources (arXiv, university research), developer surveys (Stack Overflow, JetBrains, GitHub), government/nonprofit research (DORA, Linux Foundation), and vendor research (Microsoft Research, etc.) instead.

2. Parse inputs

Read config.json and all content files in the source folder (if provided). Take inventory of available photos and assets. If content files are absent, ask the user for the content or offer to generate it from the brief.

3. Present outline and sources for approval

Produce a page-by-page outline table before writing any content or HTML. This is mandatory, not optional — even when the prompt seems detailed. Format:

The Layout column is required. It prevents the common failure of defaulting to identical two-column text pages throughout the whitepaper. Ensure layout variety: no more than two consecutive pages should share the same layout type. See "Visual Density Rules" below for the full list of layout types.

In addition to the outline, present the user with a numbered list of all external sources you plan to cite, including title, author/publisher, year, and URL. This allows the user to approve, remove, or request additional sources before drafting begins.

Wait for user approval of both the outline and the source list before proceeding to step 4. Do not begin drafting until the user confirms.

4. Write content

For each section, follow the writing rules in references/content-patterns.md:

• Identify which pages need framework diagrams and note the diagram type
• Mark pull quotes with [PULL QUOTE]...[/PULL QUOTE]
• Note photo placements with [PHOTO: description of ideal image]
• Use numbered endnote citations throughout (see "Endnote Citation System" below)

5. Select / assign photos

Match available photos from assets/photos/ to page placements. For missing photos, use a dark navy gradient placeholder — do not leave blank white space.

6. Build framework diagrams

For each diagram in the content, use the SVG generators in references/diagram-builders.md. If a diagram image already exists in assets/diagrams/, use it as an <img> tag instead.

7. Assemble HTML

Build a single HTML file (whitepaper.html) with one .page div per page. Use the CSS templates from references/page-layouts.md. Ensure:

• Metis Strategy logo appears in the top-right corner of every page
• Cover and divider pages use the teal-to-navy gradient with trajectory device overlay
• Introduction page (page 2) does NOT have the trajectory device
• All in-text citations use <sup class="fn">N</sup> superscript numbers
• A dedicated References/Endnotes page is included at the end with numbered entries
• Credits/closing page uses centered Metis logo + email (no author cards or "AI Working Group")

8. Human review (spot edits)

Before rendering the final PDF, the user may want to edit wording, swap data points, or adjust phrasing. The HTML file is the editable source. Guide them:

How to spot-edit whitepaper.html:

1. Open the file in Notepad or VS Code (any text editor works)
2. Use Find (Ctrl+F) to locate the text you want to change — search for a unique phrase from the sentence
3. Edit the text directly; the surrounding HTML markup does not need to change for wording edits
4. Save (Ctrl+S), then re-render the PDF

What's safe to edit in the HTML:

• Any text between > and < tags — this is the content
• Numbers, statistics, company names, dates, titles
• Pull quotes, callout box text, footer page numbers

What to leave alone (or ask the agent to change):

• CSS class names and style="" attributes — these control layout
• SVG coordinates — these control diagram shapes
• The <head> section — this loads fonts and base styles

If the user has many edits, it's faster to give them back as a list and have the agent apply them all at once, then re-render.

9. Render to PDF

Run the renderer after edits are complete. Use Playwright (Node.js or Python):

node scripts/render-whitepaper.js whitepaper.html output.pdf portrait

Or with Python Playwright if Node.js is unavailable:

from playwright.sync_api import sync_playwright
# See scripts/render-whitepaper.js for equivalent Python setup

The script handles page sizing, print backgrounds, and output path.

10. Final check and deliver

Open the PDF. Verify: no text overflow, photos loaded, trajectory device visible on cover/dividers only, Metis logo on every page, diagrams rendered, footer and page numbers correct, endnote numbers match References page. Fix any issues in the HTML, re-render, and deliver.

Critical Rules

1. Source: Metis Strategy caption below every framework diagram — always.
2. Section divider page before every major numbered section — teal-to-navy gradient with trajectory device overlay, white section title text (no white pill/background), pull statement.
3. SnglArrow (▶) + eyebrow label precedes every major section headline on content pages.
4. Pull quotes extracted from the strongest sentence per section — marked clearly for the designer if this is a draft.
5. Client examples follow the format: [Company], as an example, [action]. [outcome].
6. Photo placeholders use dark navy gradient, never white/blank.
7. All framework diagrams are built as inline SVG when no image asset is provided.
8. Credits/closing page shows centered Metis Strategy White-Mint logo + info@metisstrategy.com + copyright line. No author cards, no "AI Working Group."
9. Footer on every page: Page X | [Short Title] — not the BrandLine.
10. Open Sans loaded from Google Fonts: https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap
11. Trajectory device on cover and section dividers only — used as full-page overlay on gradient background, NOT on the introduction page. Use the G: drive file at G:\Shared drives\Knowledge Management\New Brand Assets\Graphic Devices\Metis Trajectory Device RGB.png (referenced via file:// URI in HTML), never a hand-drawn SVG.
12. Em dashes: one per page maximum. Frequent em dashes read as AI-generated. Replace with a period + new sentence, a colon, or a comma. See references/content-patterns.md for examples.
13. Produce the outline AND source list first, always — before any content or HTML generation. Both are required deliverables. Wait for user approval before drafting.
14. Metis Strategy logo in the top-right corner of every page (Black-Mint on light pages, White-Mint on dark pages).
15. Never cite McKinsey, Bain, BCG, or Deloitte. These are competitors. Use industry analysts, academic sources, developer surveys, and government/nonprofit research instead.
16. Numbered endnote citations throughout. In-text: <sup class="fn">N</sup>. A dedicated References/Endnotes page at the end lists all sources with numbered entries (1–N) including author, title, year, and URL.
17. Ask the user about length before starting. Do not assume 15–28 pages. Only default to that range if the user declines to specify.

Visual Density Rules

These rules prevent the most common failure mode: text-only pages with large empty areas that look unfinished compared to published Metis whitepapers.

Every content page needs a visual anchor

A page with only two-column body text and a headline will look empty at 1280×720. Every content page must include at least one of the following in addition to body text:

• A half-page or banner photo (B&W stock, with dark overlay for legibility)
• An inline SVG framework diagram
• A styled callout box (case study, key concept, or data highlight)
• A pull quote (bold italic, green left border)
• Metric highlight cards (large teal numbers + small label text)

Most published pages include two or more of these elements. When in doubt, add more visual material rather than less. Empty white space reads as unfinished draft.

Layout variety is mandatory

Do not use the same two-column text layout for every content page. A published whitepaper alternates across at least four layout types:

Plan layout variety during the outline step (Step 2). Annotate each page with its intended layout type so the HTML build step does not default to uniform text-only pages.

Photos

Use real photos, not just gradient placeholders. Gradient-only pages look visibly sparse and unpolished compared to published Metis whitepapers. Use the firm's B&W stock photo library:

Stock photo path: G:\Shared drives\Knowledge Management\New Brand Assets\PPT Assets\Metis PPT Images\

Available photos (B&W, ready to use as file:// URIs):

• pexels-divinetechygirl-1181311-bw.jpg — woman at computer (covers, tech topics)
• pexels-thecoachspace-2977547-bw.jpg — coaching/collaboration (people, team topics)
• chris-linnett-Rl8gOeq0xNM-unsplash-bw.jpg — abstract/atmospheric
• pexels-pixabay-276299-bw.jpg — architecture/building (structure topics)
• Metis_flatiron_bw2.jpg — Flatiron building (conclusion, NYC brand identity)
• pexels-pixabay-63320-bw.jpg — office environment (intro, workplace topics)
• Metis_leap_bw_2.jpg — action/movement (transformation topics)
• curated-lifestyle-tRkGpRU1K90-unsplash-bw.jpg — lifestyle/professional
• pexels-pixabay-358530-bw.jpg — additional atmospheric

Photo rules:

• Always add a dark overlay (rgba(0,0,0,0.40) to rgba(0,0,0,0.50)) on photos used behind text for legibility
• Cover: teal-to-navy gradient background, B&W photo at 25% opacity, trajectory device overlay at 35% opacity
• Photo banners: ~35% page height for landscape, ~25% for portrait
• Photo+text splits: photo side is 40%, text side is 60%

If the user provides their own photos, use those. Only fall back to gradients when no photos are available at all, and note this in the output as a limitation.

Energy device as background texture

On dark navy pages, overlay the Energy device PNG at 7–10% opacity as a full-width background texture. This adds visual depth without competing with content:

<img src="file:///G:/Shared%20drives/Knowledge%20Management/New%20Brand%20Assets/Graphic%20Devices/Metis%20Energy%20Device%20RGB.png"
     style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0.08;pointer-events:none;" alt="" />

Callout boxes for case studies

Named company examples that span 2+ sentences should be styled as callout boxes, not left as inline body text:

<div class="callout">
  <div class="callout-label">DBS Bank</div>
  CEO Piyush Gupta mandated the bank operate as a technology startup. The GANDALF
  framework and Agile operating model now deliver 45 million hyper-personalized
  nudges monthly.
</div>

Metric highlight cards

For data-heavy sections, present key statistics as large-number cards rather than inline text. Pattern: large teal number (36–42px) + small gray label (9–10px) below:

<div style="display:flex;gap:32px;margin:20px 0;">
  <div style="text-align:center;">
    <div style="font-size:38px;font-weight:700;color:var(--green);">+154%</div>
    <div style="font-size:9px;color:var(--gray);margin-top:4px;">Pull Request Size</div>
  </div>
  <!-- ... more cards ... -->
</div>

Endnote Citation System

All whitepapers use numbered endnote citations. Do NOT use inline parenthetical citations or footnotes at the bottom of individual pages.

In-text citation markup:

<!-- On light-background pages -->
<sup class="fn">1</sup>

<!-- On dark-background pages -->
<sup class="fn on-dark">1</sup>

Required CSS (include in base styles):

sup.fn {
  font-size: 8px; font-weight: 700; color: var(--green);
  vertical-align: super; line-height: 0; margin-left: 1px;
}
sup.fn.on-dark { color: var(--green); }

References/Endnotes page: The final page of every whitepaper must be a dedicated References page listing all cited sources as numbered entries (1–N). Each entry includes: author/publisher, title (italicized), year, and URL. Use the two-column layout on this page to fit more entries.

Example endnote entry:

1. Stack Overflow. 2025 Developer Survey: AI Tools & Developer Experience. 2025.
   https://survey.stackoverflow.co/2025/

Playwright Rendering Notes

Landscape orientation bug: When using the render-whitepaper.js script with explicit width: '1280px' and height: '720px' (already landscape dimensions), do NOT also set landscape: true in the page.pdf() call. Playwright interprets landscape: true as "swap width and height," which produces a 720×1280 portrait page. The render script has been patched to avoid this, but if writing a custom renderer, omit the landscape flag when providing explicit landscape dimensions.

Expected file sizes: A whitepaper with embedded B&W photos will be 8–12 MB. A text-only draft without photos will be ~0.5 MB. The large size is normal and expected.