SavrPass

Pubmat template system

14 reusable social templates in one brand system, including photo backgrounds, two-row splits and a company-avatar persona. Every template works at 7 sizes, in light and dark, and exports to PNG or PDF. Change the brand once in config/brand.css and every template follows.

CobaltNavySignal redWhiteIceCoralSky

Two-column

01 · Two-column grid

Problem/solution, feature vs benefit, before/after, product promo, statistic callout, event or tip — any message that pairs words with one visual.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Layout: 55 / 45, 60 / 40, Stacked · Visual: Full-bleed image, Accent panel + stat · Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/two-column-grid.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/two-column-grid.html 1080x1350

Image overlay

02 · Image-background text overlay

Merchant spotlights, lifestyle moments, testimonials with a photo, launch hero posts — when a real photo should do the talking.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: dark)
Options
Text position: Lower-left, Centered, Top, Floating card
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/image-overlay.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/image-overlay.html 1080x1350

Announcement

03 · Announcement

Launches, new features, new partner merchants, service updates.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Layout: With screenshot, Text only · Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/announcement.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/announcement.html 1080x1350

Event

04 · Event invitation

Onboarding days, partner meetups, pop-up booths, community events.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: dark)
Options
Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/event-invitation.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/event-invitation.html 1080x1350

Quote

05 · Quote or testimonial

Real partner testimonials, founder quotes, customer reviews (with permission).

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/quote-testimonial.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/quote-testimonial.html 1080x1350

Statistic

06 · Statistic or data callout

One striking number from a credible source, your own platform data, or a milestone.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: dark)
Options
Layout: Number + bar, Number only · Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/statistic-callout.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/statistic-callout.html 1080x1350

Product

07 · Product promo

Showing the product itself: features, pricing, what the merchant gets.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Visual: Built-in phone mock, Your screenshot · Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/product-promo.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/product-promo.html 1080x1350

Webinar · Event

08 · Webinar or live session

Facebook Lives, webinars, Q&A sessions, workshops.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: dark)
Options
Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/webinar-live.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/webinar-live.html 1080x1350

Hiring

09 · Hiring / recruitment

Job openings, internships, partner/reseller recruitment.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/hiring-recruitment.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/hiring-recruitment.html 1080x1350

Educational · Carousel

10 · Educational tip / carousel cover

Plain-language tech explainers, tips, myth-busting — the cover slide and the inside slides of a carousel.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Slide: Carousel cover, Inside slide · Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/educational-tip.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/educational-tip.html 1080x1350

Sale

11 · Sale, discount or limited-time offer

Founding-partner offers, promos, limited slots, seasonal deals.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/sale-discount.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/sale-discount.html 1080x1350

Educational · Carousel

12 · Checklist or how-to

Setup checklists, step-by-step guides, "before you…" lists — highly saveable posts.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/checklist-howto.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/checklist-howto.html 1080x1350

Split · Image overlay

13 · Horizontal split (two rows)

Question hooks over a photo, tips, before/after, merchant spotlights — when the photo needs to stay clean with no text on it.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Layout: Text top · photo bottom, Photo top · text bottom, Photo top · overlapping card · Text share: 50 / 50, 40 / 60, 60 / 40 · Text band: Plain, Cobalt band
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/split-horizontal.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/split-horizontal.html 1080x1350

Persona · Quote

14 · Persona post (company avatar)

Posts in your brand's own voice: friendly reminders, opinions, replies, tips and jokes delivered by the company avatar or future mascot.

Sizes
  • 1:1
  • 4:5
  • 9:16
  • X
  • LinkedIn
  • YouTube
  • Pin
Themes
Light ✓ · Dark ✓ (default: light)
Options
Layout: Social-post card, Avatar + speech bubble, Chat thread · Card media: Text only, With image · Background: Solid colour, Photo
Preview Download HTML
Export PDF / PNG
  1. Open Preview, pick size and theme in the toolbar, click Print / Save PDF. In Chrome set Margins: None and tick Background graphics.
  2. Or from the folder: node export/export-pdf.js templates/persona-post.html 1080x1350
  3. PNG at 1x and 2x: node export/export-png.js templates/persona-post.html 1080x1350
READMEEditing, previewing, exporting, adding templates DimensionsSizes, safe zones, text sizes, cropping Style guideType, spacing, colour, CTA and logo rules Trend referencesHow to turn references into original posts