**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. :::warning Send yourself a test The preview on this screen is rendered by a browser. Outlook on Windows is not a browser: it renders mail with the Word engine. Use **Send test** before you publish anything you care about. ::: ## 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 `