fix(signal): licence email — key out of the inbox preview + Ledger brand re-skin with the 4-sun - #490
Merged
Merged
Conversation
…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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
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>withmax-widthandmargin. 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: lightrather 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.jpgand referenced by absolute URL because Gmail stripsdata: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 thatlicenses@4da.aiactually forwards.Chrome lives in
site/lib/email-shell.jsso 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:
max-widthon<body>color-schemedeclaredalt="", fixed dimensions, and never adata:URI<td>Rendered from the actual payload
deliverLicenseEmailposts 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