Skip to content

fix(signal): licence email — key out of the inbox preview + Ledger brand re-skin with the 4-sun - #490

Merged
runyourempire merged 3 commits into
mainfrom
fix/licence-email-presentation
Aug 18, 2026
Merged

fix(signal): licence email — key out of the inbox preview + Ledger brand re-skin with the 4-sun#490
runyourempire merged 3 commits into
mainfrom
fix/licence-email-presentation

Conversation

@runyourempire

@runyourempire runyourempire commented Aug 18, 2026

Copy link
Copy Markdown
Collaborator

The licence email put the customer's key in the inbox preview

Seen in a real inbox. With no preheader, Gmail fills the preview line from the top of the body — so the message list, the phone lock screen and the desktop notification banner all displayed the raw base64 licence key:

Your 4DA Signal licence key Tier: signal · Valid until: 2027-08-18
4DA-eyJ0aWVyIjoic2lnbmFsIiwiZXhwaXJlc19hdCI6IjIwMjctMDgtMThUMDA6...

Unprofessional on a paid product, and a small privacy leak to anyone glancing at the screen. There is now a hidden preheader per context, and a test asserts it never contains the key and always precedes it.

Three more things wrong for a $99–299 confirmation

Layout. It styled <body> with max-width and margin. Outlook on Windows renders through Word, which ignores both — so the email arrived full-bleed and ragged for exactly the desktop business audience most likely to buy a developer tool. Rebuilt on nested presentation tables with explicit widths.

Dark mode. Gmail and Apple Mail auto-invert undeclared light emails, and the inversion is not colour-aware — it routinely turns a pale panel into near-black behind dark text. The key must stay legible, so the email declares color-scheme: light rather than gambling on each client's algorithm.

Button. A padded <a> collapses to bare underlined text in Word-rendered Outlook, which ignores padding on inline elements. The colour and padding now sit on a <td>, which renders everywhere. Outlook shows square corners — a far better failure than an invisible call to action.

Presentation — the Ledger design

Founder-picked from three rendered options. Receipt-grade and unmistakably 4DA: a 3px gold crown, a white header carrying the 4-sun beside the text wordmark, a gold spine on the licence-key panel, brand fonts (Inter / JetBrains Mono) at the head of the stacks with system fallbacks.

The sun is the white-tee sun-on-white cutout (luminance-keyed background removal from the merch work), shipped as site/email-sun.jpg and referenced by absolute URL because Gmail strips data: URIs. It is additive, never load-bearing: alt="" plus a fixed box means a client that blocks remote images shows a clean gap while the text wordmark still carries the brand — the same doctrine as before, now pinned by intent instead of by a blanket no-<img> rule. Also added a reply-to-a-human line, now that licenses@4da.ai actually forwards.

Chrome lives in site/lib/email-shell.js so the expired-licence email gets the same treatment and the next one cannot drift.

Verification

19 email tests (up from 13), plus the entitlement suite, passing. The new ones pin properties rather than markup, so a future restyle does not have to fight them:

  • preheader present, key-free, and positioned before the key
  • presentation tables, and no max-width on <body>
  • color-scheme declared
  • the sun mark is additive: text wordmark always present, hosted absolute URL, alt="", fixed dimensions, and never a data: URI
  • button colour on a <td>
  • renewal badged differently from a first purchase
  • a reply path present in both the HTML and plaintext parts

Rendered from the actual payload deliverLicenseEmail posts to Resend, not a hand-made approximation — purchase and renewal both browser-verified against the approved design.

🤖 Generated with Claude Code

https://claude.ai/code/session_01EnyENPW2GcG8GU7x1rJ8wN

runyourempire and others added 2 commits August 18, 2026 12:48
…eview

Seen in a real inbox. With no preheader, Gmail fills the preview line from
the top of the body -- so the message list, the phone lock screen and the
desktop notification banner all displayed the raw base64 LICENCE KEY:

    Your 4DA Signal licence key Tier: signal · Valid until: 2027-08-18
    4DA-eyJ0aWVyIjoic2lnbmFsIiwiZXhwaXJlc19hdCI6IjIwMjctMDgtMThUMDA6...

Unprofessional on a paid product, and a small privacy leak to anyone
glancing at the screen. There is now a hidden preheader per context, and a
test asserts it never contains the key and always precedes it.

Three more things were wrong for a $99-299 purchase confirmation:

LAYOUT. It styled <body> with max-width and margin. Outlook on Windows
renders through Word, which ignores both, so the email arrived full-bleed
and ragged for exactly the desktop business audience most likely to buy a
developer tool. Rebuilt on nested presentation tables with explicit widths.

DARK MODE. Gmail and Apple Mail auto-invert undeclared light emails, and
the inversion is not colour-aware -- it routinely turns a pale panel into
near-black behind dark text. The key MUST stay legible, so the email now
declares color-scheme: light rather than gambling on each client's
algorithm.

BUTTON. A padded <a> collapses to bare underlined text in Word-rendered
Outlook, which ignores padding on inline elements. The colour and padding
now sit on a <td>, which renders everywhere; Outlook shows square corners,
a far better failure than an invisible call to action.

Branding is a black header bar with the wordmark in brand gold, and it is
TEXT, not an image: most clients block remote images by default, so an
image-only header renders as an empty box on first open. Also added a
reply-to-a-human line, now that licenses@4da.ai actually forwards.

Chrome lives in site/lib/email-shell.js so the expired-licence email gets
the same treatment and the next one cannot drift.

18 email tests (up from 13), 174 script tests passing. The new ones pin
the properties rather than the markup: preheader present and key-free,
tables not a styled body, color-scheme declared, no <img>, button colour
on a td, renewal badged differently, and a reply path in both parts.
…4-sun mark

The shell was structurally right but visually generic: a plain dark bar and
text-only branding. Re-skinned to the approved Ledger design: 3px gold crown,
white header carrying the 4-sun beside the text wordmark, gold spine on the
key panel, brand fonts (Inter / JetBrains Mono) at the head of the stacks.

The sun is the white-tee sun-on-white cutout (luminance-keyed, so no black
box sits on the white header), shipped as site/email-sun.jpg and referenced
by absolute URL — Gmail strips data: URIs. It stays ADDITIVE: alt="" and a
fixed box, so with remote images blocked the email still reads as 4DA off
the text wordmark alone. The old no-<img> assertion pinned the letter of
that rule; it is replaced by a test pinning its intent.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EnyENPW2GcG8GU7x1rJ8wN
@runyourempire runyourempire changed the title fix(signal): the licence email put the customer's key in the inbox preview fix(signal): licence email — key out of the inbox preview + Ledger brand re-skin with the 4-sun Aug 18, 2026
@runyourempire
runyourempire enabled auto-merge (squash) August 18, 2026 07:19
@runyourempire
runyourempire merged commit 062a980 into main Aug 18, 2026
10 checks passed
@runyourempire
runyourempire deleted the fix/licence-email-presentation branch August 18, 2026 07:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant