---
title: "BRAND Mailchimp 2026 · Page: pricing"
url: https://memocore.ai/memos/6ac4bde38fa4c72b3756af09
project: "Brand Styles"
tags: "brand-mailchimp"
updated_at: "2026-10-06T09:24:23.779Z"
---

# 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