hermes-config/skills/self-hosting/shop-pro-quote/references/pdf-styling.md

ShopProQuote PDF Styling Guidelines

PDFs are generated client-side by quote-tab-manager.js → generateQuotePDF() using jsPDF (dynamically imported from CDN).

User's aesthetic preferences

• Compact and tight — no wasted whitespace, no large gaps between labels and values
• Professional — clean invoice-style with subtle gray background panels, thin separators, no colons on labels
• Font sizes: 8-10px range. 8px for labels/section headers, 9px for body text, 10px for bold totals
• Spacing: 6-8px between lines, tight but readable
• Boxes: subtle #f8f8f8 fill with #dcdcdc border at 0.5px, 2-3px corner radius
• Separators: 0.5px #c8c8c8 (not thick black lines)
• Labels: no colons, gray (#646464) for field labels, black for values

Key rendering sections in generateQuotePDF()

Header box (~line 3765)

• Two-column: SERVICE PROVIDER (left) + CUSTOMER INFORMATION (right)
• Fill is drawn FIRST (roundedRect with 'F' only) before text, so text renders on top
• Border drawn AFTER content (roundedRect with 'D' only) at computed height
• headerBoxPadding controls top+bottom padding consistently

Customer info lines (~line 3841)

• addInfoLine() helper — label at rightColX, value at rightColX + 55 (compact, not full-width)
• Labels: Customer, Vehicle, RO #, Mileage, VIN, Date

Service items (~line 3917)

• Service name: 10px bold at line 3994
• Price: right-aligned, same line
• Customer decision badges (approved/declined) above service name
• Priority, recommendation, explanation, parts notes follow

Totals box (~line 4172)

• Summary box at 45% width from right margin
• Fill #f8f8f8, border #dcdcdc at 0.5px
• Line items: 9px, gray labels, black values, 8px row spacing
• TOTAL: 10px bold
• Shop charge note positioned at boxBottomY + 10 (below box boundary, never overlapping)

Pitfalls

• Box covering text: draw fill-only ('F') BEFORE text; draw border-only ('D') after content height is known
• Overlapping sections: use boxBottomY from the box calculation, not yPos + N magic numbers
• Invisible borders: #fafafa fill with #e6e6e6 border at 0.5px is imperceptible — use #f8f8f8 fill with #dcdcdc border for visible contrast
• Excessive whitespace between label/value: don't right-align values to pageWidth - margin — use a fixed offset from the label instead (rightColX + 55)
• Font size consistency: keep body text at 9px, labels at 8px, totals at 10px throughout