Blog Post Visual Style (Cross-Repo)
Use this skill whenever you create or generate hero images, OG/social preview images, or any post artwork so that assets have the same visual style across repositories. The style is mandatory for blog/post imagery; repo-specific paths and scripts are documented per project.
All hero and post imagery MUST follow this style. Apply it when prompting image generation (e.g. GenerateImage, DALL·E, Midjourney) or when briefing a designer.
Visual rules:
| Rule | Requirement |
|---|---|
| Background | Solid black only. No gradients, no white sections, no mixed backgrounds. |
| Foreground | White line-art exclusively. No fills, no shading, no gradients within shapes. |
| Line work |
| Consistent thin white outlines. Clean, minimal line weight. |
| Color | Monochromatic black and white only. No gray, no other colors. |
| Composition | Elements in lower portion of frame. Generous negative (black) space above. |
| Aesthetic | Stylized, iconic, minimalist. Not realistic or photorealistic. |
| Typography | None. No text, labels, or captions within the image. |
Focal brand: When the post is about a specific product or brand (e.g. Notion, Claude, OpenAI), focus the hero on that brand using recognizable shapes or motifs in the same white line-art style. No logos or wordmarks; the image should read as "this post is about X" at a glance.
When generating a new hero or post image, use a prompt that enforces the style. Example structure:
[Subject or theme]. Black background only. White line-art only, thin clean outlines, no fills or shading. Minimalist, iconic, stylized. No text or labels. Composition with elements in lower portion of frame and generous negative space above.
Replace [Subject or theme] with the post topic (e.g. "Agent memory and a source of truth", "Claude Memory tool as a simple box with a key", "Bitcoin wallet and MCP").
Some repos (e.g. markmhendrickson website) expect multiple composed assets from the same style. Create separate compositions for each aspect ratio; do not just crop one image.
| Asset | Aspect | Typical use |
|---|---|---|
| Hero | Flexible (keep-proportions) | Full-width on post page |
| Square thumbnail | 1:1 | Listings, cards, prev/next |
| OG / social | 1200×630 landscape | Twitter, LinkedIn, etc. |
All three must share the same visual style (black background, white line-art, no typography). Prefer a script or export step to generate OG from a composed 1200×630 source when the repo provides one.
Each repository may define where to store assets and which scripts to run. Check that repo's docs (e.g. README.md, content/posts/README.md, or foundation adapter config) for:
public/images/posts/, static/images/posts/{slug}-hero.png, {slug}-hero-square.png, {slug}-hero-og.png, og/{slug}-1200x630.jpg{slug}-hero-style.txt with keep-proportions for uncropped displaygenerate-hero-square-from-hero.mjs, npm run generate:og:post -- <slug>, regenerate-hero-assets-centered.mjspython3 execution/scripts/generate_posts_cache.py after adding or changing assetsIf the repo has no docs, apply only the Visual style (mandatory) and use sensible paths (e.g. images/posts/, slug-based filenames).
keep-proportions in -hero-style.txt).Canonical style reference: Hero Image Style Guide in the markmhendrickson website posts README (execution/website/markmhendrickson/react-app/src/content/posts/README.md). This skill is the foundation-level summary so the same style can be applied in any repo without reading that file.