BRAND Mailchimp 2026 · Page: pricing

HEADER brand: Mailchimp; design_date: 2026-10; page_type: pricing; variants: /pricing/transactional/ uses the same subnav and shell (not captured) example_urls: https://mailchimp.com/pricing/marketing/ ; evidence: measured on https://mailchimp.com/pricing/marketing/?currency=USD 2026-10-06 (direct connection, visitor region JP: amounts are converted JPY prices and the plan menu variant is "coo-non-sms"; see Overview header) unless marked purpose: pick a plan and start a trial or buy skeleton: container 1280px (plan grid 1240px), 10 blocks, total height desktop ~7346px at 1440, mobile ~9828px at 390; sidebar: none overrides: no promo strip above the header (Intuit bar 29px still present); header otherwise as Overview SECTIONS S1 subnav-hero / pill-switch - choose the product line background: #f5f5f5; padding-top 68px (header height); height 179px elements: centered pill group 298 x 63: white, 1px rgba(35,30,21,.3) border, radius 100px; tabs "Email Marketing" (active: bg #231e15, white 13px/20px 500, padding 12px 20px, radius 100px) and "Transactional" (white, hover bg rgba(35,30,21,.05) 150ms); margin 32px auto 16px responsive: < 600: replaced by a full-width dark dropdown bar ("Email Marketing" white 13px 500 on #231e15, padding 16px 24px, chevron), menu rows #403b3b S2 plan-offer / split-text-card - as Page: home S7 (same singlePlan module), with these differences: the CTA row under the checklist holds "Find the right plan" (secondary pill 64px tall with a 48px yellow circle holding a dark sun/sparkle icon at the left, label 15px/500) and a "Request a demo" ctaArrow 24px to its right responsive: < 992: "Find the right plan" pill moves to the top, centered; H2 37.4px centered; card full width; "Request a demo" arrow link under the card S3 plan-customizer - compare plans for a contact count layout: 1240px wide block (x 92-1332) customize bar: #231e15, 85px tall, padding 10px, extended full bleed by pseudo-elements; centered: title Means 24px/32px white "Customize plans & offers" + contacts select (label box "Contacts" 13px on #f5f5f5 with 1px #bcbab8 border, padding 11px 18px; white select 300px, 1px #bcbab8, padding 10px, value Means 18px "0-500", chevron); currency select at the far right on wide screens helper banner: #ffe01b, 64px, full bleed (box-shadow 0 0 0 100vw #ffe01b): centered 13px "Not sure how to choose?" (600) + "Answer a few quick questions for a personalized recommendation for you." + "Find my plan →" (500, arrow icon) plan columns: table, 4 columns of 310px; column 1 (no border): "Under 250 contacts? It's free." 16px/500, 13px text, full-width secondary "Sign Up", 13px note; columns 2-4 bordered 1px #bcbab8, padding 48px 16px 24px: plan name Means 24px (est) (Premium, Standard, Essentials), 13px/19px description, price box (Premium: "Save 15% on 10,000+ contacts" 13px, "$203.06" Means 32px with superscript $, "/mo for 12 months", "Then, starts at $238.90/month†" muted), or two radio option boxes (Standard, Essentials: "Try for free / Free for 14 days" selected, "Save 15% on 10,000+ contacts"); full-width CTA pill 44px ("Request a demo" text link above "Buy Now" on Premium; "Start Free Trial" on the others); 13px legal with underlined links best value: a 30px bar across the top of the Standard column, light blue (est #c5dbf2, the redesign variant uses #d2ebff), 12px underlined "Best value" label with a tooltip comparison table: group header rows full width, centered, 14px/500 #000000 ("Key Plan Features", "Admin", "Services & Support", "Email Marketing & Segmentation"), 36px tall, 1px #bcbab8 borders; feature rows 43px, zebra: odd rows #f6f6f4, even white; label column 13px/500 #231e15 with a dotted underline (tooltip trigger); value cells 14px #231e15, 16px; check marks and X icons 16px #231e15; vertical borders 1px #bcbab8 footer: "Compare all features" secondary pill (small, 44px) centered 24px below the table sticky plan header: when the table scrolls under the header, a copy of the plan row (names, prices, CTAs, 240px tall) is fixed at top 67px directly below the 68px header, full width of the table, white; opacity 150ms ease-in-out; hidden again when the table leaves responsive: < 750: customize bar stacks (title over the select); helper banner becomes plain text on white with "Find my plan" arrow link; plan tabs row (Premium | Standard | Essentials | Free; 13px, selected tab outlined 1px #231e15 on white, others on #f5f5f5) and ONE plan card at a time (white, 1px #bcbab8, max 400px, Best value bar on top); comparison table keeps 4 narrow value columns at 12px with labels on their own row above S4 trust-band / badge-row - credibility background: #231e15; padding: 80px / 80px; height 616px elements: centered H2 Means 40px white "Work with a trusted industry leader"; row of 4 award badges (two hexagons, two shields) about 300px each, evenly spaced responsive: < 768: badges stacked vertically, centered S5 feature-highlight / split-text-image - onboarding background: #ffffff; padding: 80px / 80px layout: text cols 1-6 (vertically centered), image cols 7-12 (640 x ~640, radius 16px est) elements: H2 Means 40px/48px -0.5px "Get started easily with a personalized product tour"; 16px body; ctaArrow "Learn more about onboarding" responsive: < 992: stacked, image below the text S6 two-up text blocks - nonprofit discount and pay as you go background: #ffffff; padding: 0 / 80px layout: two columns (cols 1-6 and 7-12) elements: H2 Means 40px/48px each; 16px body (line-height 1.6); secondary small pill ("Get started", "Learn more") 40px below responsive: stacked, both in a light grey #f5f5f5 card (mobile capture) S7 headliner / centered - basic plans background: #f5f5f5; padding: 80px / 80px elements: centered H2 Means 40px "Basic plans for smaller businesses"; Graphik 24px/32px paragraph (copy-large) max 800px; two secondary small pills "About Free", "About Essentials", 24px gap S8 faq / accordion - objections background: #ffffff; padding: 80px / 80px layout: H2 "FAQs" Means 40px in the left 25% column; list 75% (960px) at the right elements: 9 rows, 80px each: 1px rgba(35,30,21,.3) top border, question Graphik 24px/32px 400 #231e15, padding 24px 0, 32px #ffe01b circle with a black plus at the right edge motion: open/close instant (plus becomes minus); hover underlines the question responsive: < 992: H2 above the list; question 16px; only 4 rows visible, the 4th faded, then a centered "Show all +" button S9 disclaimers - numbered legal list (21 items), background #f0f0eb, 11px/16px with bold lead-ins; mobile: collapsed into a "Disclaimers" bar (Means 20px) with "View Disclaimers ›" S10 free-trial terms - one 11px paragraph on #f5f5f5, padding 40px S11 footer - as Overview PAGE COMPONENTS pill switch (subnav); contacts select bar; helper banner; plan column card with radio option boxes and price block; Best value bar; zebra comparison table with dotted tooltip labels; sticky plan header; FAQ accordion; "Find the right plan" icon pill INTERACTIONS contacts select: changing the range re-renders prices instantly (no animation) radio option boxes: selecting "Save 15%" swaps the CTA label and price note (instant) tooltips: dotted-underlined labels open info tooltips (not measured) sticky plan header: fade 150ms ease-in-out, position fixed at top 67px Find the right plan / Find my plan: opens a plan quiz (planSelector, not captured) buttons and arrow links: Recipe cta-buttons; header: Recipe nav-mega-menu STATES plan disabled (contact count too high for a plan): CTA becomes a flat #dbd9d2 pill with rgba(35,30,21,.65) text (from CSS, not seen); recommended plan after the quiz: column bg #fbeeca (from CSS, not seen) SCREENSHOTS - file: mailchimp_2026_pricing_d1440_full.jpg shows: full pricing page at 1440 (1424 wide), 7346px tall, third-party widgets hidden: pill switch, offer + Standard card, dark customize bar, yellow helper banner, plan columns and comparison table, dark badge band, onboarding split, two text blocks, basic plans band, FAQ, disclaimers, terms, footer source: live https://mailchimp.com/pricing/marketing/?currency=USD 2026-10-06 key values: prices are JPY converted to USD (not US prices) do not copy: award badges, photos, legal text - file: mailchimp_2026_pricing_d1440_sticky-plans.jpg shows: viewport at 1440 scrolled into the table: sticky plan header (names, prices, CTAs, Best value bar) fixed under the white header, zebra rows #f6f6f4 / white, group header "Services & Support" - file: mailchimp_2026_pricing_m390_full.jpg shows: full pricing page at 390 captured at 1x (9828px tall; 2x would exceed the 16384px capture limit): dark product dropdown bar, Find the right plan pill, centered offer, card, stacked customize bar, plan tabs with one plan card, narrow table, stacked badges, FAQ with "Show all +", collapsed Disclaimers bar, footer