01
Hierarchy first.
A reader looks at a signature for about a second. In that second they should see who you are, then what you do and for whom, then how to reach you. Set the name in a larger size or weight than anything else, the role and company in a quieter colour, and the contact lines smallest.
If two things are the same size and weight, the eye does not know where to start, and it starts nowhere.
02
Width: 320 pixels, and why.
Desktop reading panes are 600 pixels and wider, so a narrow signature costs nothing there. On a phone, width is the one constraint that binds. Gmail and Outlook on mobile scroll a wide signature sideways, and Apple Mail on the iPhone shrinks the entire message to fit it. 320 pixels fills the narrowest phone screen still in use exactly, which is why every design in the generator is that wide.
03
Fonts every reader already has.
No mail client loads a web font from a signature. A signature designed in a brand font will look right to its sender and arrive in Times or Arial for nearly everyone else, with different line lengths and different breaks.
So the generator offers ten fonts that are installed on almost every computer and phone, and each design is drawn to look right in them.
04
Colour, branding and dark mode.
Use your brand colour once or twice: on the name, a rule, the icons or a banner. A signature in five colours reads as a flyer.
Dark mode is where most signatures break. Some clients invert colours, some leave them, and a black logo on a transparent background vanishes on a dark grey. Give logos a solid background or a light outline, and check every signature in both modes. The builder previews light and dark side by side for this reason.
05
Animation, with restraint.
Motion draws the eye, which is the point and the danger. The rules the generator follows: one movement per design, on the photo, then a long rest; nothing that flashes; no sound; and the first frame is the finished picture, so a client that will not animate shows the signature complete.
Each of the 12 designs has its own motion, matched to its shape: a band of light, a wipe, a photo that assembles from three pills, an oval that opens.
06
Build it as a table, not a picture.
Email is not the web. Most clients ignore modern layout and strip style blocks, so signatures that work everywhere are built from nested tables with inline styles. It looks archaic in code, and it is the only thing Gmail, Outlook and Apple Mail all draw the same way. The generator writes that markup for you.