- Removed the traffic-light + URL window chrome at the top.
- Header row now has an eyebrow 'DEAL · DEAL-2026-0184' label, big
company name 'Stratech', then the Negotiation chip + primary
contact line. Right side: 3 stat tiles (Value / Close / Weighted)
with consistent label-to-value vertical rhythm.
- Sidebar uses a flex column with three logical blocks (Fields /
Contact / Actions), each separated by hairline rule. The two
action buttons are now a 2-col grid at the bottom of the sidebar
(full-width per cell) so they line up.
- Activity timeline: each row now has a 3-column grid (icon /
content / timestamp) so timestamps align right consistently.
Dropped the legend chips above the timeline in favour of an
event count.
- Footer label simplified.
The kanban-board mock was thin. Now the floating mock is a real
deal record screen:
- Window chrome with app.warmbly.com/deals/stratech-fy26-q2.
- Header row: company name + Negotiation chip + deal id + primary
contact + Value ($45k) · Close (Jun 30) · Weighted ($27k · 60%).
- Left sidebar: deal fields (Value, Close date, Owner, Stage, Source,
Probability), then the primary contact card (RC avatar, name, title,
email, phone, tag chips) and Log activity / Add task buttons.
- Right side: activity timeline spanning 14 days with 8 events
(sequence sends, replies, meeting, stage change, task, note),
each with type chip (reply/meeting/stage/task/note/send), actor,
and timestamp.
- Footer: two-way CRM sync line.
Reads like a real CRM record. Kanban data array is gone.
- Hero: same HeroAtmosphere pattern with 'A CRM that lives next to
your sending.' headline and platform eyebrow chip.
- Kanban mock floats below the hero with 5 stages (New / Reached /
Demoed / Negotiation / Closed won) and color-tinted stage dots.
Footer: 'Drag between stages... Two-way sync HubSpot/Salesforce/
Pipedrive'.
- Data model section (unique): six entities laid out as a real
three-column ER table with relations and cardinality on the right.
Reads like a schema reference.
- Contacts power tools: split layout. Left: 4 numbered power-tool
rows (Import wizard CSV/XLSX, Export CSV/XLSX/JSON, Dedup
email/domain/key, Bulk update). Right: a real-looking contacts
table mock with stage chips and a '2,431 rows · 0 dupes' status.
- FAQ: 4 CRM questions, smooth grid-rows accordion.
- Hero: same HeroAtmosphere as the other product pages.
- Unique floating mock: a 3-pane inbox view with filters sidebar
(Inbox / Awaiting reply / Snoozed / Assigned to me / Suppressed +
Classification chips), thread list in the middle, and a thread
preview pane on the right showing the open thread, three auto-action
lines that already fired (sequence paused / routed to assignee /
posted to Slack), and Reply/Snooze/Assign buttons.
- Classifications action table: 6 rows (Positive, Negative, Referral,
OOO, Unsubscribe, Bounce) each with the class chip, what it is
detected on, and the deterministic auto-action.
- Capabilities: clean 2-col spec list (no icon grid), 6 numbered rows.
- FAQ: 4 reply questions with the grid-rows accordion.
- Hero: same HeroAtmosphere pattern as the other product pages, with
'Numbers we trust. Not vanity opens.' headline + two CTAs.
- Drill-down ladder · unique: a single panel where six layers cascade
with increasing left padding (workspace → pool → worker → mailbox →
sequence → contact), each row has its own sky-shaded icon tile,
layer label, and one-line description. Reads as a visual hierarchy.
- Signal vs noise: 2-col side-by-side. Left (emerald): 6 headline
metrics with the 'why we trust it' rationale per row. Right (rose):
3 ignored metrics with the 'why this is noise' reasoning (Apple Mail
Privacy prefetch, cold-CTR incentive trap, unauditable vendor scores).
- Sample dashboard mock: clearly framed as illustrative. KPI strip
with em-dash placeholders + sample-size disclaimer, placement chart
with premium vs free pool lines, mailbox health histogram (75% / 17%
/ 6% / 2% across the four bands). Footnote that real data appears
only after band sample-size thresholds are met.
- Exports: 5-row spec sheet (on-demand, scheduled, webhooks, REST,
S3 push) in the warmup defaults layout.
- FAQ: 4 reporting questions, smooth grid-rows accordion.
Hero now flows straight into the anatomy section without the floating
fleet card. Dropped the fleet[] data and tones() helper since they
were only used by that panel.
Same hero treatment as home / pricing / warmup / campaigns. The dark
ops-dashboard hero is gone but the worker fleet panel survives as a
floating white card below the hero. Anatomy diagram, single-send
trace, and scaling story still distinct from other pages.
Dropped the HeroAtmosphere + floating card pattern used by warmup
and campaigns. Sending now has its own shape:
- Hero: dark datacenter background (#0a0f1e + sky grid) with a live
worker-fleet panel on the right showing 6 workers, their IPs,
regions, load bars, plus a 'w-03 approaching concentration' warning.
- Anatomy section: big architecture SVG (control plane | Kafka spine
| workers | providers) with backend/Postgres/consumer on the left,
Kafka topics in a vertical bar, 4 workers, and 4 provider boxes.
Animated send-dots flow left-to-right. Legend underneath.
- Trace a single send: timeline of one message from queue to delivered
with timestamps (T+0ms to T+326ms), actor labels, and one-line
descriptions per handoff (kafka.publish, oauth, gmail api, ack,
consumer fold).
- Scaling story: 3 progressive scenarios (Founder 1 mailbox | Sales
team 10 mailboxes featured | Agency 50 mailboxes) each with a
mailbox dot-grid and stats.
- Providers: compact 3-card row with brand-colored top rules.
- FAQ: same grid-rows accordion.
- Hero: HeroAtmosphere with 'Many mailboxes. Many workers. Many IPs.'
headline, eyebrow chip 'Distributed across many machines, many IPs',
two CTAs.
- Floating worker fleet card: live topology SVG on the left (control
plane on left, 5 workers on right with IPs, animated send dots
traveling) plus a worker table on the right (id, ip, region, mailbox
count, status chip). Footer flags w-03 hitting the concentration
threshold of 10 mailboxes.
- Control plane vs execution plane: 2-card side-by-side with colored
top rules. Each card lists the 4 things that plane is responsible
for, with cmd/backend cmd/consumer and cmd/worker file labels.
- Per-mailbox math: 'Worker capacity is the sum of its mailboxes'
with a Go code block (worker_scheduler.go) showing the actual
budget = sum(mailbox caps) + concentration warning emit.
- Message lifecycle: 6 numbered editorial rows (scheduled, dispatched,
sent, acknowledged, tracked, reconciled) each with a code-style
signature (kafka.publish, provider.send, etc) and prose.
- Providers: 3 cards with brand-colored top rules (Gmail red, Outlook
blue, BYOS sky) and verifiable detail.
- Limits: 2-col spec sheet (cap, gap, concentration, worker budget,
send window, dependencies) with source-file mono footer.
- FAQ: 4 engine questions with the same grid-rows accordion.
- Hero: HeroAtmosphere with '12 steps. 4 variants. One source of truth.'
headline, eyebrow chip, two CTAs.
- Floating live-sequence card: realistic step list with 6 rows (send /
wait / branch / send / send / event), each with kind chip (SEND /
WAIT / BRANCH / EVENT in distinct colors), delay, label, body note,
variant count, and a spine line connecting steps.
- Variables + fallbacks: code block showing the real template engine
(pipe fallbacks + conditional blocks for sender-specific copy).
- Sender pool distribution: SVG fan-out diagram showing one campaign
feeding four mailboxes with animated dots, then a pool table with
today / cap / headroom progress bars per mailbox.
- Auto-stop rules: 6-card grid of suppression triggers (replied,
hard bounce, 3x soft, unsubscribe, OOO, manual).
- Limits: 2-col spec sheet (12 steps, 4 variants, 1 day min delay,
100/day cap, 10m gap, recipient TZ) with source-file mono footer.
- FAQ: 4 operational questions with the smooth grid-rows accordion.
- CTA: standard sky.
- Defaults: full-width 2-column spec sheet. Each row = numbered key,
description prose, and a big 22-26px mono value on the right.
Hover tints the row. Source-of-truth file paths in mono footer.
- Pool isolation: 2x2 grid of pool cards, each topped with a colored
rule (slate / sky / amber / black). Premium pool is featured with a
sky ring, drop shadow, and a 'Most paid plans' tag tucked into the
rule. Each card has 3 verifiable isolation rules.
- Health bands: replaced the table with a horizontal threshold gauge.
4 bands fill widths proportional to their range (Healthy 0-10%,
Watch 10-20%, Quarantined 20-40%, Blocked 40-100%) along a single
bar, with tick marks below at 0/10/20/40/80/100% and a 'providers
act' marker at 80%. Below the gauge: 4 detail cards with spam,
complaint, bounce, and action per band.
Dropped the floating card that overlapped into the hero (the layout
that 'just didn't fit'). The ramp is now a normal flowing section
with a split layout:
- Left (sticky): eyebrow, '10 emails on day 1. 40 emails on day 30.'
headline, one-paragraph explanation.
- Right: 3 rows (Day 1 / Each day / Day 30), each row is stage label
+ big mono number + one-line note. Hairline dividers between rows.
Day 30 row uses sky color for the highlight.
- Footer mono row with the operational facts.
Big editorial numbers instead of a chart or grid:
- Three columns: Day 1 (10/day), Each day after (+1/day), Day 30 (40/day)
with 80-96px mono numerals and a one-line explanation each.
- Single horizontal sky-gradient bar below with 4 milestone labels.
- Footer mono row: ~10m gap, business-hour scheduling, weekends skipped,
plain text only.
Quiet, premium, no grid noise.
- Replaced the line chart + bar chart with a 5-week x 7-day calendar
grid. Each cell shows the day label, the warmup volume that day,
and is shaded by intensity (sky-1 to sky-8). Weekends are skipped
visibly. Side panel: 4 stat tiles (Day 1 send, daily ramp, ceiling
reached at Day 30, ~550 total sends).
- FAQ converted from native <details> to the smooth grid-template-rows
animation pattern used on pricing: click expands panel from 0fr to 1fr
over 300ms, plus icon rotates 0->45deg.
Replaced a section with fabricated 'internal A/B' percentages with a
qualitative two-column side-by-side: 'Without warmup' (5 reputation
liabilities) vs 'With Warmbly warmup' (5 actual platform behaviours).
Footnote explicitly states why we don't publish placement-improvement
numbers (it depends on domain age, content, hygiene, DMARC). No fake
stats.
- New section: 'Every warmup message carries proof it is real'. Shows
the actual token format (wbly:ulid:exp:hmac), embeds it as a realistic
body footer, and shows the receiver's verification pseudocode. Side
panel lists the 5 validation rules (HMAC, expiry, single-use ULID,
pool membership, sender/recipient binding), with the quarantine
threshold footer (>= 3 invalid / 24h).
- 'The daily loop' rewritten with code-style signature snippets for
each step (partner = pool.draw(...), token = hmac(...), etc) plus
the prose explanation. Real implementation language, not marketing.
Three layers of detail in one panel:
- Chart (340px tall): full 30-day curve with daily dots, week dividers,
ceiling reference line, milestone markers at Day 1, Week 1 (17/d),
and Day 30 (40/d at ceiling).
- Week-by-week breakdown on the right: 5 weeks with start/end rate,
total sends, status label (Initial ramp / Building reputation /
Provider learning / Approaching ceiling / At ceiling).
- Day-by-day mini bar chart at the bottom: 30 bars scaling with the
daily volume, ceiling days in darker sky.
- Stats footer: 775 total sends, 30% reply target, ~10m gap, 9-5 TZ.
Astro compiler tripped on the <= in the IIFE inside the SVG block.
Replaced with two inline Array.from(...) expressions producing the
polygon and polyline points strings directly. Same visual output.
- Replaced the 3-card 'ramp numbers' (borrowed from pricing) with a
unique real SVG ramp curve. Charts the 30-day path from 10/day to
40/day with a dashed ceiling line, day-1 and day-30 markers, axis
ticks, and a mono summary row underneath.
- Replaced the 3-card pool grid (also borrowed from pricing plans)
with a single 'pool isolation' table showing 4 layered rows: Free /
Premium (highlighted in sky) / Recovery / Dedicated, each with a
plain-language rule and the plan label.
- Hero: editorial split with a real-looking warmup dashboard mock on
the right. Six mailboxes listed with day-in-warmup, tiny sparkline
showing the ramp, today's send vs cap, and a state chip. Watch state
has an amber sparkline. Footer row shows 'next send in 12m'.
- The daily loop: 6-step horizontal cycle visualization with a
connecting rail and circular step badges.
- Health bands: state-machine table on the right showing each transition
with from/to chips, trigger condition (spam >= 10%, etc), and action.
Left side has the four states as soft-tinted chip cards.
- Defaults: clean spec table on a muted band, monospace values.
- Final CTA: deep Warmbly sky band with the standard white-CTA pattern.
Dropped the radial pool ring SVG, the 8-card grid, and the traffic-light
band cards from the previous version.
The cursor traveling from the Product trigger down to the fixed panel
was hitting a few px of dead space between the bottom of the header
and the top of the panel. Cursor was outside both rects, mousemove
scheduled a close, panel shut. Expanding the panel's hit-test rect
upward by 40px lets that gap count as 'inside the panel' for the
hover check, so the menu stays open.
- Left intro block is now plain white (matches right): eyebrow,
'Six systems. One platform.' headline, short tagline, and a single
'Read the handbook' link. No sky gradient, no clouds, no status row.
- Product cards: dropped the leading number, kept only the tag eyebrow
plus title + description; cleaner repeated rhythm.
- Open animation: cards stagger fade-up (220ms) with 32ms steps for
a quiet entrance on hover.
- Hover hit-test: replaced mouseenter/leave (which mis-fired under
position:fixed) with a global mousemove that checks the cursor
against both the trigger and panel bounding rects. The panel only
closes when the cursor is outside BOTH, with a 180ms grace.
- White panel chrome now spans the full viewport edge-to-edge with
shadow + bottom border.
- Inner content uses container-page so brand block + product grid + the
footer band all align with the page baseline width.
- Brand sky-gradient bleeds left of the container into the white edge
via negative margin so the visual feels continuous.
- Removed the 100/d cold cap stat from the brand block (kept only a
small status + Apache 2.0 mono row).
- Panel is now position: fixed under the header at top: 56px, anchored
full-width with an inner container-page wrapper so it matches the
baseline width of page content.
- Removed border radius (square edges).
- Left brand block widened to 320px with slightly larger headline.
- Product cards lose card-level rounded corners and gap; they now share
hairline borders between cells for an editorial grid look.
- Removed transforms on cards/chevron to prevent layout shifts that
caused the hover flicker.
- Added a 24px invisible hover-bridge above the panel so the cursor
can travel from the Product trigger into the panel without falling
into a dead gap.
960px panel split into a 260px brand column and a 3x2 product grid.
- Brand column: soft sky gradient with cloud accent, 'The cold-email
platform' headline, tagline, and a mono stat row (6 systems, 100/d
cold cap, Apache open source).
- Grid: 6 large product cards (17px titles), each with mono number +
uppercase tag, 1-line description, and an 'Open →' hint that lights
on hover. Current page is sky tinted with a sky dot.
- Footer band: GitHub URL + Deliverability/Integrations/Pricing links.
- Anchored left:-180px so the wide panel sits centered under the nav.
- 340px panel with a sky-gradient header strip (sky-6 to sky-8 deep
gradient + soft cloud accents in screen blend) and white body.
- Header strip says 'CHOOSE A PRODUCT' (mono uppercase) plus the count.
- Body: 6 product rows, each row title + mono uppercase tag on one line,
hover light surface bg, current page sky tinted with sky dot.
- Compact, sky-family, not the typical icon-grid mega-menu.
- 720px panel, dark accent rule on top, square-ish 10px radius
- Left: editorial index of 6 products with numbers (01-06), title, and
small uppercase mono tag (Deliverability, Infrastructure, Triage,
Outreach, Reporting, Workflow); hover slides a chevron in.
- Right: 'From the handbook' featured callout linking to the
deliverability handbook (Essential pill, title, 2-line excerpt,
meta + Read CTA).
- Footer: thin mono utility row with GitHub URL and /pricing link.
- 580px panel split 210px / 1fr.
- Left: bare numbered list of 6 products (no icons, no descriptions),
numbered 01-06, soft text color, sky highlight + dot on the current
page.
- Right: live preview pane that swaps to follow the hovered list row.
Each preview shows tag eyebrow, big title, full description, and a
'Open {Product} →' CTA.
- Default preview = first product, opacity transitions on swap.
- Removed /product, /security, /workers (Footer, 404, privacy, dpa, trust
references updated).
- Mega-menu now 620px wide with a sky-tinted header strip showing
'The platform · 6 systems', a 2-col grid of products where each item
has a 40x40 icon tile that goes from quiet surface ring to a sky
gradient on hover (with a sky drop-shadow), current page is shown
with the gradient tile active + a sky dot next to the name. Footer
band kept (GitHub link + pricing CTA).
Hover or focus the Product nav item to reveal a wide (720px) mega-menu:
- Top: featured 'Product overview' card with sky-gradient icon tile, plus
a Resources column (Deliverability, API, Integrations, Changelog).
- Two-column product grid grouped 'Send & deliver' (Warmup, Sending,
Workers, Security) and 'Engage & analyse' (Inbox, Campaigns, CRM,
Analytics) with icon + title + 1-line description per item.
- Footer band with open-source link and pricing link.
- Caret rotates 180° on open, panel fades + slides down 200ms.
- Hover-bridge with 140ms close delay so cursor can travel from
trigger to panel without flicker. Escape closes.
- Replaced the static chapter list with a 2-pane rail matching Learn.astro:
'On this page' (chapter-link list with scroll-spy active state) plus
'All essays' switcher showing every learn article with this handbook
highlighted as current.
- Active state uses only a soft sky color shift + semibold, no bg or ring,
with a 300ms color transition.
- Chapter rail active state: only color shifts to sky (no background,
no ring), font weight bumps to semibold, smooth 300ms color transition.
- Article switcher: same treatment. Current article shows a small sky
dot on the right where read time would normally be, so you can spot
the current spot at a glance.
- Added scroll-spy to the chapter rail: as you scroll, the H2 closest
to the upper third of the viewport becomes the active link (white
background, sky text, sky ring).
- Below the chapter rail, an 'Other essays' list shows every other
learn article (6 on each page) with read-time, plus an 'All articles'
link back to the library.
Rebuilt Learn.astro to mirror the deliverability handbook:
- top bar with library breadcrumb + eyebrow/reading/updated meta
- sticky chapter rail on the left, auto-populated from H2 headings via
inline JS (each H2 gets a slugged anchor, rail lists numbered links)
- main column with page header (eyebrow, big title, description) and
prose body with handbook-tuned typography (numbered ol counters,
bulleted ul with sky bullets, section anchor § glyph, sky blockquotes,
code blocks)
- footer with 'continue reading' cards excluding the current page
All seven learn subpages (email-warmup, spf-dkim-dmarc, inbox-placement,
cold-email-rules, warmup-pools, reputation-recovery, glossary) now use
this layout. No sky background.
- learn index: dropped the sky-atmosphere library + glossary bands.
Library is now a quiet inline section with article rows on the left
and a sticky reference panel on the right showing 6 sample glossary
entries with a stat strip. White background, no sky.
- handbook: rebuilt as a docs-style 2-column layout (Stripe API style).
Sticky chapter rail on the left, page header + 8 chapter rows on the
right. Each chapter has prose on the left and a side example panel
on the right (definitions list, signal-weight table, threshold table,
right vs wrong code blocks, numbered recipe, measure list, noise
cards, incident runbook). Closing rule + continue-reading footer.
Matthew Meszaros