Devin
devin.ai/
Devin is an AI agent sold as a software engineer that plans and executes engineering tasks alongside a human team, from PR review to legacy-code migration (COBOL, .NET, Talend, ETL) to on-call incident triage. Rather than opening with statistics, the homepage is organized entirely around named use cases — 'PR review & visual QA,' 'code migration & refactoring,' 'scheduled automation' — each described as a job to hand off rather than a feature to enable. It emphasizes 'complete auditability at each step' over speed claims, and pairs that with a long integrations list (GitHub, Linear, Slack, AWS, Datadog) rather than customer logos as its main trust signal. No user counts or performance numbers appear anywhere on the page.
- Category
- Engineering & Infrastructure
- Style
- LightMinimal
- Stack
- Next.jsTailwind CSS
- Fonts
- nbInternationalPro
- Palette
- Meta title
- Devin | The AI Software Engineer
- Sections
- 5
- Updated
Devin's landing page, section by section
Each section below is cropped straight from Devin's live page — useful references for engineering & infrastructure landing page design.
Devin design review: how the homepage is built
The desktop homepage runs 8,369 pixels on an off-white ground, with near-black buttons carrying every call to action and a saturated indigo used for one accent word per heading. Top to bottom it stacks a product window, a customer logo wall, a use-case grid, a dark section titled "Learn & work together", a tool-logo mosaic and a closing band. Headings use nbInternationalPro. The page is light and minimal, and the hero shows the working interface in full rather than an illustration. The product window labels its workspace "Cognition", so the page presents Devin under that name.
Above the fold
The first screen carries a dark pill reading "Introducing Security Swarm", the headline "Devin, the AI software engineer" and two buttons, a black "Try Devin" and an outlined "Contact sales". Beneath them sits a large product window with a session sidebar listing "Sessions", "Ask", "Wiki" and "Review", a chat pane titled "Migrate gradient text", and a report card headed "Test Report: Migrate Gradient Text" with before-and-after tiles reading "Secure, Private".
Customer logos and use-case cards
Under "Industry leaders choose to", the heading "Build with Devin" sits over a black "Hear from our customers" button and a grid of 25 grey logo tiles, including Citi, Goldman Sachs and NASA. "Use cases" follows on a pale grey field with six cards: "PR review & visual QA", "Code migration + refactors", "Issue triage + bug fixing", "Scheduled chores and application development", "Documentation" and "And many others". Several cards add an inset screenshot of a code diff or Slack thread.
Dark workflow section and tool mosaic
"Learn & work together" opens a dark section with a "COLLABORATE" tag and three panels: "Works where your team works", "Learns your codebase & picks up tribal knowledge" and "Multi-week, multi-repo projects". Below it, "Able to work with hundreds of tools" sits over a staggered mosaic of pale tiles, closing on three larger tiles for GitHub, Linear and Slack.
Closing section and footer
"Build more with Devin" sits beside a black "Get started" button, and a grey card asks "Need Devin for your enterprise?" with a "Learn about Devin Enterprise" link. The footer is a short row of links, "Privacy policy", "Terms of service" and "Your privacy choices", followed by "Linkedin" and "X (Twitter)" on the right. The closing band reuses the black button style from the hero, so the last call to action matches the first.
On mobile
At 390px the headline breaks onto two lines and the product window shrinks to a single chat pane. Use-case cards stack into full-width blocks, with the shorter "Documentation" and "And many others" cards in the same column. The dark section becomes one column, and the tool mosaic compresses to three columns. Footer links drop into one vertical list beneath the enterprise card.
Worth borrowing
- Showing the working product interface in the hero, rather than an illustration, sets expectations at first glance.
- Use-case cards that pair a short bullet list with an inset screenshot make each capability concrete.
- Grey logo tiles on a uniform grid keep many customer names visible in one compact block.
