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.
This is the multi-page printable view of this section. Click here to print.
Collateral
Artefacts that leave the product — cards, signatures, and social imagery.
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.workalways present.- Accent used once, on the QR frame or the primary contact method.
Print fallback
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 signature that survives every mail client, carries the details business mail is required to carry, and stays quiet on a white message.
Email is not the web. Every value below is a literal, every layout is a table, and nothing depends on a stylesheet the client is free to discard.
Two forms are supplied:
| Form | Source | Use for |
|---|---|---|
| Full | brand/email/signature.html | First contact, and any message leaving the organisation — it carries the legally required details |
| Short | brand/email/signature-short.html | Replies and internal mail, where the full block repeated down a thread becomes noise |
The signature
Full form — a white message is the design constraint
Jane Doe Principal Consultant Projectious GmbH Musterstraße 1, 10115 Berlin, Germany Projectious GmbH · Registered seat Berlin Amtsgericht Charlottenburg, HRB 000000 · VAT ID DE000000000 Managing director: Jane Doe This message is intended only for the addressee and may contain confidential
information. If you received it in error, please tell the sender and delete it. |
Short form — replies and internal mail
Jane Doe Principal Consultant · Projectious GmbH |
Both specimens are rendered on white, because that is where a signature actually lives. The surrounding page has a colour mode; a mail message generally does not.
One rule, and it is vertical
A signature accumulates dividers as it accumulates fields — one under the name, another above the legal block, another before the disclaimer — and each reads as a section break in a message that is not sectioned. On a white background the result is a small form stapled to the bottom of a letter.
So there are no horizontal rules at all. One vertical accent rule runs down the left of the whole block: it marks the signature as a unit, ties it to the brand, and costs one line instead of four. Everything else is separated by space and by type size.
Do
Group the fields — identity, contact, address, legal — and separate the groups with about 9px of space. Let the type sizes do the ranking.
Don't
Add a rule between groups, a coloured band behind the name, social icon rows, a quotation, or a “please consider the environment” line.
Fields
Replace every [PLACEHOLDER]. Delete any row that does not apply — the block is
built so that removing a row leaves no gap behind it.
| Field | Required | Notes |
|---|---|---|
| Full name | Always | 15px, 700, midnight-9 |
| Job title | Always | Its own line — a title merged into the company line reads as part of the company |
| Company legal name | Always | The registered name, not the trading shorthand, wherever the legal block appears |
| Phone | Recommended | With country code; a signature is often read from another country |
| Email address | Always | Even though it is in the header — messages get forwarded |
| Website | Always | |
| Postal address | Regionally required | Street, postcode, city, country |
| Register details | Regionally required | Legal form, registered seat, register court and number, VAT ID, directors |
| Confidentiality notice | Optional | Two lines at most; delete it unless your organisation requires it |
What the law asks for
A starting point, not legal advice — confirm against your own jurisdiction before shipping a signature.
| Jurisdiction | Business email must carry |
|---|---|
| Germany | Legal form, registered seat, register court and number, and every managing director (§ 35a GmbHG, § 37a HGB) |
| EU / UK | Company registration number, registered office address, and VAT number where registered |
| United States | No statutory signature requirement; confidentiality notices are convention rather than law |
| Canada | CASL requires sender identification and a postal address on commercial messages |
| Australia | ACN or ABN on business correspondence |
Construction
| Rule | Why |
|---|---|
Table layout, role="presentation" | Flexbox and grid do not survive Outlook’s Word renderer; the role stops screen readers announcing a data table |
| Inline styles only | Most clients strip <style>, and none support custom properties — so no var(--pj-*) anywhere |
| Web-safe font stack | Brand faces will not load in a mail client; the stack degrades to a system sans without changing the layout |
| Maximum width 520px | Below the 600px that forces horizontal scrolling in narrow reading panes |
| Literal hex values | The brand steps, written out — see the table below |
| No images | A hosted logo is blocked by default in many clients and leaves a broken frame. The accent rule carries the brand with nothing to load |
| No background images | If a fill is ever needed, use the bgcolor attribute |
Dark mode will recolour this, and that is fine
Several clients — Outlook mobile and some webmail among them — invert or shift signature colours in dark mode, and none can be reliably prevented from doing so. The signature is therefore built to survive recolouring rather than to fight it: the hierarchy is carried by size and weight as much as by hue, so it still reads when the palette is altered.
Colours
Three families, which is what a signature should have.
| Role | Value | Use |
|---|---|---|
| Heading | #1d3352 | The name |
| Primary text | #142438 | Title, phone |
| Secondary | #546a82 | Company, address |
| Link | #3a5a82 | Email, website |
| Legal and notice | #546a82 | Register details, confidentiality notice |
| Accent | #E05232 | The vertical rule, and nothing else |
Before shipping a change
- Send to Outlook (Windows), Gmail web, Apple Mail, and one mobile client.
- Reply to that message twice and check how the signature looks quoted inside a thread.
- Turn on the client’s dark mode and confirm the hierarchy still reads.
- Forward it, to confirm nothing depends on the original message’s styles.
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.workis 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.
not a constraint.
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.