skills-source-products/delay-list-skill/REPORT-STYLE.md

Delay List PDF Report — Styling Reference

This file defines the visual design for all Step 3 PDF reports generated by the delay-list-processor skill. The design follows the Helloprint brand identity.

---

Brand Colours

Primary Palette

Name	Hex	Usage
Grochimaru	#D9D909	Accent highlight (sparingly)
Snowflake	#F0F0F0	Alternating table row background, light backgrounds
Charmed Green	#008539	Primary brand green — cover title block background, section headers, HRFlowable dividers
Link Green	#049E46	Links, secondary green accents
Theme Black	#022B07	Primary text colour, dark table header backgrounds

Secondary Palette

Name	Hex	Usage
Heroic Red	#D64545	Internal Issues section header, error/alert indicators
Honey Teriyaki	#F36D13	Review Needed section header, warning indicators
Ripe Mango	#F0C225	Flyeralarm/Probo manual action section headers
Hampton Beach	#9D6639	Reserved (future use)
Seaside	#67A5B1	Other Statuses / Shipped section header, info indicators

Derived Colours

Purpose	Hex	Notes
In Production header	#008539	Uses Charmed Green (on track = green)
Table grid lines	#CCCCCC	Neutral thin grid
Table alt row	#F0F0F0	Snowflake
Table header text	#FFFFFF	White on dark backgrounds
Body text	#022B07	Theme Black
Page header/footer text	#666666	Muted grey
Header rule line	#CCCCCC	Below page header

---

Typography

Font family: Inter (Regular and Bold)

Since reportlab does not include Inter by default, download and register Inter-Regular.ttf and Inter-Bold.ttf before generating the PDF. Fall back to Helvetica only if Inter cannot be loaded.

# Font registration example
from reportlab.pdfbase import pdfmetrics
from reportlab.pdfbase.ttfonts import TTFont

try:
    pdfmetrics.registerFont(TTFont('Inter', 'Inter-Regular.ttf'))
    pdfmetrics.registerFont(TTFont('Inter-Bold', 'Inter-Bold.ttf'))
    FONT = 'Inter'
    FONT_BOLD = 'Inter-Bold'
except:
    FONT = 'Helvetica'
    FONT_BOLD = 'Helvetica-Bold'

Font Sizes

Element	Font	Size	Style
Cover title	Bold	28pt	White on Charmed Green
Cover subtitle	Regular	14pt	White on Charmed Green
Cover date	Regular	12pt	White on Charmed Green
Section heading (e.g. "Section 1 — HubSpot Analysis")	Bold	16pt	Theme Black
Subsection heading (e.g. "1.1 Internal Issues")	Bold	13pt	Theme Black
Supplier heading (e.g. "Oakdene Services — 15 order(s)")	Bold	13pt	Theme Black
Table header cells	Bold	8pt	White
Table body cells	Regular	7.5pt	Theme Black
Email template text	Regular	9pt	Theme Black
Page header	Regular	8pt	#666666
Page footer	Regular	8pt	#666666
Stat card number	Bold	28pt	Theme Black
Stat card label	Regular	9pt	#666666
Disclaimer / caveat text	Regular	8pt	Italic, #666666

---

Page Layout

• Page size: A4 (595.27 x 841.89 pt)
• Margins: 18mm left/right, 20mm top (to accommodate header), 18mm bottom
• Header: "Helloprint | Delay List Step 3 Report | DD Mon YYYY" — 8pt, #666666, with a thin rule line (#CCCCCC) below
• Footer: Left: "Confidential - Helloprint Operations" — Right: "Page X" — 8pt, #666666

---

Cover Page (Page 1)

1. Title block — Full-width rectangle with #008539 (Charmed Green) background

   • "Delay List Report" — 28pt Bold, white
   • "Step 3: Supplier Outreach Analysis" — 14pt Regular, white
   • "DD Mon YYYY" — 12pt Regular, white
   • Padding: 20pt top/bottom, 18mm left

