Pdf Design

PDF Design System

Create and edit professional PDF reports and funding proposals with live preview and iterative design.

Interactive editing mode

During a design session, use these commands:

| Command | Action | |---------|--------| | preview | Screenshot current state | | preview page N | Screenshot specific page | | show cover | Preview cover page | | show budget | Preview budget section | | regenerate | Create new PDF | | upload | Upload to Google Drive | | done | Finish session |

Workflow:

1. You say "preview" → I show current state
2. You describe changes → I implement them
3. Repeat until done → Generate final PDF

---

Quick start

# Copy template to start new report
cp ~/.claude/plugins/pdf-design/templates/democracy-day-proposal.html ./new-report.html

# Generate PDF (must use snap-accessible path)
mkdir -p ~/snap/chromium/common/pdf-work
cp new-report.html ~/snap/chromium/common/pdf-work/
chromium-browser --headless --disable-gpu \
  --print-to-pdf="$HOME/snap/chromium/common/pdf-work/output.pdf" \
  --no-pdf-header-footer \
  "file://$HOME/snap/chromium/common/pdf-work/new-report.html"

Document types

• Funding proposals — Grant requests with budgets
• Program reports — Initiative updates
• Impact reports — Metrics and outcomes
• Budget summaries — Financial breakdowns

Key principles

1. Sentence case — Never Title Case
2. Left-aligned — Never justified text
3. Print-ready — 8.5" × 11" letter size
4. Brand consistent — CCM red or program palettes

---

Brand guidelines

CCM standard colors

:root {
    --ccm-red: #CA3553;
    --ccm-black: #000000;
    --ccm-gray: #666666;
    --ccm-light: #e2e8f0;
}

Program-specific (Democracy Day)

:root {
    --civic-navy: #1a2b4a;
    --civic-blue: #2d4a7c;
    --civic-gold: #c9a227;
    --civic-red: #b31942;
}

Typography

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}

---

HTML structure

Page setup

@page { size: letter; margin: 0; }

.page {
    width: 8.5in;
    height: 11in;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    page-break-after: always;
}

Cover page

    
        Center for Cooperative Media
        Report title
        Brief description.
    
    
        
        
            February 2026
            
        
    

Content page

    
        Document title
        2
    
    
        
    
    
        
    

Budget table

    
        ExpensePer yearTotal
    
    
        
            ItemDetails
            $10,000
            $20,000
        
    
    
        Total$50,000$100,000
    

Page footer

.page-body {
    padding: 0.2in 0.65in 0.3in;
    overflow: hidden;
}

.page-footer {
    padding: 0 0.65in 0.5in;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
}

---

Footer clearance

Content must not touch or overlap the page footer. These rules apply to content pages — cover pages and special layouts may use different structures.

• Content pages must use display: grid; grid-template-rows: auto 1fr auto on .page
• Content pages must have exactly 3 direct children: header, content wrapper (.page-body), footer
• The content wrapper must have overflow: hidden to prevent text bleeding
• Never use position: absolute for footers — keep them in normal document flow as the third grid row
• Use .page-footer:empty { display: none; } so pages without footer content don't render a blank border
• If content is too long, reduce content rather than shrinking the footer gap

---

PDF generation

Chromium (snap-confined)

# Must use ~/snap/chromium/common/ path
mkdir -p ~/snap/chromium/common/pdf-work
cp template.html ~/snap/chromium/common/pdf-work/
chromium-browser --headless --disable-gpu \
  --print-to-pdf="$HOME/snap/chromium/common/pdf-work/output.pdf" \
  --no-pdf-header-footer \
  "file://$HOME/snap/chromium/common/pdf-work/template.html"
cp ~/snap/chromium/common/pdf-work/output.pdf ./

Preview pages

# PDF to PNG
pdftoppm -png -f 1 -l 1 output.pdf preview

# Page count
pdfinfo output.pdf | grep Pages

Legion browser preview

