Mailchimp

Palette

Typography

Headings

Means Web

Body

Graphik Web

Free swap

Means → Fraunces or Source Serif 4 (use italic for the accent line); Graphik → Inter or Figtree.

H1 is 64px Means, weight 400, line-height 1.2, -1.9% tracking, sentence case, set on two lines: the first roman in white, the second italic in #ffe01b for a conversational punchline. H2 is 40px Means 400, line-height 1.0, -1.2% tracking. H3 drops to Graphik 23px/1.3 weight 400, so the serif is reserved for the two biggest levels only. Body and UI text are Graphik 13–20px at weight 400–500 (hero subhead ~20px, nav ~14px medium, utility bar ~13px). No uppercase and no heavy weights; hierarchy comes from the switch between serif and sans plus size, not boldness.

Measured h1: 64px / 400 / -0.019em · body 13px

Signature moves

• Split the headline into a roman setup line and an italic serif punchline in brand yellow.
• Use one saturated accent, #ffe01b, only on primary CTAs and key emphasis; everything else is warm brown-black, white or grey.
• Replace pure black with a warm peppercorn (#231e15) for bars, text and borders so dark areas feel organic rather than techy.
• Place the product inside a real-life photo (a monitor in a workspace) instead of a floating screenshot, and darken it so it reads as context, not detail.
• Put social proof (star row plus review-platform logos) directly under the hero CTA, inside the hero.
• Use a small circular yellow arrow as the affordance on secondary links.

Layout

Centered 1280px max content width on a 1440 canvas. Stacked bars: a thin white Intuit family strip, a dark #231e15 promo bar with centred 13px white text and an underlined link, then a white sticky nav. Below that, a full-bleed hero (~530px) with a darkened photo and centred text, CTA, star rating and review logos in a single vertical column. A dark #39352c band with a two-column divided product-tour prompt follows, then alternating #f5f5f5/#ededed/white sections. Spacing is generous vertically and everything in the hero is centre-aligned.

Components

Primary button

#ffe01b fill, #231e15 Graphik medium text, fully pill-shaped (26px radius), ~48px tall; the hero version is wide (~285px) for emphasis.

Secondary button

White pill with a 1px #231e15 border (rendered as a 0 0 0 1px shadow) and dark text, used for Log In next to the yellow trial pill.

Navigation

White bar with the logo at left and Graphik 14px medium links with chevrons for dropdowns. A right cluster holds a search icon, globe/EN selector, a phone number in plain text, and Log In / Start Free Trial pills. No borders or shadows.

Promo bar

Full-width #231e15 strip with centred white 13px copy and a dotted-underlined 'Start today.' link.

Hero

Full-bleed lifestyle photo under a heavy dark overlay. A centred two-line serif headline (white roman, yellow italic), a white 20px subhead, a yellow pill CTA, then a 4.5-star row in yellow with review-site logos (Capterra, TrustRadius, G2) in white.

Demo band

#39352c strip with a yellow-tinted (#fff7c1) title, a white subline, a thin vertical divider, and a 'See all demos' link ending in a yellow circular arrow icon.

Cards

16–24px radii on white or #f5f5f5 with soft diffuse shadows (0 15px 44px rgba(0,0,0,.086)) or a 1px warm-stone border.

Product UI

The hero shows the UI only indirectly: an 'Automation Flows' screen appears on a monitor in the photo, softened by the dark overlay. It reads as a light, white-canvas app with a sidebar, card thumbnails and modest density. For app screens in this style, use white surfaces, warm-stone (#dbd9d2/#bcbab6) 1px borders, #231e15 text, teal (#004e56) for links, yellow reserved for the single primary action, pill buttons, and 16px-radius cards with soft shadows.