document-design

Document design

Create professional, print-ready HTML documents that export to PDF with customizable branding.

Brand configuration

Before creating documents, check for pdf-playground.local.md in the project root. If it is absent, check the legacy Claude Code path .claude/pdf-playground.local.md. If both exist, use only the project-root file. If neither exists, use sensible defaults or ask the user for their brand colors.

Reading brand config

Parse the selected config file's YAML frontmatter:

---
brand:
  name: "Organization Name"
  tagline: "Tagline"
  website: "https://example.com"
  email: "[email protected]"

colors:
  primary: "#CA3553"
  secondary: "#000000"
  background: "#FFFFFF"
  text: "#2d2a28"
  muted: "#666666"

fonts:
  heading: "Playfair Display"
  body: "Source Sans 3"

style:
  headingCase: "sentence"
  useOxfordComma: true
---

Default brand values

If no config exists, use these defaults:

• Primary color: #CA3553 (red)
• Secondary color: #000000 (black)
• Heading font: Playfair Display
• Body font: Source Sans 3
• Heading case: sentence case

Core principles

1. Print-first design: All documents target 8.5" × 11" letter size with proper margins
2. Brand compliance: Use colors and fonts from brand configuration
3. Sentence case by default: Unless brand config specifies "title" case
4. Clean exports: Documents must render correctly when printed to PDF

CSS variables

Generate CSS variables from brand config:

:root {
    --primary: [colors.primary];
    --secondary: [colors.secondary];
    --background: [colors.background];
    --text: [colors.text];
    --muted: [colors.muted];

    /* Derived colors */
    --primary-dark: [darken primary by 15%];
    --gray-100: #f5f4f2;
    --gray-200: #e8e6e3;
}

Print CSS fundamentals

Page setup

@page {
    size: 8.5in 11in;
    margin: 0;
}

@media print {
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .page {
        page-break-after: always;
        page-break-inside: avoid;
    }
}