Generator
Describe the email you need. The generator returns a structured email rendered with the components below — same tokens, same patterns, no off-system output. The example below shows the output for an invitation prompt.
You've been invited
jonathan@acme.com has invited you to join Acme, Inc.
Join TeamAlready created an account? Sign in to LinkSquares.
Email System
The LinkSquares email system. Password resets, receipts, invitations, and status notifications, shipped on-brand without a designer in the loop.
Three layers: foundations (color, type, spacing tokens) set the visual baseline; components (header, headline, button, badges, boxes, footer) are the building blocks; templates compose those blocks into the canonical transactional emails. The brand tokens are pre-set to LinkSquares purple, orange, and the email-safe type stack, so anything generated from this system inherits the brand automatically.
This documentation is the source of truth. Product managers and engineers compose templates from components rather than from old emails, and use the AI generator (a separate surface) when they need new copy. Designers extend the system rather than ship one-offs.
For the full case study (including the architecture argument and the strategic call to ship this in code rather than Figma), see the Email Design System case study.
Tone & voice
Transactional email is a contract. The user did something — signed up, asked for a reset, made a purchase — and we are confirming it back. The tone should match: short, helpful, unambiguous.
Principles
Clear & direct
Lead with what the user needs. Avoid throat-clearing openers. The headline should say what the email is, not greet the reader.
Helpful, not chatty
Explain what happened and what to do next. No filler, no marketing voice in transactional surfaces.
Active voice
"We've sent your code" — not "Your code has been sent." Active voice is shorter and clearer.
User-focused
Write from the user's perspective. "Your password has been reset," not "We have reset the user's password."
Reset your password by clicking below. The link expires in 30 minutes.
Hi there! 👋 We hope you're having an awesome day! We just wanted to reach out about that password reset request you submitted...
Subject lines
The subject line is the only part of the email seen before it's opened. Keep it under 50 characters, lead with the noun, and skip the brand name — the sender field already carries that.
| Pattern | Example |
|---|---|
| Reset your password | Reset your password |
| You've been invited | You've been invited to Acme |
| Your code is N | Your code is 482910 |
| {Action} confirmed | Payment confirmed |
| {Person} shared {N} {items} | Jonathan shared 3 documents |
"Reset your password" — 19 characters, plain noun phrase, scannable in any inbox.
"[Acme] Action required: please reset your password to maintain account security" — too long, redundant brand prefix, urgency theater.
Color
Color is intentionally restrained. LinkSquares orange is the primary CTA color — every transactional email has at most one orange button. Purple anchors brand presence in the wordmark and marketing chrome; blue is reserved for inline links. Everything else is a neutral or a semantic role.
Brand
Accent
Neutrals
Semantic
Typography
The system uses an email-safe system font stack. Email clients are inconsistent about web fonts; restricting to system stacks means the same email renders the same in Outlook, Gmail, and Apple Mail.
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
Scale
Spacing
A 4px base scale. Email clients collapse vertical margins inconsistently — components own their own internal spacing rather than rely on margin between siblings.
| Token | Value | Used for |
|---|---|---|
--space-2 | 8px | Tight pairings (badge padding, icon gap) |
--space-3 | 12px | Inline gaps, button vertical padding |
--space-4 | 16px | Paragraph spacing, list item gap |
--space-6 | 24px | Component vertical rhythm |
--space-8 | 32px | Email body horizontal padding |
Logo header
The LinkSquares wordmark sits at the top of every email so users can place the sender at a glance. Use the standard PNG so it renders consistently across email clients (SVG support in email is unreliable).
Headline goes here
Body copy continues from the headline.
Specs
| Asset | linksquares-logo.png (full wordmark, transparent background) |
| Dimensions | 160 × 29 px (rendered with explicit width / height attributes) |
| Bottom margin | 24 px (before headline) |
| Format | PNG · SVG support in email clients is inconsistent |
Use the canonical LinkSquares wordmark on every transactional email so users learn the visual signature.
Pair the wordmark with taglines, social icons, or marketing chrome in transactional email. The single mark is intentional.
Headline
One sentence. States what the email is. Renders directly under the logo header with no kicker, no greeting.
Reset your password
Your password reset link expires in 30 minutes.
| Size | 24 px |
| Line height | 1.5 (inherits container) |
| Weight | 600 |
| Color | #333333 |
| Bottom margin | 24 px (before body) |
Body text
Paragraphs of explanation. One thought per paragraph. Bold for the action or the salient noun, never for entire sentences.
You've been invited
Jonathan Davis has invited you to the Q4 Compliance workspace.
The invitation expires in 7 days.
Button
A single primary action per email. Renders as a fully rectangular padded link — most email clients strip background images and margin from <button> tags, so the system uses an anchor styled as a button.
Specs
| Padding | 10 px / 16 px |
| Radius | 8 px |
| Type | 16 / 1 · 500 |
| Background | --color-accent (LinkSquares orange · #FF8D59) |
| Foreground | #333333 (dark ink reads on the orange) |
One button per email. The button label restates the headline as a verb: "Reset password," "Accept invitation."
Stack multiple primary buttons. If the email needs more than one path, use a textual link as the secondary.
Status badge
A small pill that labels a status — Approved, Pending, Failed, In Review. Used inside cards, never as a standalone headline element.
List
Bullet or numbered lists for short enumerations — items shared, files attached, steps to take. Cap at 5 items; longer lists belong on a web page the email links to.
Your invitation
You now have access to:
- Q4 Compliance workspace
- Reporting templates
- Vendor agreement library
Status box
A bordered region for an informational, success, error, or alert message. Sits between the body and the button. Reuses the semantic color tokens.
Your file is processing
We'll send another email when it's ready.
Payment received
Receipt #04582 has been added to your account.
We couldn't upload these files:
- contract-2025.pdf
- service-agreement.docx
Your password expires in 7 days.
Card
A bordered block that represents a single object — a shared file, a workspace, a payment, an attachment. Cards stack with no margin between them and have a built-in border, so multiple cards in a row read as a list.
Jonathan shared 3 documents
All shared until December 31, 2026.
Footer
A single "Sent from LinkSquares" line beneath the message body, separated by a thin divider. Stays minimal — no marketing chrome, no preference links, no legal address.
Reset your password
You requested a password reset for your LinkSquares account. If this was you, click the button below to create a new password:
Reset PasswordIf you didn't request this change, you can safely ignore this email and your password will remain the same.
Invitation
Sent when a user is added to a workspace, project, or shared resource.
You've been invited
[INVITER_EMAIL] has invited you to join [ORGANIZATION_NAME].
Join TeamAlready created an account? Sign in to LinkSquares.
Password reset
Sent when a user requests a reset. The link is the entire content; no marketing, no upsell.
Reset your password
You requested a password reset for your LinkSquares account. If this was you, click the button below to create a new password:
Reset PasswordIf you didn't request this change, you can safely ignore this email and your password will remain the same.
Status notification
Sent when a long-running job finishes (file uploads, exports, batch processing). Uses status boxes (error + success) to surface what happened and what needs attention.
Some of your files failed to upload
We couldn't upload these files:
- contract-2025.pdf
- service-agreement.docx
These files were uploaded:
- vendor-terms.pdf
- license-agreement.docx
Please try uploading your failed files again.
Need help? Contact our support team at support@linksquares.com.
Sharing
Sent when a user shares an internal resource. Lists the items shared so the recipient knows what they're getting before clicking through.
Jonathan Davis shared documents
Jonathan Davis (jdavis@linksquares.com) has shared 5 documents with you.
Ashlyn - These are the draft agreements for the Johnson account. Could you review by EOD Thursday?
Shared Documents (5):