Developer Tool references

28 deeply-analysed developer tool sites, 20 flagship-tier. Each carries the design tokens, the do and don't rules, the signature moves and the section anatomy, so an AI builder grounds a developer tool brief in how the best sites actually build it (home, product, service detail, pricing, blog, case study, about, article).

Screenshot of Adaline

Adaline

strong

Developer Tool

an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.

Screenshot of Anthropic

Anthropic

flagship

Developer Tool

a warm ivory-and-slate site where editorial serif typography, a single clay accent, and unhurried 0.8s expo reveals reframe AI as a humanist research practice rather than a product to sell.

Screenshot of Arc

Arc

strong

Developer Tool

a Next.js product site that turns electric ultramarine (`#3139fb`), a peach-cream wash (`#fffcec`), and the bespoke Marlin display face into a confident brand-announce moment - "Meet Dia" - where every other site decision exists to give the colour and the new product name room to land.

Screenshot of Astro

Astro

flagship

Developer Tool

The reference for a developer-tool hero that floods the whole viewport with one violet-to-magenta nebula gradient (linear-gradient(83.21deg, #3245ff, #b845ed)) under heavy white display type, so the page reads as a single bloom of brand colour rather than the usual near-black dev-docs dark theme.

Screenshot of Authkit

Authkit

flagship

Developer Tool

The reference for a midnight-blueprint dev-tool hero: near-black #05060f canvas, a faint hairline grid with corner crosses, a soft top-down spotlight beam, and a giant pale-blue gradient wordmark floating above a glassy login card.

Screenshot of Cal Com

Cal Com

strong

Developer Tool

The reference for open-source dev-tools brand at peak typographic confidence - Cal Sans 64px H1 on pure white, real booking widget in hero, prestige customer logos.

Screenshot of Claude

Claude

flagship

Developer Tool

The reference for making an AI product feel like a literary press: ink-black serif headlines on a warm ivory canvas (#faf9f5), colour rationed to a single persimmon mark, depth built from hairline borders instead of shadows.

Screenshot of Cursor

Cursor

strong

Developer Tool

a Next.js / Tailwind developer-tool site where a bespoke CursorGothic on warm-light cream (`#f7f7f4`), EB Garamond paragraphs for editorial moments, and 0.14s expo micro-animations make a coding-agent product feel like a quietly-confident research lab rather than a SaaS landing.

Screenshot of Dub

Dub

strong

Developer Tool

The reference for open-source link-attribution platform - pure black/white monochrome with Satoshi + Inter, real dashboard hero, dotted-grid integration map, 48-keyframe motion library.

Screenshot of Elevenlabs

Elevenlabs

flagship

Developer Tool

The reference for an achromatic warm-paper product page where colour is banned from the UI and survives only as gradient orbs (violet #0447ff, ember #ff4704) that read as sound made visible.

Screenshot of Framer

Framer

flagship

Developer Tool

the website builder demonstrating itself - a dark, bento-led showcase built in Framer and animated by Framer Motion, where the site IS the product pitch.

Screenshot of Github

Github

flagship

Developer Tool

The reference for a midnight-indigo developer hero where a violet radial aurora and floating 3D characters do all the colour work while white Mona Sans display type stays compressed and quiet.

Screenshot of Gsap

Gsap

strong

Developer Tool

a near-black product site where a 101px "Animate anything" headline in the bespoke Mori sans on creamy off-white (`#fffce1`) and 3D liquid-form objects animated by GSAP itself make the homepage the most credible product demonstration in the JavaScript-animation category.

Screenshot of Hugging Face

Hugging Face

flagship

Developer Tool

The reference for letting a single warm-yellow mascot (🤗 on #ffd210) and one dark #101828 panel carry all the brand warmth while everything else stays in spreadsheet-dense grayscale.

Screenshot of Jetbrains

Jetbrains

flagship

Developer Tool

The reference for a deep-space blue hero: a near-black ground lit by a single radial cobalt glow (rgba(0,71,253,0.8)) behind a 72px+ white JetBrains Sans headline, with a real product screenshot floated centre-stage and hot pink (#f31199) reserved for the logo alone.

Screenshot of Linear

Linear

flagship

Developer Tool

the restraint benchmark - a dark, near-monochrome product site where one indigo accent, crisp 0.16s motion and an animated dot-grid do all the work, and nothing is wasted.

Screenshot of Mapbox

Mapbox

flagship

Developer Tool

The reference for a near-black developer platform that lets a single signal blue (#007afc) and a glowing map-tile embed do all the talking on a #0e1012 void.

Screenshot of Osmo

Osmo

flagship

Developer Tool

The reference for oversized black Haffer display type on a concrete #f4f4f4 canvas, cut by three surgical accents (volt lime #a1ff62, ultraviolet #6840ff, vermillion #f84131) and a fan of tilted product cards.

Screenshot of Posthog

Posthog

strong

Developer Tool

personality as the strategy - a warm, cream-toned developer-analytics site that leans hard into a hedgehog mascot, playful animation and quirky copy to feel human in a sterile category.

Screenshot of Railway

Railway

flagship

Developer Tool

The reference for making a dev-tool feel calm rather than intense: a near-black cosmic ground (#13111c) under a painterly starlit hero illustration, an IBM Plex Serif headline, and a single lilac (#553f83) action.

Screenshot of Replicate

Replicate

flagship

Developer Tool

The reference for floating one full-bleed sunset gradient (magenta #ff6bfc to ember #ea2804 to gold #f6f47f) behind a flat white developer-product page, with live syntax-highlighted code cards sitting inside the marketing layout, not the docs.

Screenshot of Resend

Resend

flagship

Developer Tool

developer-tool minimalism done to the highest finish - a near-black, code-forward site where a precise type system and quiet, fast motion make an email API feel like craftsmanship.

Screenshot of Supabase

Supabase

strong

Developer Tool

open-source developer infrastructure made warm and confident - a light, Circular-set product site where one signature green and code-forward proof carry a Postgres platform.

Screenshot of Svelte

Svelte

flagship

Developer Tool

The reference for an editorial broadsheet developer-tool landing page: serif display headlines on pure white with one ember-orange accent (#d43008) and arrow-link CTAs instead of boxed buttons.

Screenshot of Tailwind Css

Tailwind Css

flagship

Developer Tool

The reference for letting type scale carry the whole hero: 96px near-black ink (#030712) headline on bare white, with colour banished to inline code syntax only.

Screenshot of Ui

Ui

flagship

Developer Tool

The reference for a strictly monochromatic, border-first component system where hairline #e5e5e5 dividers do all the structural work and a single filled-black button is the only accent on a pure-white canvas.

Screenshot of Vercel

Vercel

flagship

Developer Tool

engineered minimalism - a near-monochrome light site where a geometric grid, the in-house Geist typeface and tightly-tracked bold headings make "developer tool" feel like precision hardware.

Screenshot of Xai

Xai

flagship

Developer Tool

The reference for treating a single glowing wordmark as the only light source in a near-black void (#0c0c0b), with whisper-thin 400-weight type and one electric-blue (#2563eb) focus accent.

Back to the full collection