Inside the Different website design
Different is a marketing website built with Webflow and GSAP. Its pages are built from hero, features, footer, CTA, feature grid, testimonials, and blog sections, shown here in full-page captures and a scroll recording. Typography: Feature Display (display text and headings), PP Neue Montreal Text (body text), and PP Fraktion Mono (monospaced text). Colours: background #FFFFFF, text #000000, main buttons #121212, surface #FFE28B.
Different is the AI marketing system that runs B2B demand gen end to end: build, launch and optimize campaigns across email, ads and landing pages. Its visual style is editorial, illustrative, and minimal, with navigation bar, hero with background imagery, and logo strip among its components.
Why we picked it
A painterly hot air balloon drifting over dark red mountains sets a storybook mood, while large serif headlines with italic accents carry the metaphor down the page. Short text blocks, roomy white space, and a colourful illustrated skyline between sections break up the pitch and make it easy to read in chunks.
What to look for
- Hero: a specific headline instead of a generic slogan
- Features: benefits framed around what the user gets, not internal capability names
- Footer: grouped navigation with clear column headings
- CTA: a short restatement of the main benefit
Questions designers ask
What fonts does Different use?
Different uses Feature Display for display text and headings, PP Neue Montreal Text for body text, and PP Fraktion Mono for monospaced text, measured from the captured page's CSS.
What is the Different website built with?
The Different website is built with Webflow and GSAP, detected when the page was captured.
What colours does the Different website use?
Measured from the captured page's CSS, the Different website uses #FFFFFF for the background, #000000 for text, #121212 for main buttons, and #FFE28B for surfaces.
What sections does the Different website have?
The Different website includes hero, features, footer, CTA, feature grid, testimonials, and blog sections. Each one opens on its own page, so you can compare it with the same section on other websites.
