Thundernoise · Email Design System v1.0 — 13.05.26

An email that feels like the opening page of a technical journal — not a poetry book — printed on thick white paper, with one photo that breathes and a voice that never raises itself.

The system tasting itself. Every component, every token, every anti-pattern — rendered with the same primitives the emails are built on.

01 — Tokens

Colour, made visible.

Five tokens light, five dark, one red on reserve. No beige. No cream. No sand. The warm-paper background that made v12 read 2018 is not in this system.

Light mode
bg#FFFFFFPage background
ink#1A1A1ABody, primary eyebrow
display#000000Headline, CTA fill
mid#7A7A7AMuted, drifting, footer legal
hairline#E5E5E5The only line in the email
red (legacy)#C43737Archive sale only. Never welcome / cart / post.
Dark mode
bg#000000Page background
ink#F5F5F5Body, primary eyebrow
display#FFFFFFHeadline, CTA fill (inverted)
mid#9A9A9AMuted, drifting, footer legal
hairline#2A2A2AThe only line in the email
red (legacy)#C43737Identical in dark mode
Anti-tokens · forbidden
warm off-white#FAF7F6Forbidden — Klaviyo 2018 register
warm paper#F3F1EEForbidden — v12 used this
cream#F8F6F1Forbidden — code-box background
sand#FAF6F0Forbidden — wellness-coded
02 — Type specimen

Three families. One ladder.

Inter Tight for display, Inter for body, IBM Plex Mono for metadata. Loaded via Google Fonts CDN. Outlook desktop ignores webfonts and falls back to the stack — that's expected.

H1 Display
Inter Tight 500 · 40/44 · −0.2 tr · sentence
Welcome to the tribe.
Eyebrow primary
IBM Plex Mono 400 · 12 · +1.6 tr · UPPER
CHAPTER 01 — WELCOME
Eyebrow muted
IBM Plex Mono 400 · 12 · +1.6 tr · mid #7A7A7A
FIRST ORDER — ON US
Body
Inter 400 · 17/26 · 0 tr · sentence
We started this in a box. For the 6am training on a rainy Tuesday — not the mirror selfie. Built to outlast you. Better than yesterday.
Body — discount inline
Inter 400 · 15 · code in mono 500
10% off your first order with code WELCOME10 — holds for 7 days. After that it’s gone.
Date-stamp
IBM Plex Mono 400 · 10 · +1.2 tr · tnum
DAY 01 — 13.05.26
Mono caption
IBM Plex Mono 400 · 13 · +0.4 tr · sentence
Men →
Drifting note
Inter italic 400 · 14/22 · mid #7A7A7A
We don’t email much. When we do, it’s because there’s something worth saying.
Footer tagline
Inter Tight 500 · 18/22 · −0.1 tr · display #000
Built to outlast you.
Footer wordmark
IBM Plex Mono 400 · 11 · +1.4 tr · UPPER · mid
Thundernoise.
CTA button text
Inter Tight 600 · 14 · +0.6 tr · sentence · squared
Shop the drop
03 — Components

The kit — rendered as it would appear inside the 600px email column.

Each block uses the same paddings, tokens and fonts as the production email. Read left to right, then read the notes on the right.

04 — Alignment grid

The edge invisible.

Every block of text hangs from a single vertical line at x = 30px. Drop the dashed red line on top of the email and the eye sees what the rule means.

Eyebrow
CHAPTER 01 — WELCOME
H1
Welcome to the tribe.
Manifesto
We started this in a box. Built to outlast you.
Discount sentence
10% off — holds for 7 days.
CTA
Segment eyebrow
EXPLORE BY FIT
Drifting note
We don’t email much.
Footer tagline
Built to outlast you.
Footer wordmark
Thundernoise.

If every text block touches that dashed line, the email is right. If one block breaks the edge, the email collapses to v15 (fantasmal).

The two sanctioned exceptions: (1) the header date-stamp is RIGHT — the only asymmetry. (2) On mobile, the date-stamp drops to its own row but stays LEFT. Everything else, always LEFT.

05 — Photography matrix

One photo per email. Picked from the manifest.

All URLs from /public/emails/_references/thundernoise-assets.md (243 catalogued). Color natural. Serve via Shopify CDN with _1600x.jpg resize.

