Layout

How it's made

• One column, 520px at most, on white: 48px above (32px on a phone), the masthead, 40px, the blocks, 40px, a hairline, the small print, then one line of who sends it: Okami's signature (the mark in its black glass, okami in live ink text) at left, the company and its address at right, centred on each other.
• Okami's own emails wear an icon of what they're about, in a tile tinted by what it means: done (leaf), needs you (butter), urgent (a red wash), or grey. A studio's emails to its clients wear the studio instead: its logo, or its letter on its mix's first colour (ink on a pale one, white on a dark one), and its name. Every email ends with Okami's signature and the company's name and address: Okami sends them all.
• Google Sans Flex, linked from Google Fonts: Apple Mail, iOS Mail, Outlook for Mac and Thunderbird show it. Gmail and Outlook for Windows load no webfont and fall back to the system's sans; Outlook is held off Times.
• The DS's type, weights 300 to 500: headline 24/32 medium, tight; words 16/26 light in muted grey, facts in ink with 14px labels; small print 12/18; a code 36/40 medium, its digits even.
• Buttons are the DS's large button: 40px tall, 20px sides, 14px medium, 10px corners. Primary is ink, for the one action; secondary white in a hairline. Several choices (a rebooking's times) are all secondary, stacked, the way out a link under them; a rating's 1 to 5 sit side by side as 40px squares.
• Light only, as the app is: Apple Mail and Gmail's iPhone app keep it white. Should an app darken it anyway, it never touches an image: so an icon carries its tile in its image. Each preview's Gmail dark mode switch shows that worst case.
• Images are PNG on Okami's site, sized and described: the icons are Hugeicons drawn by scripts/email-icons.ts; an uploaded logo is WebP, which Outlook can't show, so it's served again as PNG at /api/logos/<id>/png.
• No new words for the layout: a headline is the email's subject or its first line, and the preview line one already in it.
• lintEmail checks every email here in every language: a whole document, images on https with width, height and alt, no SVG or WebP, links absolute, under Gmail's 100 KB.

Okami's own

To a studio's people: an icon on its tone, a headline, words, facts, a list, buttons, and the small print. emailDocument

A studio's, with its logo

To a client: the studio's logo and name; a rating's squares. emailDocument

A studio's, its letter

A studio with no logo: its letter on its mix's first colour (Meadow's), ink on a pale one; a code. emailDocument

A studio's, its letter on Ink

On a dark colour (Ink's) the letter is white; choices as stacked secondary buttons, the way out a link. emailDocument