--- title: "BRAND Mailchimp 2026 · Page: home" url: https://memocore.ai/memos/6ac4bdaf8fa4c72b3756af07 project: "Brand Styles" tags: "brand-mailchimp" updated_at: "2026-10-06T09:32:38.250Z" --- # BRAND Mailchimp 2026 · Page: home HEADER brand: Mailchimp; design_date: 2026-10; page_type: home; variants: industry landing heroes swap in the same layout (personalized hero templates for retail, small business, non-profit, professionals, creators) example_urls: https://mailchimp.com/ ; evidence: measured on https://mailchimp.com/?currency=USD 2026-10-06 (direct connection, visitor region JP, see Overview header) unless marked purpose: get small businesses to start the free trial (Start Free Trial) or see pricing skeleton: container 1280px (90%), 11 blocks, total height desktop ~6960px at 1440, mobile ~7720px at 390; sidebar: none overrides: none (header and footer as Overview; home shows the Intuit bar and the #231e15 promo strip above the header) SECTIONS S0 co-brand bar + promo strip - family context and the trial offer background: #ffffff bar 29px, then #231e15 strip 42px; padding: strip 12px 16px elements: Intuit, QuickBooks, Mailchimp wordmarks (grey, 12px tall) at the left of the bar; one centered sentence 13px white with a dashed-underlined link copy: "Join Mailchimp with a free 14-day trial or save 15% off on 10,000+ contacts. Start today." (about 18 words) responsive: bar hidden below the large breakpoint; strip hidden below 768px S1 header - as Overview (Recipe nav-mega-menu); at scroll 0 it sits on white above the hero, 68px S2 hero / full-bleed-photo-centered - one promise and the trial CTA background: photo full bleed (object-fit cover, position center 15%) with rgba(0,0,0,.25) veil, #231e15 behind; height: 700px at 1440 (min-height 700 - nav offset; content grows); padding: 40px 0 inside the layout layout: centered column 960px wide (720px at 768-991, 343px mobile) elements: H1 Means 64px/76.8px -1.2px white, 2 lines, the second line an italic #ffe01b em (white-space nowrap and display inline-block only at >= 768px; below 768 the yellow phrase wraps normally and starts right after "marketing" on the same line); subline Graphik 20px/32px white, 24px above; CTA row 40px above and below: one ctaPrimary 343 x 48px, 15px/600, radius 40px, label centered; social proof 72px below: 5 yellow stars (30px tall, the last one half) + "*Based on 33,000+ reviews across" 20px/30px white with 500 numbers, row gap 24px; then a row of three review-site badges (Capterra, TrustRadius, G2) about 43px tall, 32px gaps copy: H1 "Email & SMS marketing / minus the learning curve"; sub "Drive revenue with intuitive marketing analytics, automations, and AI tools."; CTA "Start Free Trial" media: lifestyle photo 1920 x 1080 (mobile crop 390 x 844); placeholder [PHOTO small business owner at desk 16:9] motion: none on load; CTA lift hover (Recipe cta-buttons) responsive: 768-991: H1 48px/57.6px centered, layout 720px; < 768 (390): H1 36px/46.8px LEFT aligned (3 lines: "Email & SMS / marketing minus / the learning curve"), subline 16px/20px left, social proof (stars centered over the copy, badges row) comes BEFORE the CTA, CTA full width (343px, label centered) pinned to the bottom of the hero; hero height 717px S3 personalized-grid / spotlight-cards - route visitors to product areas background: #f5f5f5; padding: 80px / 80px (48px mobile) layout: container 1280; H2 left aligned; card rows 1280 x 482, 16px apart (Recipe spotlight-cards); "See pricing" ctaPrimary (small: 13px, 44px) centered 64px below the cards elements: H2 Means 40px/40px -0.5px "Recommended for your business", 64px above the cards; 2 rows x 2 cards (10 cards in the data; order is personalized) copy: card headlines "Design with ease", "Get more sales", "Reach your audience on any device", "Connect all your apps"; CTAs "See our content creation tools", "Learn about Mailchimp for e-commerce" media: product UI mockups in 212 x 266px rounded frames on cream tints motion: Recipe spotlight-cards responsive: <= 992: cards become one horizontal swipe carousel of yellow cards (92.5vw - 2em wide, 632px tall) with indicator dots; H2 29.25px, 40px above the cards; See pricing full width (343px) S4 logo-strip / marquee - social proof background: #ffffff; padding: 64px / 64px (32px mobile); height 195px elements: one row of 8 black customer wordmarks, 62px tall, 55px apart, scrolling left 60s (Recipe marquees) responsive: same, logos cropped at both edges S5 stat-band / vertical-carousel - proof by numbers background: #231e15 with faint blurred glow (opacity .18); height 504px; padding 117px 80px elements: yellow eyebrow 16px/500, H2 Means 40px/45.2px white with a yellow marker box on the figure, 13px footnote, white ctaArrow; vertical pills at the right edge (4) copy: "Peak Season" / "Mailchimp customers generated $1.1 billion in gross revenue in just 62 days." / "See the full peak season report" motion: Recipe p23-carousels (vertical swap every 5s, fade-up entrance) responsive: < 992: outlined cards (2px #403b3b, radius 20px) in a horizontal strip, headline 28px/31.5px, dots under the cards; section 532px tall at 390 S6 case-studies / peeking-carousel - stories with numbers background: #ffffff; padding: 80px / 80px layout: header indented 4% (x 124 at 1440): H2 Means 40px "Businesses like yours are thriving with Mailchimp" + "View all case studies" ctaArrow 24px below; carousel 48px below (est); active card 1088 x 650 centered with neighbours peeking; 3 pills 24px below the card; button pair (Request demo secondary, Start Free Trial dark) 48px below, centered, 16px gap copy: quote "Mailchimp provides a true one-to-one customer success model that has exceeded our expectations."; stats "142x / ROI on first SMS launch", "30% / of revenue attributed to Mailchimp"; byline ", Chief Marketing Officer, "; CTA "Read the case study" motion: Recipe p23-carousels (horizontal, 4s) responsive: < 992: card stacked (photo 376px tall with quote, white stats pane below with two stats side by side), neighbour peeks at the right; buttons full width stacked (dark Start Free Trial first, plain Request demo below); H2 29.25px S7 plan-offer / split-text-card - push the Standard plan trial background: #f5f5f5; height 659px; padding: 32px 0 (module content offset), card 990 x 559 at the right layout: text column cols 1-8 (833px) left, card 370px right (x 990), top-aligned with a currency select "$ USD" (13px, chevron) 18px above the card elements: offer chip group (white pill with 1px rgba(35,30,21,.3) border: dark "Try free" pill + "Save 15% on 10,000+ contacts" 13px); H2 (class h1) Means 48px/48px -1px "Try our Standard plan for free!" with an 8px yellow underline under "free"; paragraph 16px/28px with teal underlined plan links; checklist in 2 columns (6 items, 20px yellow check circles, 13px/16px labels, 30px rows); "See all plans" ctaArrow 56px below card (singlePlan): white, shadow 0 0 20px 3px rgba(35,30,21,.15), padding 24px 16px: title Means 40px "Standard"; 13px "Send up to 6,000 emails each month."; Contacts select 46px radius 10px (value "0-500" Means 18px); option box 1 selected: "Try for free" 13px, "Free" Means 32px with yellow underline + "for 14 days", "Then, starts at $11.94/month†" muted with bold price; option box 2: "Save 15% on 10,000+ contacts" with an empty radio; full-width ctaPrimary "Start Free Trial" 44px; 11px legal with underlined links; rule; rating "4.5" with yellow stars and "G2 · Capterra · TrustRadius" responsive: < 992: text centered and stacked, chips hidden, card full width under the text (section 927px at 390) S8 integrations / marquee - breadth of the ecosystem background: #ffffff; padding: 120px / 120px (56px mobile) elements: centered H2 Means 40px/45px "One marketing platform to unite 300+ apps", description 20px/32px, ctaArrow "View all integrations"; 3 full-bleed rows of 414 x 112 tiles (Recipe marquees) responsive: < 768: header left aligned, H2 28px, tiles 290px wide S9 final-cta / dark-band - closing push background: #231e15; padding: 80px / 80px; height 324px layout: centered column 8 of 12 (853px) elements: H2 Means 40px/40px -0.5px white, 2 lines, centered; ctaPrimary "Start Free Trial" (small 44px) 40px below copy: "Millions of users trust us with their email marketing. You can too." responsive: < 576: H2 29.25px S10 disclaimers - legal footnotes background: #f5f5f5; padding: 40px / 40px (24px mobile) elements: "*Disclaimers" 11px then a numbered list of 5 items 11px/16px #231e15 with bold lead-ins S11 footer - as Overview (Related Links, 5 columns, Intuit wordmarks, language select, legal) PAGE COMPONENTS offer chip group, plan card with radio option boxes and contacts select (also on Page: pricing); review proof row (stars + badges) on the hero INTERACTIONS spotlight cards (Recipe spotlight-cards); stat and case carousels (Recipe p23-carousels); logo and integrations marquees (Recipe marquees); header and mega-menus (Recipe nav-mega-menu); all CTAs (Recipe cta-buttons) hero personalization: the server ships 6 hero variants as