document-design

# Document design Create professional, print-ready HTML documents that export to PDF with customizable branding. ## Brand configuration Before creating documents, check for brand configuration in `.claude/pdf-playground.local.md`. If found, use those settings. If not, use sensible defaults or ask the user for their brand colors. ### Reading brand config Look for `.claude/pdf-playground.local.md` in the project root. Parse the YAML frontmatter: ```yaml --- brand: name: "Organization Name" tagline: "Tagline" website: "https://example.com" email: "contact@example.com" 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: ```css :root { --primary:...