| name | marketing-design |
| description | Marketing asset design for developers: Open Graph / social media card specs and HTML generation, email template HTML/CSS patterns (table-based layout, Outlook compatibility, dark mode), banner and ad creative dimensions, print-safe PDF generation, and brand consistency across marketing touchpoints. From OG image code to email that renders in Outlook. |
Marketing Design Skill
When to Activate
- Generating Open Graph / Twitter card meta tags and preview images
- Building HTML email templates
- Creating social media asset specifications
- Defining ad creative dimensions for a campaign
- Ensuring marketing materials match brand guidelines
- Generating print-safe PDFs or documents that must render correctly in Outlook and other restrictive email clients
- Auditing an existing marketing page or email for missing OG tags, brand token violations, or platform dimension mismatches
Open Graph & Social Cards
Required meta tags
<meta property="og:title" content="[Page Title — max 60 chars]" />
<meta property="og:description" content="[Page description — max 155 chars]" />
<meta property="og:image" content="https://example.com/og/[page-slug].png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/[path]" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="[Same as og:title]" />
<meta name="twitter:description" content="[Same as og:description]" />
<meta name="twitter:image" content="https://example.com/og/[page-slug].png" />
<meta name="twitter:site" content="@handle" />
OG image specs
| Platform | Recommended size | Safe zone | Format |
|---|
| Facebook | 1200×630px | 1000×524px centered | PNG/JPG |
| Twitter/X | 1200×628px | 1000×524px centered | PNG/JPG |
| LinkedIn | 1200×627px | 1000×522px centered | PNG/JPG |
| Discord | 1200×630px | full bleed OK | PNG |
| WhatsApp | 1200×630px | full bleed OK | JPG |
Universal safe size: 1200×628px — works across all platforms.
Generating OG images with Satori (Next.js)
import { ImageResponse } from 'next/og';
export const runtime = 'edge';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title') ?? 'Default Title';
return new ImageResponse(
(
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
backgroundColor: '#0f1117',
padding: '60px',
fontFamily: 'Inter, sans-serif',
}}
>
{/* Logo area */}
<div style={{ display: 'flex', marginBottom: 'auto' }}>
< = '#', , }}>
ProductName
{/* Title */}
{title}
{/* Footer */}
example.com
),
{ : , : }
);
}
HTML Email Templates
The core rules
- Table-based layout — CSS Grid/Flexbox break in Outlook
- Inline styles only —
<style> blocks ignored by some clients
- Max width: 600px — wider breaks on mobile
- No external fonts — fallback to web-safe fonts
- Images must have
alt text — many clients block images by default
- Test in Litmus or Email on Acid before sending
Minimal responsive email template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Email Subject</title>
<style>
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
.stack { display: block !important; width: 100% !important; }
.hide-mobile { display: none !important; }
}
@media (prefers-color-scheme: dark) {
{ : ; }
{ : ; }
{ : ; }
}
Product Name
Hello [First Name],
[Main message goes here]
Call to Action
© 2026 Company Name · 123 Street · City
Unsubscribe
Email compatibility checklist
Social Media Asset Dimensions
Organic content specs
| Platform | Format | Recommended size | Max file size |
|---|
| Instagram | Post | 1080×1080px (square) or 1080×1350px (portrait) | 30MB |
| Instagram | Story / Reel cover | 1080×1920px | 30MB |
| Twitter/X | Post with image | 1200×675px (16:9) | 5MB |
| LinkedIn | Post | 1200×628px | 5MB |
| LinkedIn | Company banner | 1536×768px | 8MB |
| Facebook | Post | 1200×630px | 30MB |
| YouTube | Thumbnail | 1280×720px | 2MB |
| YouTube | Channel banner | 2560×1440px | 6MB |
Product Hunt launch assets
Logo: 240×240px (no text, icon only)
Gallery: 1270×760px (max 5 images)
Thumbnail: 630×420px
OG image: 1200×630px
Open Source / GitHub assets
Social preview: 1280×640px (Settings → Social preview)
Asset naming convention
Format: [product]-[type]-[variant]-[YYYY-MM].ext
Examples:
clarc-og-homepage-2026-03.png
clarc-instagram-launch-square-2026-03.png
clarc-email-welcome-header-2026-03.png
Print-Safe PDF Generation
For documents that may be printed (invoices, reports, certificates).
CSS for print
@media print {
nav, .sidebar, button, .cta { display: none; }
.no-break { page-break-inside: avoid; }
.page-break { page-break-before: always; }
body { color: #000; background: #fff; }
a { color: #000; text-decoration: underline; }
a[href]::after { content: " (" attr(href) ")"; font-size: 10px; }
@page { margin: 20mm; }
}
PDF generation with Puppeteer
const puppeteer = require('puppeteer');
async function generatePDF(url, outputPath) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0' });
await page.pdf({
path: outputPath,
format: 'A4',
printBackground: true,
margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' },
});
await browser.close();
}
CMYK consideration
Screen colors (RGB/sRGB) do not print accurately in commercial print.
RGB → Screen display
sRGB → Web (same as RGB, standardized)
CMYK → Commercial print (offset, digital press)
Pantone → Brand colors in print (exact color matching)
Rule: If materials go to professional print (business cards, posters),
provide CMYK values in brand guidelines alongside hex/RGB.
Brand Consistency Checklist (Marketing)
Before publishing any marketing asset:
Checklist
