Ditto

Item: Ditto
Rating: 7.8

Content system for writing, managing and shipping product copy.

dittowords.com Save page

7.8/10MABTU rating

For Content Designers

Other

DESKTOP · 1440 × 8,346/ ↗

MOBILE · 390

Section outline · Home

01heroCentred headline with yellow highlight, two buttons
02logosCustomer logo row
03problemCentred statement with isometric system diagram
04integrationsMarquee and colour-blocked bento on black1,186
05featuresAlternating colour-framed UI rows2,433
06statsOrange band with 70% / 40hrs / 20% and quotes661
07ctaBlack band, links, giant wordmark footer449

Rating · Home

Visual design8.0

UX & clarity7.6

Originality8.0

Craft & consistency7.6

Motion6.5

Performance & a11y9.0

This page scores 7.8; the site score weights the home page double.

Main colours

Mixed sections·off white background·vivid

Typography

Arialheading · sans · system Arialbody · sans · system

Stack & style

Next.js React Tailwind CSS

Bold typography Playful Bento Product-UI-led Bento grid Logo cloud Marquee Stats band Sticky header

Also: Intercom, Google Tag Manager, Vercel, Google Analytics

Design DNA

Off-white canvas with a clean grotesk for headlines, a yellow marker highlight on the key phrase and a striped pixel-slab DITTO wordmark. An isometric diagram of blocks joined by an orange pipe explains the system. A black band with an 'Integrates Everywhere' marquee holds a bento of saturated tiles (butter yellow, orange, purple, olive green) mixing app icons and code snippets. Feature rows pair square colour-coded bullets with framed UI in matching tints, an orange stats and quote band follows, and a black footer ends on a huge white wordmark.

Worth borrowing

Highlight the key phrase of the hero headline with a flat yellow marker block.
Build the integrations band as a bento of saturated flat tiles with app icons and code.
Colour-code each feature with a small square bullet that matches its UI frame.