Certificate with Vector Seal

const gold = "#A9843B";
const ink = "#22303F";

const template = doc({ size: { width: 842, height: 595 }, title: "{{title}} — {{recipientName}}", padding: [34, 44, 34, 44] },

  // Decorative double border, drawn with vector() and pinned to the page
  col({ position: "absolute", top: 24, left: 24, width: 794, height: 547 },
    vector(
      { width: 794, height: 547, alt: "Decorative double border framing the certificate: a thick outer gold rectangle with a thin inner gold rectangle inset inside it." },
      rect({ x: 1.5, y: 1.5, w: 791, h: 544, fill: "none", stroke: "#A9843B", "stroke-width": 2.4 }),
      rect({ x: 11, y: 11, w: 772, h: 524, fill: "none", stroke: "#A9843B", "stroke-width": 0.7 }),
    ),
  ),

  // Awarding body
  r({ align: "center", margin: [6, 0, 0, 0] },
    s({ "font-size": 10, "font-weight": "bold", color: ink, "letter-spacing": 2 }, "{{awardingBody}}"),
  ),

  // Title
  r({ align: "center", margin: [10, 0, 0, 0] },
    s({ "font-size": 27, "font-weight": "bold", color: ink }, "{{title}}"),
  ),

  // Presentation line
  r({ align: "center", margin: [6, 0, 0, 0] },
    s({ "font-size": 9, color: "#6B6250", "font-style": "italic" }, "This is to certify that"),
  ),

  // Recipient
  r({ align: "center", margin: [10, 0, 0, 0] },
    s({ "font-size": 24, "font-weight": "bold", color: "#0F172A" }, "{{recipientName}}"),
  ),

  // Divider
  r({ align: "center", margin: [6, 0, 0, 0] },
    col({ width: 180, height: 1, "background-color": gold }),
  ),

  // Course / award
  r({ align: "center", margin: [8, 0, 0, 0] },
    s({ "font-size": 13, "font-weight": "bold", color: ink }, "{{programName}}"),
  ),
  r({ align: "center", margin: [3, 0, 0, 0] },
    s({ "font-size": 9.5, color: "#3F382A" }, "{{awardLine}}"),
  ),
  r({ align: "center", margin: [6, 0, 0, 0] },
    s({ "font-size": 9, color: "#6B6250" }, "Awarded {{date}} · {{presentationLocation}}"),
  ),

  // Signature lines, left and right, with the seal centred beneath them
  r({ margin: [64, 0, 0, 0] },
    col("30%", { align: "center" },
      each("sig in signatories",
        when("@first",
          col({ width: 190, height: 0.8, "background-color": ink, margin: [0, 0, 4, 0] }),
          s({ "font-size": 10, "font-weight": "bold", color: ink }, "{{sig.name}}"),
          s({ "font-size": 8.5, "font-style": "italic", color: "#6B6250" }, "{{sig.title}}"),
        ),
      ),
    ),
    col("40%", s(" ")),
    col("30%", { align: "center" },
      each("sig in signatories",
        when("@last",
          col({ width: 190, height: 0.8, "background-color": ink, margin: [0, 0, 4, 0] }),
          s({ "font-size": 10, "font-weight": "bold", color: ink }, "{{sig.name}}"),
          s({ "font-size": 8.5, "font-style": "italic", color: "#6B6250" }, "{{sig.title}}"),
        ),
      ),
    ),
  ),

  // Circular seal, drawn with vector() and centred beneath the signature lines.
  // Kept in normal flow (not position: absolute) so it is tagged as a /Figure
  // carrying its alt text; absolute overlays are rendered as artifacts.
  r({ margin: [4, 0, 0, 0] },
    col("100%", { align: "center" },
      vector(
        { width: 130, height: 130, alt: "Circular gold seal: twin concentric outer rings, a dotted inner ring, a five-pointed star at the centre, and the inscription OFFICIAL SEAL above EST. 1947." },
        circle({ cx: 65, cy: 65, r: 62, fill: "none", stroke: "#A9843B", "stroke-width": 2 }),
        circle({ cx: 65, cy: 65, r: 57, fill: "none", stroke: "#A9843B", "stroke-width": 0.7 }),
        circle({ cx: 65, cy: 65, r: 48, fill: "none", stroke: "#A9843B", "stroke-width": 1.6, "stroke-dasharray": "1.5 3" }),
        polygon({ points: "65,46 69.5,58.9 83.1,59.1 72.2,67.4 76.2,80.4 65,72.6 53.8,80.4 57.8,67.4 46.9,59.1 60.5,58.9", fill: "#A9843B" }),
        svgText({ x: 65, y: 33, "font-size": 7.5, "font-weight": "bold", fill: "#8A6A2F", "text-anchor": "middle", "letter-spacing": 1 }, "OFFICIAL SEAL"),
        svgText({ x: 65, y: 106, "font-size": 7.5, "font-weight": "bold", fill: "#8A6A2F", "text-anchor": "middle", "letter-spacing": 1 }, "EST. 1947"),
      ),
    ),
  ),

  ftrPages("Credential {{credentialId}}"),
);

const sampleData = {
  title: "Certificate of Completion",
  recipientName: "Amara Osei-Bernstein",
  awardingBody: "The Cascadia Institute of Design Leadership",
  programName: "Advanced Practice in Systems Design",
  awardLine: "for completing the 2026 cohort with distinction, demonstrating sustained excellence across research, craft and collaborative practice.",
  date: "18 September 2026",
  presentationLocation: "Seattle, Washington",
  credentialId: "CID-2026-AD-00417",
  signatories: [
    { name: "Ingrid Halvorsen", title: "Dean of Faculty" },
    { name: "Marcus R. Chen", title: "Programme Director" },
  ],
};

{
  "title": "Certificate of Completion",
  "recipientName": "Amara Osei-Bernstein",
  "awardingBody": "The Cascadia Institute of Design Leadership",
  "programName": "Advanced Practice in Systems Design",
  "awardLine": "for completing the 2026 cohort with distinction, demonstrating sustained excellence across research, craft and collaborative practice.",
  "date": "18 September 2026",
  "presentationLocation": "Seattle, Washington",
  "credentialId": "CID-2026-AD-00417",
  "signatories": [
    {
      "name": "Ingrid Halvorsen",
      "title": "Dean of Faculty"
    },
    {
      "name": "Marcus R. Chen",
      "title": "Programme Director"
    }
  ]
}

curl -X POST https://makespdf.com/api/v1/render \
  -H "Authorization: Bearer $MAKESPDF_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"templateId": "certificate-seal"}' \
  -o output.pdf