Building a signature template. SigFinch

Tokens

A token is a name in double braces, like {{name}}. When a signature is rendered for a person, each token is replaced with their value. A token with no value simply renders as nothing, so an optional field never leaves a stray label or a gap — see conditionals below for dropping the whole row.

Values are escaped on the way in, so a name with an ampersand or a quote in it can't break the markup.

The person

Filled in by each staff member on their own signature page.

Token	What it is	Example
`{{name}}`	Full name	Alex Morgan
`{{first_name}}`	Given name only	Alex
`{{last_name}}`	Family name only	Morgan
`{{job_title}}` optional	Role title	Head of Strategy
`{{department}}` optional	Team or department	Strategy
`{{email}}`	Work email address. Set by an administrator, never by the employee.	[email protected]
`{{pronouns}}` optional	Preferred pronouns	they/them

Phone and links

Use the _e164 variants inside a tel: href. They strip spaces and punctuation so the number is dialable.

Token	What it is	Example
`{{phone}}` optional	Landline, formatted for display	03 9123 4567
`{{phone_e164}}` optional	Landline for use in href="tel:{{phone_e164}}"	+61391234567
`{{mobile}}` optional	Mobile, formatted for display	0412 345 678
`{{mobile_e164}}` optional	Mobile for use in href="tel:{{mobile_e164}}"	+61412345678
`{{scheduling_link}}` optional	Booking page URL	https://cal.com/example
`{{scheduling_label}}`	Link text for the booking link	Book a meeting
`{{card_url}}`	The person's digital business card page. Always current: it renders from the same details as the signature.	https://sigfinch.com/card/abc123

Profile photo

Circle-cropped server-side, because Outlook on Windows ignores border-radius. Point src at the 2x variant and set width/height to the display size.

Token	What it is	Example
`{{avatar}}` optional	Photo URL at display size	—
`{{avatar_2x}}` optional	Photo URL at twice display size, for retina screens	—

Brand

Controlled centrally under Brand settings, so every signature stays consistent.

Token	What it is	Example
`{{org.name}}`	Organisation name	—
`{{org.website}}` optional	Website URL	—
`{{org.address}}` optional	Postal or street address, on one line	12 Example Street, Melbourne VIC 3000
`{{org.strapline}}` optional	Short positioning line for the footer bar	Polystyrene customised for your needs.
`{{org.hours}}` optional	Trading hours, shown beside the strapline	Mon–Thu 7:30 am–4:30 pm
`{{org.logo}}` optional	Hosted logo URL	—
`{{org.logo_width}}` optional	Intended logo display width in pixels	—
`{{org.mark}}` optional	Square logo URL, for a tile or circle. Falls back to the wide logo	—
`{{org.primary_color}}`	Primary brand colour, for headings	—
`{{org.accent_color}}`	Accent colour, for links and rules	—
`{{org.text_color}}`	Body text colour	—
`{{org.muted_color}}`	Secondary text colour, for labels	—
`{{org.font_stack}}`	Body font stack. System fonts only. Mail clients strip web fonts.	—
`{{org.font_size}}`	Base font size including the unit	14px
`{{org.line_height}}`	Body line height. Pair it with mso-line-height-rule: exactly or Outlook ignores it.	20px
`{{org.row_spacing}}`	Vertical cell padding between contact rows	2px
`{{org.icon_row_padding}}`	Row padding for an icon cell, nudged so the icon sits on the same line as its text	5px 0 2px
`{{org.block_spacing}}`	Gap between blocks. Name, contacts, disclaimer	10px
`{{org.banner_spacing}}`	Gap above the campaign banner on its own. Falls back to block spacing	10px
`{{org.column_gap}}`	Gap between the logo or photo column and the details	22px
`{{org.outer_padding}}`	Padding around the whole signature	0px
`{{org.heading_font_stack}}`	Heading font stack. Falls back to the body font when none is set.	—
`{{org.heading_font_size}}`	Heading size including the unit	18px
`{{org.heading_style_extra}}` optional	Case, weight and letter-spacing chosen for the name, as inline CSS. Empty unless set	—
`{{org.title_style_extra}}` optional	Case, weight and letter-spacing chosen for the job title, as inline CSS. Empty unless set	—
`{{org.disclaimer}}` optional	Legal disclaimer text	—

Campaign banners

These URLs are permanent. What they serve is decided by whichever campaign is active, which is how a banner changes inside signatures that were installed months ago. Always wrap a banner block in sd-if.

Token	What it is	Example
`{{banner.promo.image}}` optional	Banner image URL for the "promo" slot	—
`{{banner.promo.link}}` optional	Click-through URL for the "promo" slot	—
`{{banner.promo.width}}` optional	Configured display width of the slot	—

Social links

A network that has not been set is absent entirely, so each link must be wrapped in sd-if to avoid a lint error.

Token	What it is	Example
`{{social.linkedin}}` optional	LinkedIn URL	—
`{{social.instagram}}` optional	Instagram URL	—
`{{social.facebook}}` optional	Facebook URL	—
`{{social.twitter}}` optional	X / Twitter URL	—
`{{social.youtube}}` optional	YouTube URL	—

Icons

Small PNG glyphs, tinted to the brand colour unless the organisation has uploaded its own. Always give the img an explicit width and height. Outlook ignores CSS sizing on images.

Token	What it is	Example
`{{icon.phone}}`	Handset glyph	—
`{{icon.mobile}}`	Mobile glyph	—
`{{icon.email}}`	Envelope glyph	—
`{{icon.website}}`	Globe glyph	—
`{{icon.address}}`	Map pin glyph	—
`{{icon.linkedin}}`	LinkedIn mark	—
`{{icon.facebook}}`	Facebook mark	—
`{{icon.instagram}}`	Instagram mark	—
`{{icon.twitter}}`	X / Twitter mark	—
`{{icon.youtube}}`	YouTube mark	—

Conditionals: dropping a row when it's empty

An empty token renders as nothing, but its surrounding markup — a table row, a separator, a label — is still there, which can leave a gap or a stray bullet. Two attributes fix that by removing the element entirely.

sd-if="field" — keep this element only if field has a value.
sd-if="!field" — keep it only if field is empty (a fallback).
sd-unless="field" — the same as sd-if="!field", read the other way.

The attribute is stripped from the final HTML either way; it only decides whether the element survives. A condition can name any token above, including a config.* toggle.

<!-- The job title row disappears if the person has no job title -->
<tr sd-if="job_title">
  <td>{{job_title}}<span sd-if="department"> · {{department}}</span></td>
</tr>

<!-- Show the photo, or a coloured initial if there's no photo set -->
<td sd-if="avatar"><img src="{{avatar}}" width="64" height="64" alt=""></td>
<td sd-unless="avatar" style="background:{{org.accent_color}}">{{first_name}}</td>

The email-safe rules

Mail clients are not browsers. A template that ignores this looks right in the editor and falls apart in an inbox, so the renderer expects, and the gallery templates all follow, a few rules:

Tables for layout, not flexbox or grid. Outlook on Windows renders through Word, which ignores both.
Inline styles only. A <style> block is stripped by Gmail and others.
No web fonts. Use the font tokens, which resolve to fonts already on the machine.
Spacing as cell padding. Margins on table cells are dropped by Word.
Explicit image width and height, and round crops baked into the file — border-radius is ignored in Outlook.

Every gallery template is built to these rules, so the fastest way to start a custom one is to take a copy of the closest gallery layout and edit from there.

Ready to build one?

Custom templates live in the design section of your workspace, alongside the gallery.

Start free