2. Summary stat cards — 2×4 table grid below the title block

   • Each cell: large number (28pt Bold, Theme Black) + label below (9pt Regular, #666666)
   • Cell borders: thin #CCCCCC
   • Cards: Total Orders | HubSpot Hits | Need Outreach | Internal Issues | Masterprint (Skip) | Flyeralarm (Manual) | Probo (Manual) | Suppliers to Contact

3. Caveat note — Italic 8pt disclaimer about HubSpot search scope

---

Section 1 — HubSpot Analysis

Section heading: "Section 1 — HubSpot Analysis" (16pt Bold, Theme Black)

Subsections with colour-coded table headers:

Subsection	Header background	Header text
1.1 Internal Issues	#D64545 (Heroic Red)	White
1.2 In Production / On Track	#008539 (Charmed Green)	White
1.3 Shipped	#67A5B1 (Seaside)	White
1.4 Other Statuses	#67A5B1 (Seaside)	White
1.5 Review Needed	#F36D13 (Honey Teriyaki)	White

Table columns:

Column	Width %	Content
Ticket ID	18%	Real hs_ticket_id
Order Detail ID	15%	id_order_detail
Order ID	12%	id_order
Details	55%	Ticket subject / summary (use Paragraph flowable for wrapping)

• Alternating rows: white / #F0F0F0
• Grid: 0.5pt #CCCCCC
• Cell padding: 4pt

---

Section 2 — Manual Action Required

Section heading: "Section 2 — Manual Action Required" (16pt Bold, Theme Black)

Flyeralarm

• Subsection heading: "Flyeralarm (N orders)" — 13pt Bold
• Instruction text (italic, 9pt): "These orders must be handled via the Flyeralarm supplier portal (case creation). Do NOT send outreach emails."
• Table with #F0C225 (Ripe Mango) header background, white text
• Columns: Order Detail ID | Order ID | Supplier | Product | Target Dispatch

Probo

• Subsection heading: "Probo (N orders)" — 13pt Bold
• Instruction text (italic, 9pt): "Verify actual production status in the Probo portal. Probo delay emails received for some orders — follow up for new dispatch date."
• Table with #F0C225 (Ripe Mango) header background, white text
• Columns: Order Detail ID | Order ID | Product | Target Dispatch | Delay Email? (Yes/No — whether a Probo delay email was found in HubSpot)

Masterprint

• Subsection heading: "Masterprint (N orders)" — 13pt Bold
• Text only (italic, 9pt): "Masterprint tracking is automated. No outreach needed."

---

Section 3 — Supplier Outreach Emails

Section heading: "Section 3 — Supplier Outreach Emails" (16pt Bold, Theme Black) Subtitle: "N orders across M suppliers require outreach." (9pt Regular, #666666)

Per-supplier block:

1. Divider: HRFlowable, 1pt, #008539 (Charmed Green)
2. Supplier heading: "Supplier Name — N order(s)" (13pt Bold, Theme Black)
3. Email opening: "Hi Partner," (9pt Regular)
4. Email body: Template text (9pt Regular)
5. Order table:
   • Header: #022B07 (Theme Black) background, white text, 8pt Bold
   • Columns and widths:

Column	Width %	Content	Format
Order	20%	{id_order}-{id_order_detail}	e.g. "5831128-9215018"
Target Dispatch Date	15%	Agreed dispatch date	DD Mon YYYY
Product	25%	Product type/SKU	As from API
Supplier Order	15%	Supplier's order number	Value or "-"
Carrier	25%	Intended carrier	As from API

6. Email closing: "Please could you provide..." + "Thank you..." (9pt Regular)
7. Spacer: 12pt before next supplier

Important implementation notes:

• Do NOT wrap supplier email blocks in a single-cell Table — use individual Paragraph + Table + Spacer flowables so reportlab can split across page breaks
• Use KeepTogether only for supplier blocks with ≤5 orders
• Alternating rows: white / #F0F0F0
• Grid: 0.5pt #CCCCCC

---

Inter Font Download

To use Inter, download from Google Fonts before generating:

import urllib.request, os

FONT_DIR = '/tmp/fonts'
os.makedirs(FONT_DIR, exist_ok=True)

INTER_REGULAR = f'{FONT_DIR}/Inter-Regular.ttf'
INTER_BOLD = f'{FONT_DIR}/Inter-Bold.ttf'

if not os.path.exists(INTER_REGULAR):
    urllib.request.urlretrieve(
        'https://github.com/google/fonts/raw/main/ofl/inter/Inter%5Bopsz%2Cwght%5D.ttf',
        INTER_REGULAR
    )
# Note: Inter is a variable font. For reportlab, you may need the static builds:
# https://github.com/rsms/inter/releases — use Inter-Regular.ttf and Inter-Bold.ttf

If the download fails (network restrictions), fall back to Helvetica silently.