Mail design

Email -> Design in your admin dashboard.

Templates decide what your mail says. This screen decides what it looks like: the logo, the colours, the spacing, the columns, the buttons and the footer. The two are kept apart on purpose, so you write the copy once and it appears in whatever frame you designed, in all four languages.

Layouts

A layout is one design. You can have as many as you like.

• One of them is your default. Every mail uses it unless something points somewhere else.
• Any transactional email can be pointed at a different layout, on the Templates screen. Payout mail in one frame, the welcome mail in another.
• Any campaign template can name its own layout too, so a promo can be wider and louder than your everyday mail.

A new layout starts from one of five starters. The dialog draws each of them in your own colour, logo and name, so you pick from what your mail will look like:

Starter	What it looks like
Letter	White paper, your logo top left, a large heading, your colour on the button. What a new firm starts with
Brand band	Your logo on a band of your colour, joined to a white card on a light grey page
Dark	A dark card on a near black page, with the colour you picked for dark mode
Plain	Reads like a personal mail: no heading, no box, the button as a link with an arrow
Receipt	Your logo and the date on top, the summary of the message in a grey box, a button across the card

All five carry a summary block and a footer with your name, address and legal pages. Letter and Receipt are set in Inter, Brand band in Host Grotesk and Dark in Geist, where the mail app can load them. Plain stays on the system font. Layouts you made before keep their own look. A starter is copied into a new layout, so changing the starters later never changes a layout you already have.

Blocks

A layout is a stack of rows. Each row holds one to four columns, and each column holds blocks:

Block	What it is
Body copy	Where the text from Templates lands. Required, exactly once
Logo	Your uploaded logo, with your name as text if you have not uploaded one
Text	Rich text with its own size, colour, weight and letter spacing
Image	Any image, full width or fixed, optionally a link
Button	A button you write yourself
Template button	The button that comes from the template, hidden when the template has none
Summary	The facts the message brings along, as label and value, hidden when none
Footer	Your name, address, legal pages and copyright, from your settings
Divider	A rule, with thickness, width, style and spacing
Spacer	Vertical space
Social links	Up to eight links to your channels
Preview text	The hidden line the inbox shows next to the subject
HTML	Your own markup, for anything the blocks do not cover

Some blocks have more to them than their row in the table:

• Logo shows the logo you uploaded for a dark background, the one for a light background, or picks between them from what the block stands on (Auto). With a height set, a square mark and a wide logo stand equally tall, and the width becomes the limit.
• Text takes a weight from 400 to 700. Left on Standard, the bold switch decides, as before.
• Button and Template button are filled, outlined or a plain link in your colour, and carry their own space above, which disappears with the button when a message has none.
• Summary shows what a message is about: the amount, account and method of a payout, the account, challenge and phase of a passed or failed challenge, the subject and reference of a ticket, the role of a team invite, the commission of an affiliate sale, a claim or discount code. Side by side or stacked, with a line between the rows or in a box. A message without any of these leaves the block out, space and all.
• Footer shows your name, the support address from your settings, links to your terms and privacy pages and a copyright line, each of which you can switch off. In campaign mail the unsubscribe link joins the legal links.

Per row you set the background, padding on all four sides, border, corner radius and the gap between columns. A rounded row can round only its top or its bottom corners, so a band of colour and the card under it share one outline. Columns can be weighted, so a 1 and a 2 makes a narrow column beside one twice its width. Rows can be moved up and down or duplicated; duplicating leaves out the blocks that are only allowed once, like the body copy.

The screen is laid out as three panes: the structure of the layout on the left, the live preview in the middle, and the settings for whatever you have selected on the right. Click a row or a block in the structure and its settings appear on the right, so the preview stays visible while you edit.

Width and page

The layout settings decide how wide the mail is drawn.

• Content width: Fixed is the classic mail column. You give it a number of pixels, between 480 and 800, and it sits centred with the page colour either side of it. This is what a newsletter wants.
• Content width: Full width gives up the column. The mail takes the whole width of whatever it is read in, and the page padding on the sides is the only margin it has. This is what a receipt or a notification usually wants, and what people mean when they say the mail should not look like a leaflet.

