This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Collateral

Artefacts that leave the product — cards, signatures, and social imagery.

Collateral is where the brand travels without its context. These artefacts are often seen once, at small size, next to other companies’ material — so they lean harder on the mark and the wordmark than in-product surfaces do.

1 - Business card

The digital-first vCard, shared by QR code or link.

The primary format is digital — a vCard shared via QR code or direct link, not a printed card.

Digital vCard
projectious · work
Bernhard Gerlach
Cloud · Agile · Agentic AI
info@projectious.work
projectious.work

Layout

  • Midnight surface, mark top-left, name in Plus Jakarta Sans 700.
  • Role in Source Sans 3 400, in slate-dark-11.
  • Contact rows in IBM Plex Mono at 11px — addresses and handles are data, and monospace makes them scannable and unambiguous.
  • projectious.work always present.
  • Accent used once, on the QR frame or the primary contact method.

If a printed card is required:

  • 85×55mm, matte stock.
  • Single-colour midnight on uncoated white, or reversed white on midnight.
  • Use the monochrome mark — no accent on press unless a spot colour is budgeted.
  • Respect the 1× clear-space rule; do not bleed the mark to the trim edge.

2 - Email signature

A compact signature that survives every mail client.

The signature is built to work in clients with hostile CSS support — Outlook included. The source is brand/email/signature.html.

Signature — one-line lockup, four lines maximum
projectious · work
Bernhard Gerlach
Cloud · Agile · Agentic AI
projectious.work

Construction rules

  • Table-based layout. Flexbox and grid do not survive Outlook.
  • Inline styles only. Most clients strip <style> blocks.
  • Web-safe font fallbacks. Brand fonts will not load in most clients — the stack must degrade to a system sans without breaking the layout.
  • The mark is a hosted PNG, not an SVG and not a data URI. Include alt text; many clients block images by default.
  • No background images. Use a solid bgcolor attribute.

Content

One line each: name, role, projectious.work, and a single contact method. The one-line lockup is used here — the signature is a horizontal context.

Do

Test in Outlook, Gmail web, and Apple Mail before shipping a change. Keep the signature under four lines.

Don't

Add social icon rows, legal disclaimers, quotations, or “please consider the environment” footers.

3 - Social and OG images

Templates for LinkedIn, GitHub, blog headers, and Open Graph cards.

Priority

LinkedIn and GitHub first, blog second, Twitter/X as backup. The templates are sized for those surfaces in that order.

Template rules

  • Backgrounds are midnight or midnight-dark, or white with an accent top bar.
  • projectious.work is always visible.
  • Never place text over a busy background.
  • An accent glow circle at subtle opacity provides visual interest without competing with the text.
  • Typography hierarchy is unchanged: Plus Jakarta Sans for headlines, Source Sans 3 for body.
Open Graph card — 1200x630
Bad software is a decision,
not a constraint.
projectious.work · Cloud · Agile · Agentic AI

Open Graph

  • 1200×630px.
  • Headline at Display weight, capped at roughly 60 characters — longer headlines are truncated by most platforms anyway.
  • The mark sits bottom-left or top-left, never centred.
  • Test the rendering at 320px wide: most impressions are in a mobile timeline.
Do

Keep one message per card. Check contrast against the actual background, not the design canvas.

Don't

Fill the card with a screenshot, use more than one accent element, or rely on text smaller than 24px at 1200×630.