Skip to content
BetaFree MCP server
different.ai/ (opens in new tab)
Different full landing page screenshot (desktop)

Different

different.ai/

Different is a Marketing product. See its different.ai landing page design in full — desktop and mobile screenshots plus close-ups of the heroes, features, footers, testimonials, ctas, and 4 more. It's built with Webflow. Its type is set in Feature Display, anchored by a #47181b palette. Study how Different structures its messaging, layout and visual hierarchy, then explore more of the best Marketing website designs.

Category
Marketing
Style
DarkColorful
Stack
Webflow
Fonts
Feature DisplayPP Neue MontrealPP Neue Montreal Text
Palette
Meta title
Different | The AI Marketing System for Lean B2B Teams
Sections
9
Updated

Different's landing page, section by section

Each section below is cropped straight from Different's live page — useful references for marketing landing page design.

Different design review: how the homepage is built

The page opens on a full-bleed illustrated hero of hot-air balloons over red mountains, then moves to a white problem statement, a solution turn, a wide blue city illustration, a logo row, three process cards, a testimonial carousel, three articles and a split closing block. The desktop capture is 6579px tall. Colour comes almost entirely from the engraved-style artwork, a maroon ground near #47181b with coral balloons near #f37747, while text sections stay black on white. Feature Display sets the large serif headlines and PP Neue Montreal Text the body.

Above the fold

White text sits directly on the illustration: a serif wordmark at left, three dropdowns ("Product", "Resources", "Company") centred, and a white "Book a demo" pill at right. An outlined pill, "Announcing our $48M seed round", tops the two-line headline, with its last word in italic. A three-line subhead leads to a white "Book a demo" pill and an underlined "Watch the film" link. Two passengers ride in a basket at right.

Sandbag problem, the turn and logo row

The left balloon's ropes run past the hero edge into white space, ending in five sandbags beside "Building that world gets weighed down by tedious tasks and tools." The metaphor then flips with a centred "There's a different way." and a black "Book a demo" pill. A blue illustration of a café overlooking a green city follows, then a row of seven customer logos from Motif to ArmorCode.

Three-step cards and story carousel

On a grey band, "AI that runs your demand gen, end to end." heads three white cards labelled "01 CREATE", "02 ORCHESTRATE" and "03 OPTIMIZE". Each pairs a cropped campaign UI and an ornamental icon with a serif title such as "Run your world from one place." and an arrow link like "See how creation works". "See how lean teams are building big worlds." introduces tall cards alternating video and flat-colour quote panels, each tagged "EXPLORER", "CRAFTER" or "DETECTIVE".

Closing section and footer

"Field notes from our world." shows three dated article cards with illustrated thumbnails and "Read article" links, plus "Read all field notes" at top right. The closing block splits in half: "Ready to build your world, differently?" with a black "Book a demo" and "Watch the film" on the left, and a tree-house village illustration on the right. A two-row footer centres a circled monogram between link groups.

On mobile

At 390px the page runs to 8405px. The headline wraps to two short lines and "Book a demo" becomes a full-width white bar with "Watch the film" below it. Logos wrap into three rows. The three process cards stack, the story carousel shows one card with a peek of the next, articles stack singly, and the footer centres three short link rows around the monogram.

Worth borrowing

  • Letting the hero balloon's ropes cross into the next section and end in sandbags turns the problem statement into part of the illustration.
  • Tagging each customer story with a persona such as "EXPLORER" or "DETECTIVE" gives a testimonial carousel a collectible feel.
  • One engraved illustration style across hero, articles and closing block holds a long page together.
Webclaw landing page design
Webclaw
Engineering & Infrastructurewebclaw.io/
Attentive landing page design
Attentive
Marketingattentive.com/
Interakt landing page design
Interakt
Marketinginterakt.shop/
Amp landing page design
Amp
Engineering & Infrastructureampcode.com/
Typeform landing page design
Typeform
Marketingtypeform.com/
Langchain landing page design
Langchain
Engineering & Infrastructurelangchain.com/