Page padding top, bottom and sides applies either way, so a full width mail still keeps its distance from the edges. Columns in a full width row are divided by their weights as percentages instead of pixels, and still stack under each other on a phone.

Draft and published

Saving does not change what your traders receive. Sending only ever uses the published version, so you can leave a layout half finished without a live payout mail picking it up.

Changes are counted in the bar at the bottom of the screen, which saves them as the draft (or Cmd+S, Ctrl+S on Windows) and asks before you leave with changes unsaved. Publish saves first and then makes the draft live. Once a saved draft differs from what is live, Back to published throws the draft away and returns to the published version, after asking, because that cannot be undone.

What email clients will and will not do

Email is not the web, and the editor is shaped by that rather than pretending otherwise.

• Corner radius disappears in Outlook on Windows. Your buttons and panels will have square corners there. Everything else about them is correct.
• Columns stack on narrow screens everywhere except Outlook, which keeps them side by side.
• Web fonts load in some apps, not all. Next to the system fonts, a layout can use Inter, Host Grotesk, Geist, DM Sans or Newsreader. Apple Mail and iOS Mail load them. Gmail and Outlook do not, and show the system font each one falls back to, so a mail reads well either way. Outlook on Windows is pinned to Arial or Georgia, because it would otherwise pick Times New Roman.
• Gmail cuts a mail off past 102 KB and hides everything after the cut. The editor shows the size and warns you as you approach it.
• Images are blocked by default in Outlook. Always fill in the alt text, and do not put anything essential in an image alone.
• Logos uploaded under Branding are stored as WebP, which does not render in Outlook. A PNG copy is made automatically for your mail, so you do not have to think about it.

HTML mode

If you have a mail design from an agency, switch the editor to HTML and paste it in. Two rules:

• It must contain {{content}} where the body copy goes.
• Your CSS is inlined when you publish, and your <style> block is kept as well so media queries still work.

These tokens are filled in per message: {{content}}, {{subject}}, {{cta_label}}, {{cta_url}}, {{brand_name}}, {{logo_url}} (your logo for a dark background), {{logo_light_url}} (for a light one), {{platform_url}}, {{unsubscribe_url}}, {{address}}, {{terms_url}}, {{privacy_url}}, {{accent}}, {{date}} and {{year}}.

Your colour

Every colour field in the visual editor has a palette button that puts your brand colour from Branding in its place instead of a fixed hex. The layout then follows Branding: change your colour, publish again, and every place that uses it changes along.

• {{accent}} is your colour. A light layout takes the colour you set for light mode, a dark layout the one for dark mode.
• {{on_accent}} is text that reads on your colour: your own text colour from Branding when it does, otherwise black or white. A yellow button gets dark text.
• {{accent_text}} is your colour as text on the page, darkened or lightened until it reads, the way links are in your dashboard.
• {{ink}} is the text colour you set for your colour in Branding, as it is.

A firm that has not set a colour gets its mail in black, the same as its dashboard.

Unsubscribe

Campaign mail must carry a visible unsubscribe link. A layout with a footer block puts it in the footer, beside your legal links. A layout without one gets the link added at the bottom of every campaign. Transactional mail does not get one, because there is nothing to unsubscribe from.

Mail without a layout

A firm that unpublished or deleted every layout still sends mail, in a fixed design drawn like the Letter starter: your logo and colour, the summary of the message and the same footer. So does the mail that never had a layout, like trading alerts and the activity log backup.

In the older designs

Propper - OG and Tactical keep the earlier editor: the layouts as cards, a Save draft button in the head of the editor instead of the bar at the bottom, and Discard draft, which goes back to what is live without asking first. New layouts start from the same five starters, picked by name rather than from a drawing. The summary and footer blocks can be added and set there too. The logo's choice and height, a text weight, the button style, a row's rounded corners and the palette button are only in the new editor, and a layout that uses them keeps them when it is edited in the older one.