Paperbase Docs

Theming

Apply your brand to Paperbase PDFs using the theme object.

The theme object lets you apply your brand to every rendered PDF — logo, colors, and typography — without touching the template HTML or CSS.

Pass it alongside your render request:

import { Paperbase } from "paperbase";
 
const paperbase = new Paperbase({ apiKey: process.env.PAPERBASE_API_KEY! });
 
const result = await paperbase.pdf.generate({
  input: { type: "markdown", content: "# Q3 Report\n\n..." },
  template: "report",
  theme: {
    logo_url: "https://cdn.example.com/logo.svg",
    primary_color: "#1a1a2e",
    accent_color: "#ff4e8c",
    body_font: "Inter",
    heading_font: "Playfair Display",
  },
});

Theme fields

logo_url

Type: string (URL) — optional

An absolute URL to your logo. The logo appears in the cover page header and (for the report template) in the page header of every subsequent page.

  • Accepted formats: SVG, PNG, JPEG
  • Recommended: SVG for sharpness, or PNG at ≥ 512 × 512 px
  • Must be publicly accessible at render time — Paperbase fetches it over HTTPS
  • Emits PB_LOGO_LOW_RESOLUTION if the rasterized logo is below 256 × 256 px
{ "logo_url": "https://cdn.example.com/logo.svg" }

primary_color

Type: string (hex) — optional

Used for headings, strong text, borders, and rule lines throughout the document.

Default: #1a1a1a (near-black).

{ "primary_color": "#1a1a2e" }

accent_color

Type: string (hex) — optional

Used for hyperlinks, callout borders, cover page highlights, and decorative rule elements.

Default: #4361ee (Paperbase blue).

{ "accent_color": "#ff4e8c" }

Note: If accent_color and background_color produce a contrast ratio below 4.5:1, Paperbase emits PB_COLOR_CONTRAST_LOW.


text_color

Type: string (hex) — optional

Body copy color. Default: #374151.

{ "text_color": "#374151" }

background_color

Type: string (hex) — optional

Page background color. Default: #ffffff.

{ "background_color": "#fafafa" }

body_font

Type: string — optional

Font used for paragraph text, list items, and table cells.

Supported values:

ValueTypeface
"Inter" (default)Inter Variable
"Source Code Pro"Source Code Pro Variable

Emits PB_FONT_FALLBACK if the value isn't in the supported list — the font falls back to Inter and rendering continues.


heading_font

Type: string — optional

Font used for h1h6 headings.

Supported values:

ValueTypeface
"Inter" (default)Inter Variable
"Playfair Display"Playfair Display Variable
"JetBrains Mono"JetBrains Mono Variable

letterhead

Type: string (HTML) — optional

Raw HTML injected into the top of every page (after the logo). Use for a postal address, legal disclaimer, or client reference line. Keep it brief — tall letterheads push content down.

{ "letterhead": "<p>Acme Corp · 123 Main St · San Francisco, CA</p>" }

Type: string (HTML) — optional

Raw HTML injected into the footer of every page. Page numbers are already rendered by the template — use this for copyright notices or confidentiality caveats.

{ "footer": "<p>Confidential — do not distribute</p>" }

Theme warnings

WarningTriggerFix
PB_THEME_INCOMPLETEPartial theme causes visible template gaps (e.g. accent_color set but primary_color absent)Supply both complementary fields together
PB_LOGO_LOW_RESOLUTIONLogo rasterizes below 256 × 256 pxUse SVG or PNG ≥ 512 × 512 px
PB_COLOR_CONTRAST_LOWaccent/background contrast ratio < 4.5:1Increase color contrast between accent and background
PB_FONT_FALLBACKUnsupported font nameUse a supported font name from the table above

Full theme example

{
  "logo_url": "https://cdn.example.com/logo.svg",
  "primary_color": "#1a1a2e",
  "accent_color": "#ff4e8c",
  "text_color": "#374151",
  "background_color": "#ffffff",
  "body_font": "Inter",
  "heading_font": "Playfair Display",
  "letterhead": "<p style='font-size:11px;color:#6b7280'>Acme Corp · 123 Main St · San Francisco, CA 94107</p>",
  "footer": "<p style='font-size:10px;color:#9ca3af'>Confidential — prepared for Acme Corp</p>"
}

Minimal theme example

Only accent color and logo — everything else uses defaults:

{
  "logo_url": "https://cdn.example.com/logo.svg",
  "accent_color": "#6366f1"
}

On this page