welcome-1 (gift)
Hero · 4:5 portrait
storm within hero
storm-within-editorial-hero.jpg
Brand-defining single-figure editorial portrait.
/t/18/assets/storm-within-editorial-hero_1600x.jpg
Confidence 10/10 · Pair with TWH look-men-01 + look-women-01 for segment block.
welcome-2 (story)
Hero · atelier / process
atelier rack
storm-within-editorial-rack.png
"How we make it" voice. Atelier shot, products on rack.
/t/18/assets/storm-within-editorial-rack.png (6.9MB — resize via _1200x.png)
Confidence 9/10 · The one place B&W treatment is sanctioned.
welcome-3 (drop)
Hero · campaign banner
virtus launch
virtus-editorial-1-launch.jpg
Purpose-built drop launch hero · black-on-black studio.
/files/virtus-editorial-1-launch.jpg (1536×2752)
Confidence 10/10 · Pair with 3-up product packshot grid.
welcome-4 (urgency)
Hero · militarised
TWH hero
train-with-honor-look-hero.jpg
Campaign lifestyle group · militarised, action-ready.
/t/18/assets/train-with-honor-look-hero.jpg (307KB wide)
Confidence 9/10. Use 16:9 framing.
cart-2 (reminder)
Hero · contemplative
storm 2
storm-within-editorial-2.jpg
Secondary editorial · contemplative weight.
/t/18/assets/storm-within-editorial-2.jpg (630KB)
Pair with the cart product’s packshot below.
cart-3 (final push)
Hero · gritty closer
pain tastes good
hero-pain-tastes-good.jpg
Gritty atmosphere · brand-signature.
/t/18/assets/hero-pain-tastes-good.jpg (400KB)
Tone matches "we tried" cart-3 messaging.
post-1 (care)
Hero · fabric close-up
hands detail
hpc-lb-hands-detail.png
Hands on fabric, intimate texture · post-purchase mentor tone.
/files/hpc-lb-hands-detail.png (1536×2752)
Confidence 10/10 for care guide.
winback-1 (Issue 01)
Hero · silhouette
mirror silhouette
hpc-lb-mirror-silhouette.jpg
Silhouette = "you, before" · contemplative.
/files/hpc-lb-mirror-silhouette.jpg (1856×2304)
Confidence 10/10 for winback day-60.
winback-2 (offer)
Hero · gritty
pain tastes good banner
paintastesgood-hero-banner.png
Refreshed 2026 banner · raw signature.
/files/paintastesgood-hero-banner.png (2752×1536)
Tone matches "we tried" winback messaging.
drop launch
Hero · campaign
hard pace banner
hardpaceclub-hero-banner.jpg
Cinematic mirror room · drop launch.
/files/hardpaceclub-hero-banner.jpg (2752×1536)
Or substitute the active campaign banner (Torchbearer, Virtus, Murph Day).
06 — Anti-patterns

Do not rebuild these.

Four mistakes we made on the way to v16. Drawn here so a future designer can’t accidentally rebuild them.

Bordered card around everything×
WELCOME
Welcome to Thundernoise.
Manifesto inside another box inside the email.
v15 wrapped the hero + manifesto + code inside a 1px black border. Two concentric rectangles. Pure 2010 newsletter pattern. Rule: never wrap the narrative in a card. Hairlines are enough.
Centred manifesto "tombstone"×

Welcome to Thundernoise.

We started this in a box.

Built to outlast you.

Better than yesterday.

Three short sentences stacked centred read as an epitaph. v15 did this. Rule: manifesto is ONE paragraph, LEFT. No <br> in copy.
124px discount numeral×
10%
OFF YOUR FIRST ORDER
v12 rendered “10%” at 124px centred. Banner energy. Rule: discounts live inline in body copy. Same size as the rest of the sentence. The discount earns attention from the truth, not the type.
Bordered code box (“Klaviyo 2010”)×
USE THE CODE BELOW
WELCOME10
Cream box. 1px border.
Cream box + 1px border around a code. Every Mailchimp template did this in 2010. Rule: the code is a <span> inside a sentence. Mono 500, ink #0A0A0A. No box.
DO NOT
48px pill (Lululemon) · 8px soft (Stripe)
Any CTA with rounded corners. The brand rule (v1.1) is sharp rectangles. Rule: border-radius: 0, VML arcsize="0%". Always.
06b — Glassmorphism

Allowed on web. Forbidden in email.

backdrop-filter: blur(...) and translucent surfaces are sanctioned for web components (landing pages, in-product UI, modals over imagery). Pair always with the brand's sharp border-radius: 0 corners — glass surface, architectural shape. Unsupported by every email client — Gmail, Apple Mail, Outlook all strip backdrop-filter and render rgba() as opaque. Do not attempt graceful degradation; it always looks broken.

Glass · sharp corners
A translucent surface over photography. Sharp corners. Web only.
Try on the site
If you forward this section to a designer: the visual above only renders in browsers that support backdrop-filter (Chrome, Safari, Edge, Firefox ≥ 103). In any email client it would render as opaque white over the photo, hiding everything. Use glass on landing pages, never in newsletters.
07 — Voice samples

Sanctioned · forbidden.

Headlines and copy lines we ship vs. headlines and copy lines we reject. Pulled from BRAND_BRIEF §4.4 and §8.

SÍ — sanctioned

Welcome to the tribe.
Built to outlast you.
Better than yesterday.
We started this in a box.
Let’s address the obvious.
Should we stop sending these?
24 hours left on welcome — after that the code’s gone.
No tricks. Just the thing you bought.
Pace — not speed.
The grid gets harder from here.

NO — forbidden

Hey warrior!
Unleash your beast.
Crush your fitness goals.
Don’t miss out!!! 🔥
We miss you! Come back!
HURRY! 24h left!
Transform your workout.
Your fitness journey starts here.
Hola, bienvenido a Thundernoise.
Esto no es una marca. Es una respuesta.
08 — Reference board

The corpus this system was built on.

Six real emails. Open each preview in its own window for the full render.

On — 2026 welcome

Structural primary

Open full
Bandit — welcome

Discount treatment primary

Open full
Satisfy — Running Thunder

Drop pattern · tonal reference

Open full
Satisfy × Oakley — 2025

Capsule / collab pattern

Open full
Tracksmith — 2026 Spring

Editorial article register

Open full
Thundernoise — welcome-1.v16

Canonical email · this system applied

Open full

More references in /public/emails/_references/: Carhartt WIP t-shirts, Tracksmith Eliot ND drop, Asics Energy (anti-reference for hierarchy), Scuffers (anti-reference for bordered code box). Also worth opening live: satisfyrunning.com, banditrunning.com, aldny.com.