Coda

Item: Coda
Rating: 7.4

All-in-one collaborative doc workspace, now Superhuman Docs.

7.4/10MABTU rating

DESKTOP · 1440 × 17,398/ ↗

MOBILE · 390

Section outline · Home

01bannerOrange top bar and lilac rebrand notice900
02heroPeach band, bold headline, framed product UI
03logosCustomer logo row
04storyPinned scroll text reveal with progress bar
05pressSky-blue quote band
06featureHighlighted list beside product frame
07featuresUse-case rows with Replaces icons
08featuresThree AI cards and workflow block
09templatesTeam tabs with template preview
10ctaQuote card, pricing CTA, cream footer

Rating · Home

Visual design7.6

UX & clarity7.6

Originality7.2

Craft & consistency7.2

Motion7.0

Performance & a11y7.7

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

Main colours

Light·white background·muted

Typography

Calibre-Rheading · font · self-hosted Interbody · sans · self-hosted Super Sansaccent · sans · self-hosted

Stack & style

Sanity

Minimal Bold typography Corporate / clean Rounded / soft Product-UI-led Logo cloud Pinned sections Sticky header Tabs Text reveal

Also: OneTrust, Amazon CloudFront

Design DNA

Cream and peach bands with a heavy black grotesk for headlines and orange highlights on numbers ('50,000+ teams'). Product UI sits in white browser frames with thick black bottom-right shadows. A lilac rebrand notice precedes the peach hero, a pinned scroll narrative ('We're overwhelmed with the work about work'), a sky-blue press quote with stacked app icons, a 'Coda blends' list that highlights one line at a time, four use-case rows with 'Replaces' icon strips, AI cards, team template tabs and a peach quote card.

Worth borrowing

Frame every product screenshot with a thick offset black shadow for a tactile look.
Under each use case add a 'Replaces' row of the tool icons it retires.
Highlight one line at a time in a vertical list as the user scrolls a pinned section.