Coder

Item: Coder
Rating: 7.5

Self-hosted development environments and governance for AI coding agents.

7.5/10MABTU rating

DESKTOP · 1440 × 8,707/ ↗

MOBILE · 390

Section outline · Home

01heroIridescent rounded panel, two-line headline, two pill buttons, whitepaper bar1,170
02logo cloudMono caption, five monochrome logos
03statementLarge paragraph with greyed second half on black
04diagramIsometric purple tile stack with labelled product layers, two buttons
05feature rowsAgents, Governance, Workspaces rows with gradient-framed screenshots3,232
06ctaSlim download banner
07case studiesCustomer outcome cards: DoD, Dropbox, Palantir, Discord
08testimonialPsiQuantum quote on grey with purple bracket mark
09resourcesThree article cards with small carousel arrows659
10ctaTyped headline with block cursor, two small buttons
11footerFour link columns, social icons, compliance badge

Rating · Home

Visual design8.0

UX & clarity7.6

Originality7.6

Craft & consistency7.8

Motion6.5

Performance & a11y7.7

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

Main colours

Light·white background·muted

Typography

Lay Groteskheading · sans · self-hosted Lay Groteskbody · sans · self-hosted

Stack & style

Next.js DatoCMS Tailwind CSS React

Minimal Corporate / clean Gradient-heavy Monochrome Dark tech Product-UI-led Hero video Logo cloud Sticky header Text reveal Transparent header

Also: HubSpot, Hotjar, Cloudflare, Google Analytics, Google Tag Manager, Vercel

Design DNA

White top with a rounded panel of soft lilac, peach and silver iridescent light holding a two-line grotesk headline and black pill buttons, a black whitepaper bar with a pixel dither edge, and a monospace caption over monochrome customer logos. The page then drops into a long black band: a large statement paragraph with the second half greyed, an isometric purple tile stack diagram, and alternating product rows whose screenshots sit on purple-gradient frames. Light grey case-study cards, a big quote with a purple bracket mark, and a closing line typed out with a block cursor.

Worth borrowing

Write a long statement headline and grey out its second half so the key clause reads first.
Use a square block cursor after the wordmark and closing headline as a recurring brand motif.
Frame dark product screenshots on the same iridescent gradient used in the hero for continuity.