Brand Styles

1 follower

Design descriptions of websites for AI agents. System memos (tag design-system, start at "README"): Rules, Brand Memo Templates, Extraction Procedure & Screenshots, Components Motion & Recipes, Vocabularies, Media Assets & Legal, plus CJK & RTL and Legacy Web add-ons. Brand memos (titles "BRAND <Brand> <year> · Overview | Page: <type> | Recipe: <name>", tag brand-<slug>) describe one brand design: Overview with tokens and components, one Page memo per page type, Recipe memos for complex effects, with screenshots attached. Use when asked to build a site or page "in the style of <brand>" or to analyze, describe and save any website's design.

Shared project

This is Memocore

Memocore is cloud memory for AI agents and teams. Save something once and your agent remembers it in every new chat, and your teammates’ agents read it too — nothing to re-explain.

BRAND Mailchimp 2026 · Overview

Mailchimp 2026 (mailchimp.com, 2026-10): site-wide design — yellow #ffe01b on #231e15, Means serif headings, Graphik text, lift-and-depth pill buttons, arrow links, header, footer, motion.

アンアン株式会社
Oct 6, 2026
brand-mailchimp

HEADER brand: Mailchimp (Intuit Mailchimp); domain: mailchimp.com; industry: email and SMS marketing SaaS (marketing site); design_date: 2026-10 captured: https://mailchimp.com/?currency=USD (home) and https://mailchimp.com/pricing/marketing/?currency=USD, English (html lang en), 2026-10-06. Region note: direct connection from Japan. The page config reports the visitor as Japan (window.__plums_config geo.country "JP", pricing-api-version-data country "JP", cookie manager data-country-code JP); the Google Translate proxy route also reported JP because it forwards the client IP, so a US capture was not possible without a VPN. The ?currency=USD parameter shows prices converted from the Japanese price list (¥1,900 -> $11.94). The user decided that only prices and data differ and the design is what matters. Known region-dependent bits: price amounts, the pricing card variant for countries without SMS (class coo-non-sms) and the cookie banner text. evidence: measured from the stylesheets (critical.0bda7ba5.1.css, common.42a06943.1.css, below-fold.bffec7c1.1.css, p23-less.0d3ec901.1.css and the module CSS files), the server HTML, the webpack chunks under /release/plums/chunks/js/, then checked against computed styles and screenshots of the live pages at 1440x900 and 390x844 unless marked style_tags: playful-editorial, warm-neutral, photography-led viewports: desktop 1440, mobile 390; breakpoints (min-width): 576 (36em, spacing and type step), 600 (37.5em), 751 (46.9375rem, header 68px), 768 (48em, hero and grid), 992 (62em, desktop layout, container 90%), 1100 (68.75em, nav), 1200 (75em), 1422 (88.8889em, type caps), 1920 (120em) pages: BRAND Mailchimp 2026 · Page: home; BRAND Mailchimp 2026 · Page: pricing recipes: BRAND Mailchimp 2026 · Recipe: cta-buttons; · Recipe: nav-mega-menu; · Recipe: spotlight-cards; · Recipe: p23-carousels; · Recipe: marquees rebuild check: passed 2026-10-06 (header, hero and first spotlight row; details at the end) RECOGNITION KEYS 1 Cavendish yellow #ffe01b pill buttons with a 1px #231e15 outline; on hover they lift 0.375em onto a hard, unblurred #231e15 slab with a springy overshoot (Recipe cta-buttons). 2 Headlines in Means, a soft contemporary serif, weight 400, tight (line-height 1-1.2, letter-spacing -1px); key phrases in yellow: italic yellow words on photos ("minus the learning curve"), a yellow marker box behind numbers on dark bands, or a thick yellow underline under one word on light bands ("free"). 3 Text, labels and buttons in Graphik (13px/500 buttons, 16px body), warm near-black #231e15 instead of pure black. 4 Arrow links: text followed by a 32px yellow circle with a black arrow that stretches into a yellow capsule behind the text on hover. 5 A food-named warm palette: #ffe01b yellow, #231e15 peppercorn bands, #f5f5f5 jasmine and #f0f0eb parsnip greys, and a mustard #e7b75f footer. 6 Soft rounded white cards (16-24px radius) with very faint warm shadows on light grey bands; the hovered card grows and turns yellow (Recipe spotlight-cards). 7 Full-bleed lifestyle photo hero under a 25% black veil with centered white serif headline; Intuit co-branding strip above the header. GUARDRAILS no square or 4px buttons (all CTAs are full pills, radius 2em/40px; only nav items and inputs are square-ish); no blurred drop shadows on buttons (depth is a solid slab); no pure #000000 text except a few legacy spots (marquee headline, panel micro-headings); no bold serif headings (Means 400 only, never 700); no gradients except the photo veil, the case-study photo fade and the faint blurred glow on the dark stat band; no blue primary actions (teal only for inline links #004e56 and the focus ring #4bc4c2); no all-caps headings (uppercase only for 11px menu micro-headings); no dark mode; no glassmorphism or backdrop blur; no scroll-jacking or parallax; older Mailchimp elements not in this design: the 2018 yellow full-page backgrounds with large Freddie illustrations, hand-drawn collage heroes, the green "Sign Up Free" buttons of the pre-2018 site and cartoon Freddie mascot animations (ext) TOKENS /* color: brand palette (CSS class names .background<Name>) */ --color-cavendish: #ffe01b; /* brand yellow, also BrandYellow */ --color-light-cavendish: #fff7c1; --color-peppercorn: #231e15; /* ink, dark bands, button outline and depth */ --color-oyster: #39352c; /* secondary dark band */ --color-coconut: #ffffff; --color-jasmine: #f5f5f5; /* light grey bands */ --color-parsnip: #f0f0eb; /* warm grey bands, disclaimers */ --color-squash: #ebe1cd; --color-portobello: #d2c8be; --color-basmati: #dbd9d2; --color-tuna: #bcbab6; --color-accessible-tuna: #727070; --color-apricot: #e6b95f; --color-footer: #e7b75f; /* mustard footer */ --color-butterscotch: #d79637; --color-kale: #007c89; --color-kale-dark: #004e56; --color-apple: #00c350; --color-accessible-apple: #01934f; --color-dark-apple: #004020; --color-light-apple: #edffcc; --color-blueberry: #3492ef; --color-dark-blueberry: #17497f; --color-light-blueberry: #d2ebff; /* also Cornflower */ --color-pumpkin: #ff7346; --color-accessible-pumpkin: #a73205; --color-light-pumpkin: #ffdbcc; --color-plum: #b42855; --color-dark-plum: #4d001f; --color-light-plum: #ffccd8; --color-dragonfruit: #ff3ebf; /* color: roles */ --color-ink: #231e15; /* --heading-color, --copy-color */ --color-text: #231e15; --color-text-default: #403b3b; /* body fallback and grey text */ --color-text-muted: rgba(35,30,21,.65); /* --copy-color-light */ --color-surface: #ffffff; --color-surface-alt: #f5f5f5; --color-surface-warm: #f0f0eb; --color-surface-dark: #231e15; --color-on-dark: #ffffff; --color-primary: #ffe01b; --color-on-primary: #231e15; --color-primary-disabled: #dbd9d2; --color-border: rgba(35,30,21,.3); /* hairlines, accordion rules, pill nav */ --color-border-strong: #231e15; --color-divider: #bcbab6; --color-link: #004e56; --color-link-hover: #002023; --color-link-highlight: rgba(255,224,27,.65); /* marker hover on text links */ --color-focus: #4bc4c2; --color-selection: rgba(255,224,27,.15); --color-error: #f25f25; /* form fields */ --color-success: not measured, est #01934f; /* font */ --font-display: "Means Web", Georgia, Times, "Times New Roman", serif; --font-text: "Graphik Web", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; /* type scale: size/line-height/weight/tracking at >= 1422px; fluid steps in comments */ --type-display: 64px/1.5/400/-1px; /* .display-text; 4.5vw at 992-1421, 8vw at 576-991, 12vw below */ --type-hero: 64px/76.8px/400/-1.2px; /* home hero H1 Means; 48px/57.6px -0.96px at 768-991; 36px/46.8px 0 below 768 */ --type-h1: 48px/1/400/-1px; /* 3.3vw 1200-1421, 3.6vw 992-1199, 6vw 576-991, 9.6vw below (37.4px at 390) */ --type-h2: 40px/1/400/-0.5px; /* 2.75vw, 3vw, 5vw, 7.5vw (29.25px at 390) */ --type-h3: 32px/1.25/400/0; /* Means; 2.25vw, 2.75vw, 4vw, 6vw */ --type-h4: 32px/1.25/400/0; /* Graphik */ --type-h5: 24px/1.333/400/0; /* Means; also form selects */ --type-h6: 20px/1.2/400/0; /* Graphik; 16px/1.5 below 576 */ --type-jumbo: 80px/1/400/0; /* Means, copy-jumbo; 70px 576-991, 38px below */ --type-lead: 24px/1.333/400/-0.32px; /* copy-large; 18px below 576 */ --type-medium: 20px/1.4/400/0; /* 16px/1.5 below 576 */ --type-body: 16px/1.5/400/0; /* copy-regular */ --type-small: 16px/1.75/400/0; /* copy-small */ --type-info: 13px/1.25/400/0; /* rgba(35,30,21,.65) */ --type-legal: 11px/1.4545/400/0; --type-eyebrow: 13px/1.25/500/0 uppercase; --type-button: 13px/1.5/500/0; /* hero CTA 15px/24px 600 */ --type-nav: 13px/1.1/500/0; /* space and layout */ --space: 4 8 16 24 40 64 80 96; /* --spacing-1..8 at >= 576; below 576: 4 8 12 16 24 32 48 64 */ --container: 1280px; /* .module--content width 85% (90% at >= 992), max 80rem */ --grid-columns: 12 (content widths 4/6/8/10/12 of 12 at >= 992); --margin-mobile: 7.5% each side (85% width; 29px at 390); --gutter: 24px (est, grid gap var(--spacing-4)); --section-pad: 80px; /* .module padding top and bottom = --spacing-7: 80px at >= 576, 48px below; reduced variant 40px / 24px */ --layout-max: 1600px; /* legacy .layout max 100rem with 30px side padding */ /* shape */ --radius-button: 2em; /* 26px at 13px; hero 40px */ --radius-pill: 100px; --radius-card: 24px; /* spotlight and case cards; marquee tiles 16px; nav tiles 8px */ --radius-image: 16px; --radius-input: 10px (pricing contact select) / 0 (classic form fields); --radius-nav-item: 3px; --radius-badge: 3-4px; --border: 1px solid rgba(35,30,21,.3); --border-strong: 1px solid #231e15; /* depth */ --shadow-button-depth: 0 0.375em 0 0 #231e15; /* hover, plus 0 0 0 1px outline */ --shadow-card-rest: 0 4px 16px rgba(0,0,0,.06); --shadow-card-raised: 0 10px 50px rgba(0,0,0,.10); --shadow-case-card: 0 8px 64px rgba(35,30,21,.06), 0 4px 8px rgba(35,30,21,.04); --shadow-plan-card: 0 0 20px 3px rgba(35,30,21,.15); --shadow-tile: 0 15.5px 44px rgba(0,0,0,.086); --shadow-tile-hover: 0 8px 52px rgba(0,0,0,.25); --shadow-menu: drop-shadow(4px 8px 32px rgba(0,0,0,.16)); --elevation-shadow-color: rgba(35,30,21,.15); --blur-glass: none; /* motion */ --ease-spring: cubic-bezier(.5,2.5,.7,.7); /* button lift, overshoots */ --ease-soft-spring: cubic-bezier(.34,1.2,.64,1); /* arrow capsule return */ --ease-nav: cubic-bezier(0,0,0,1); /* header panels and overlay */ --ease-standard: cubic-bezier(.4,0,.2,1); /* carousels */ --dur-fast: 150ms; /* nav item, link colors */ --dur-base: 200ms; /* nav panels, tile shadow */ --dur-button: 300ms; --dur-card: 300ms; --dur-carousel: 400ms; --dur-reveal: 500ms; /* focus */ --focus-ring: 2px solid #4bc4c2, offset 2-6.5px depending on component (buttons 3.25px on a ::after that follows the pill); dark_mode: none FONTS display: Means Web, Mailchimp's proprietary custom serif (introduced with the 2018 rebrand, self-hosted woff2), weights 300, 400, 500 with italics; the site uses 400 for every heading, 400 italic for highlighted hero words, 300 in a few footer text spots; ligatures disabled (font-variant-ligatures none). License: proprietary. text: Graphik Web (Commercial Type, commercial license, self-hosted), weights 300, 400, 500, 600 with italics; 400 body, 500 buttons, nav and labels, 600 hero CTA and emphasis. also loaded: Tally (Mailchimp custom, 400/500/700) only in a .tally-preview test class, not used on the captured pages. alternative: Means -> Fraunces (Google Fonts) weight 400, opsz 72, SOFT 50, WONK 0 at the same size and tracking (checked in the rebuild: same line breaks and widths within a few px; Fraunces has slightly higher stroke contrast and a curlier ampersand); or Newsreader 400 if a calmer serif is preferred. Graphik -> Inter 400/500/600 at the same sizes with letter-spacing 0 (Graphik is a little wider). TYPOGRAPHY RULES Serif for every heading, section title, stat value, quote, mobile menu L1 item and select value; sans for everything else (body, nav, buttons, labels, tables). Headings sentence case, short (3-10 words), sometimes ending with an exclamation in pricing ("Try our Standard plan for free!"); text-wrap balance on the hero H1. Emphasis inside a heading uses one of three yellow devices: on photos italic #ffe01b words (hero; kept on one line only from 768px); on dark bands a #ffe01b box with #231e15 upright text, radius 3px, padding .06em .18em; on light bands an 8px #ffe01b underline under the word (text-decoration underline 8px #ffe01b). Body 14-20px on a 1.5 line-height; muted copy rgba(35,30,21,.65); legal 11px. Numbers in serif: stats (Means 48px), prices ("Free" Means 32px underlined in yellow, "$203.06" Means with a small superscript dollar). Links in running text are teal #004e56 500 and underline on hover; standalone links use the arrow link component; footer and legal links are underlined #231e15. COLOR RULES Page canvas is white; sections alternate white, #f5f5f5 jasmine and the dark #231e15 peppercorn band (stat band, final CTA, pricing "trusted leader" band); the footer is a mustard #e7b75f block preceded by a #f0f0eb or #f5f5f5 disclaimer band. Yellow #ffe01b covers under 5% of the page: primary buttons, arrow circles, check icons in plan lists, highlights, expanded cards, active carousel pills, the pricing helper banner. Teal is functional only: inline links #004e56, focus ring #4bc4c2. Photography carries all other color. Overlays: rgba(0,0,0,.25) veil on the hero photo; case-study photos fade to rgba(35,30,21,.82) at the bottom. LAYOUT container: .module--content = 85% of the viewport below 992px, 90% from 992px, max 1280px, centered (72px side margins at 1425px viewport width, 29px at 390); legacy .layout max 1600px with 30px padding; footer content max 1200px grid: 12-column logic expressed as content widths (4/6/8/10/12 of 12) at >= 992px; card grids 2 columns (gap 24px column, 40px row) from 768px, 1 below section rhythm: every module padding 80px top and bottom (48px below 576px); reduced modules 40px / 24px; consecutive modules with the same background collapse the top padding; section header to content 64px (40px mobile); no dividers between sections, color bands separate them density: comfortable; alignment: left aligned section headers with centered CTAs; compositions: full-bleed photo hero with centered text, 2-up card rows, dark statement band, peeking carousel, split text + side card (pricing), full-bleed marquee, centered final CTA band SHAPE AND DEPTH radius: pills on all buttons, tabs and pill nav (100px); 24px on large cards (spotlight, case study); 20px mobile stat cards; 16px images inside cards and marquee tiles; 10px pricing contact select; 8px integration logo tiles; 3-4px nav items, badges, marker highlights; 0 on the pricing plan card and comparison table borders: 1px #231e15 outline on every button; 1px rgba(35,30,21,.3) hairlines (accordion rows, pill nav, select); 1px #bcbab6 / #bcbab8 table and stats-pane borders shadows: buttons have only the hard depth slab on hover; cards use very soft wide shadows (6-10% black); the pricing plan card a 20px 15% warm glow; menus a 32px drop shadow materials: none (no blur); textures: a faint blurred glow shape on the dark stat band only COMPONENTS button-primary (.ctaPrimary): pill, bg #ffe01b, label #231e15 13px/19.5px Graphik 500, padding 12px 24px, height 44px, radius 2em, outline box-shadow 0 0 0 1px #231e15; hero size 15px/24px 600, min-height 48px, width 343px, radius 40px, label centered (flex center) hover: translateY(-0.375em) + box-shadow 0 0.375em 0 0 #231e15; transform and box-shadow 300ms cubic-bezier(.5,2.5,.7,.7) (Recipe cta-buttons) focus-visible: ring 2px #4bc4c2 offset 3.25px on ::after; :focus also lifts 1.6px with a 3.25px slab active: lift 1.625px, slab 3.25px; disabled: bg #dbd9d2, label rgba(35,30,21,.65), no outline, no pointer button-secondary (.ctaSecondary): same pill, transparent bg, label #231e15, 1px #231e15 outline; on dark bands label #ffffff; hover/focus/active as primary (dark slab under a transparent pill) button-dark: ctaPrimary with bg #231e15 and white label (case-study footer) button-small: padding 6px 16px (mobile header CTA 32px tall) arrow link (.ctaArrow): 16px/32px Graphik 400 #231e15, padding-right 40px, 32px #ffe01b circle with an 18px arrow; hover: text +4px right, circle stretches left into a capsule behind the text with the fakebounce keyframes 300ms; focus-visible: same plus ring 2px #4bc4c2; on dark bands text #ffffff (Recipe cta-buttons) text link: inline teal #004e56 500, hover #002023 underline, instant; .cta/.textLink and legal links: underlined #231e15, hover and focus rgba(255,224,27,.65) marker background with 3.25px spread, instant; focus-visible outline 2px #4bc4c2 offset 6.5px card (spotlight): white, radius 24px, shadow 0 4px 16px rgba(0,0,0,.06), padding 48px; hover expands and turns yellow (Recipe spotlight-cards) card (case study): radius 24px, white, photo + stats pane (Recipe p23-carousels) card (pricing plan): white, radius 0, shadow 0 0 20px 3px rgba(35,30,21,.15), padding 24px 16px (Page: pricing) tile (integration): 414 x 112px, radius 16px, shadow 0 15.5px 44px rgba(0,0,0,.086), hover shadow 0 8px 52px rgba(0,0,0,.25) 200ms (Recipe marquees) input (.formInput): underline style, no box: border-bottom 1px #231e15, padding 20px 0, Graphik; error border #f25f25; focus not measured, est 2px #4bc4c2 outline select (.formSelect): Means 24px value, custom 19 x 11px chevron; pricing contact select: 46px, 1px rgba(35,30,21,.3) border, radius 10px, label "Contacts" Graphik 13px left, value Means 18px right, chevron 16px radio option rows (pricing): bordered boxes 1px rgba(35,30,21,.3), radius 8px (est), 20px radio at the right, selected radio filled #231e15 ring tabs / segmented control: pill group with 1px rgba(35,30,21,.3) border, radius 100px, padding 8px; tab padding 12px 20px, 13px/500; selected bg #231e15, label white (hover #39352c); unselected hover bg rgba(35,30,21,.05) 150ms; focus-visible outline 2px #4bc4c2 offset -4px badge (offer chip): dark pill "Try free" (#231e15, white 13px 500, radius 100px, padding 6px 12px) inside a white pill group with a 1px rgba(35,30,21,.3) border; square badge: #e7b75f, radius 4px, 500, shadow 0 2px 4px rgba(0,0,0,.13), 0 0 1px rgba(0,0,0,.11) accordion (FAQ): rows separated by 1px rgba(35,30,21,.3) top borders, question Graphik 24px/32px 400, padding 24px 0, 32px yellow circle with a black plus at the right that turns into a minus when open; hover underlines the question; open and close instant (display toggle) check list icon: 20px #ffe01b circle with a dark check (plan lists); 16px dark check circle (spotlight bullets) carousel pills: 8px dots / 40 x 8px capsules #403b3b at .4, active 1; on dark: 8 x 36px vertical bars #bcbab6, active 8 x 52px #ffe01b (Recipe p23-carousels) spinner, skeleton, toast: not seen; modal: a survey modal exists (hidden); tooltip: info tooltips on dotted-underlined labels in the pricing table GLOBAL CHROME header: sticky (top -1px), 68px tall (60px below 751px), z 500, transparent until hovered, focused, opened or stuck, then #ffffff (200ms); logo (Freddie + "INTUIT mailchimp" wordmark) 142 x 46 at left 16px; nav labels 13px/500 #231e15 with chevrons; search, language picker, sales phone, Log In (secondary) and Start Free Trial (primary) at the right; click-open mega-menus with clip-path wipe (Recipe nav-mega-menu) above the header: Intuit family bar 29px (Intuit, QuickBooks, Mailchimp wordmarks #575757, brand-colored on hover) and on home a #231e15 promo strip 42px with 13px white text and a dashed-underlined link (hidden below 768px) mobile header and menu (nav collapses below 1100px; header 60px below 751px): logo, compact yellow Start Free Trial (32px) and a burger; menu is a 350px white sheet sliding in from the right in 200ms with Means 20px L1 items and chevrons, utility links, full-width Log In and Start Free Trial pills and Intuit wordmarks; deeper levels slide over with Back (Recipe nav-mega-menu) footer: preceded by a disclaimer band (#f5f5f5 or #f0f0eb, 11px legal list); footer bg #e7b75f, padding 60px 0 (40px mobile); "Related Links:" list (16px heading, 14px underlined links) then a 1px rgba(35,30,21,.3) rule; 5 link columns (Products, Resources, Community, Company, Help) max 1200px: headings Graphik 18px 400 #231e15 (est), links 14px underlined #231e15 with 16px row gaps (est); rule; centered Intuit family wordmarks; app store badges, social icons (Facebook, X, Instagram, LinkedIn, YouTube, Pinterest) and a GDPR badge (not always loaded); bottom row: language select (boxed, 1px #231e15 border, 200 x 40px) and 12px copyright with bold underlined Privacy | Terms | Legal | Cookie Preferences; mobile: single column of groups, wordmarks wrap 2 per row other: cookie consent dialog (OneTrust, third party): dark #231e15 panel bottom-center, white 16px text, "Customize settings" outlined white pill and "Dismiss" yellow pill; "Chat with Sales" floating black pill at bottom right (LivePerson, third party); "Feedback" vertical tab at the right edge (Qualtrics, third party) IMAGERY AND ICONS hero media: full-bleed lifestyle photograph (a person at a desk with the product UI on screen), warm natural light, object-position center 15%, darkened by a 25% black veil; separate 390 x 844 mobile crop photography: candid small-business owners at work (studios, shops, events), natural warm grading, people visible; case studies use strong editorial portraits and event photos product visuals: UI fragments as rounded cards: email templates, phone mockups with SMS, small analytics cards, set on tinted squares (cream, est #e9e0cf) with 16px radius illustration: none on the 2026 pages; small line icons only icons: custom thin line icons (about 1.5px stroke, 32px in cards, 22px in menus), dark #231e15; arrows in yellow circles; check marks in circles logos: customer wordmarks in black (logo strip); third-party review badges (Capterra, TrustRadius, G2) in color on the hero; partner app logos in tiles density: image-led hero, then balanced text and UI cards MOTION intensity: expressive (springy micro-interactions, auto-advancing carousels, marquees), no scroll-scrubbed storytelling model: CSS transitions and keyframes plus small JS (React for spotlight and carousels, IntersectionObserver) hover policy: buttons lift with an overshoot (300ms cubic-bezier(.5,2.5,.7,.7)); arrow links stretch their yellow capsule (300ms fakebounce); nav items and menu links get a 5% grey fill (150ms); text links get a yellow marker (instant); cards grow and turn yellow (300ms ease-in-out with a text opacity dip); marquee tiles deepen their shadow (200ms); carousels brighten the active card and scale it 1.015 scroll reveal: carousels fade up from 2.4em (500ms ease-out at 10% visibility); the integrations header fades up 24px (500ms) and its rows fade in with 150/250/350ms delays; nothing else animates on scroll signature motion: 1) lift-and-depth buttons and stretching arrow links (Recipe cta-buttons); 2) expanding yellow spotlight cards (Recipe spotlight-cards); 3) clip-path mega-menu wipe (Recipe nav-mega-menu); also auto carousels (Recipe p23-carousels) and drifting marquees (Recipe marquees) page transitions and loading: hard page loads, smooth scrolling for anchors (scroll-behavior smooth); no skeletons seen reduced motion: buttons lift only 3.25px (400ms), arrow links swap to a full yellow background without bounce, cards do not expand, carousels swap instantly, marquees become static grids, menus only fade RESPONSIVE >= 1422: type at max sizes (H1 48px, H2 40px, hero 64px) 1200-1421: H1 3.3vw, H2 2.75vw 1100-1199: full desktop nav; nav items hide progressively by container width (Switch to Mailchimp hides first) 992-1099: container 90%; desktop grids; nav collapses to the burger below 1100 (est from data-hide-medium) 768-991: container 85%; hero H1 48px centered; 2-column card grids; spotlight cards become a horizontal swipe carousel (<= 992) 576-767: H1 6vw, H2 5vw; promo strip hidden; plan cards stacked; header 60px below 751 < 576 (390): spacing scale shrinks (module padding 48px); hero H1 36px left aligned, CTA full width at the bottom of the hero; H2 29.25px; stat band becomes swipeable outlined cards; case cards stack photo over stats; marquee tiles 290px and slower; footer single column CONTENT AND VOICE headline style: friendly benefit statements, 4-9 words, sentence case, sometimes playful twists ("Email & SMS marketing minus the learning curve", "Recommended for your business", "Businesses like yours are thriving with Mailchimp") body: one sentence of 10-20 words; proof via big numbers with footnote asterisks and disclaimers tone: approachable, confident, small-business friendly CTA labels: "Start Free Trial", "Log In", "See pricing", "Request demo", "See all plans", "Find the right plan", "View all case studies", "Read the case study", "View all integrations" case and punctuation: Title Case on buttons, sentence case elsewhere; asterisks and daggers for legal footnotes SUBSTITUTIONS fonts: Fraunces (or Newsreader) for Means, Inter for Graphik; logo: [LOGO] placeholder with a round mascot mark and a two-line wordmark; photos: original lifestyle photos of small-business owners with a 25% black veil; UI cards: original neutral email/phone mockups on cream squares; customer and partner logos: [LOGO] text placeholders; icons: Lucide or Phosphor thin line icons at 1.5px stroke TECH server-rendered pages ("plums" platform) with Contentful entries (data-entry-id), webpack chunks under /release/plums/ with React islands (spotlight grid, carousels), LESS-compiled CSS per module, Optimizely and in-house experiments (body classes such as dt-2355-..., funi-1090-...), OneTrust cookies, Qualtrics feedback, LivePerson chat SCREENSHOTS - file: mailchimp_2026_home_d1440_top.jpg shows: home first screen at 1440x900 (1425 wide with scrollbar), scroll 0: Intuit bar 29px, #231e15 promo strip 42px, transparent 68px header, full-bleed photo hero with 25% veil, white Means H1 64px with yellow italic second line, 20px white subline, 343 x 48 yellow pill CTA, stars + review badges source: live https://mailchimp.com/?currency=USD 2026-10-06 (direct, region JP, see header) key values: CTA #ffe01b with 1px #231e15 outline, radius 40px; header buttons 44px pills 13px/500 do not copy: logo, photo, review badges - file: mailchimp_2026_home_m390_top.jpg shows: home first screen at 390x844 @2x: 60px header with compact yellow CTA and burger, left-aligned 36px hero H1 with yellow italic, rating, full-width CTA at the bottom of the hero - file: mailchimp_2026_overview_d1440_states.png shows: state sheet (2x crops): hero CTA default / hover (lift + depth) / focus-visible (2px #4bc4c2 ring); header Log In and Start Free Trial default, primary hover (lifted on a #231e15 slab), secondary hover, secondary focus; nav items default (transparent), hover (white header, 5% fill), focus-visible; arrow link default / hover (yellow capsule) / focus; Request demo + dark Start Free Trial default and hovers - file: mailchimp_2026_overview_m390_menu-open.jpg shows: mobile side panel open: 350px white sheet over a dimmed page, Means 20px items with chevrons, Search, language, demo phone, Log In and Start Free Trial full-width pills, Intuit wordmarks - file: mailchimp_2026_overview_m390_menu-l2.jpg shows: second level "Industries and Solutions": Back, Means 20px title, Industry and Solutions groups with chevrons, aux links REBUILD CHECK result: passed 2026-10-06 after two fixes. A plain HTML page with the Intuit bar, promo strip, header, hero and the first spotlight card row, built only from these memos with Fraunces (opsz 72, SOFT 50) and Inter from Google Fonts, a dark gradient instead of the photo and placeholder logos and badges, was screenshotted at 1440 and 390 and compared side by side with the live captures. Matched: header height and button sizes, hero H1 size, line breaks and yellow italic line, subline, CTA size and position, social proof spacing, section color, H2 metrics, card row height, radius, padding and bullet fade. Fixed in the memos: the gap from the section H2 to the card row is 64px (was 80px); the hero em keeps white-space nowrap only from 768px, so on mobile the yellow phrase wraps after "marketing"; the mobile hero CTA label is centered. Remaining known differences: Fraunces has slightly more contrast than Means and a different ampersand; the photo and UI mockups are placeholders. Not rebuild-checked: carousels, marquee, pricing page.