~/.claude/scripts/legion-browser.py screenshot "file:///path/to/template.html" -o preview.png

---

Google Drive upload

cd ~/.claude/workstation/mcp-servers/gmail && source .venv/bin/activate
python3 
    23,000+Students enrolled
    $660MAnnual operating budget
    $2.3BEconomic impact
    252Acre main campus

.stats-strip {
    display: grid;
    grid-template-columns: repeat(var(--stat-cols, 4), 1fr);
    gap: 0.3in;
}
.stats-strip .stat {
    padding: 0.05in 0 0.1in 0.24in;
    border-left: 4px solid var(--ccm-red);
}
.stats-strip .big {
    font-family: 'Montserrat', sans-serif;
    font-size: 28pt;
    font-weight: 800;
    line-height: 1;
    color: var(--ccm-black);
    letter-spacing: -0.015em;
}
.stats-strip .label {
    font-size: 9pt;
    font-weight: 600;
    margin-top: 0.1in;
    color: var(--ccm-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

Three-column content

For breaking one topic into three parallel facets with a dashed divider between columns.

.three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.3in;
}
.three-col > div + div {
    padding-left: 0.3in;
    border-left: 2px dashed #d9d9d9;
}
.three-col h3 {
    font-size: 10pt;
    font-weight: 800;
    color: var(--ccm-red);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.12in;
}

Four-tile pillars

Numbered cards with a red top rule — for parallel capabilities, themes, or commitments. Common on proposal executive summary pages.

    
        Pillar 01
        Proven facilities and expertise
        Short 2–3 line description.
    
    

.four-col-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.15in;
}
.four-col-tiles .tile {
    border-top: 4px solid var(--ccm-red);
    padding: 0.18in 0.15in 0.15in;
    background: #f7f6f5;
}
.four-col-tiles .tile-num {
    font-size: 8pt;
    font-weight: 800;
    color: var(--ccm-red);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.08in;
}
.four-col-tiles .tile h3 {
    font-size: 12pt;
    font-weight: 800;
    color: var(--ccm-black);
    margin-bottom: 0.08in;
}
.four-col-tiles .tile p {
    font-size: 9pt;
    line-height: 1.38;
    color: var(--ccm-gray);
    margin: 0;
}

Partner / label grid

4-column grid of labeled tiles with a red left accent bar. Use for sponsor lists, letters of support, or advisory board rosters.

.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.12in 0.18in;
}
.partner-grid .partner {
    position: relative;
    padding: 0.14in 0.15in 0.14in 0.22in;
    background: #f7f6f5;
    font-size: 9pt;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ccm-black);
}
.partner-grid .partner::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0.06in;
    background: var(--ccm-red);
}

Vertical rhythm

Every block above was tightened based on real presentation feedback. Key principles:

• Accent rule sits ~0.14in below the headline, not further
• Lede paragraph sits ~0.18in below the headline or rule
• Body content sits ~0.22in below the lede
• Between body sections, 0.25–0.3in gap is enough — don't add more
• Between grid cards, use 0.15–0.2in gaps
• The instinct to "add breathing room" almost always makes pages feel emptier rather than cleaner

If a page feels too crowded, reduce content, don't expand spacing.

---

Known issues

1. Base64 images — Don't read HTML with large base64 using Read tool (API error). Use sed/grep/Python.
2. Snap confinement — Chromium can only write to ~/snap/chromium/common/
3. Fonts — Google Fonts via CDN; for offline, embed as base64

Logo locations

• CCM logo: ~/.claude/plugins/pdf-design/templates/ (embedded in template)
• Brand assets: /home/jamditis/projects/cjs2026/public/internal/brand_web_assets/

Template

Reference: ~/.claude/plugins/pdf-design/templates/democracy-day-proposal.html

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jamditis
• Source: jamditis/claude-skills-journalism
• License: MIT
• Homepage: https://skills.amditis.tech/

Install and usage instructions live in the source repository linked above.