Readme
readme.com/
ReadMe is a documentation platform for building API reference docs, combining a WYSIWYG editor, Git sync, AI-assisted writing, interactive API references, and analytics on how developers actually use the docs. Its headline, "Build docs that developers love and AI can actually read," frames the product around a problem specific to this moment — documentation legible to AI systems, not just humans — rather than a generic writing-tool pitch. Trust signals name NVIDIA, Amazon, and PagerDuty as customers, backed by testimonials attributed to leaders at Cisco, Paylocity, Roku, and Socure, plus SOC 2 and GDPR compliance callouts. No specific user or adoption counts are given beyond the named companies.
- Category
- Engineering & Infrastructure
- Style
- DarkColorful
- Stack
- Next.jsTailwind CSS
- Fonts
- STKBureauSerif-apple-system-
- Palette
- Meta title
- ReadMe · Developer-friendly API documentation
- Sections
- 5
- Updated
Readme's landing page, section by section
Each section below is cropped straight from Readme's live page — useful references for engineering & infrastructure landing page design.
Readme design review: what the page does, section by section
The desktop capture runs 16,384 pixels through chapters tagged with numbered monospace eyebrows: hero, product-UI mock, "02. OUR CUSTOMERS" logos, "03. THE FULL STACK" feature tabs, "04. BEHIND THE SCENES", "05. CREATING DOCS", "06. 200 OKAY", "07. ENTERPRISE-READY", "08. READY?", "09. CUSTOMER SITES", then the footer. Colour alternates between navy #010442, white #fefefe and blue #042aff, with purple, green and pink words inside headlines. Headlines use the serif STKBureauSerif with one italic coloured phrase; body text uses -apple-system. Distinctive for documentation software: the product is shown through its own interface mockups.
HeroesView crop
The hero is a navy rounded panel with a notch at top centre, holding a "New" pill reading "Your docs, now agent-ready" and the headline "Documentation built for agents", with "agents" in light blue. A white input card offers "Import by URL", "OAS" and "Markdown" tabs, a "docs.yoursite.com" field and a blue "Build site" button, over faint circuit outlines.
FootersView crop
The footer starts with the readme wordmark and links to "X (formerly Twitter)" and "LinkedIn", above five columns: "PRODUCT", "SOLUTIONS", "DEVELOPERS", "RESOURCES" and "COMPANY", with a "NEW" tag beside "AI". An oversized dotted-outline book icon and wordmark follow, then "Terms of Service", "Privacy Policy" and "MSA".
PricingView crop
Pricing uses three equal columns: "Starter" at "$0 /month", "Pro" at "$250 /month" with a "Popular" badge, and "Enterprise" with "Contact Us". Buttons differ by tier: outlined "Get started" and "Start free trial", then a filled blue "Book a Demo". Checklists accumulate with "All Starter features, plus:", and an "Ask AI ($150/mo)" add-on toggle closes each AI group.
About UsView crop
The about page opens with a green italic headline, "Documentation & APIs, better for everybody", and the sentence "We're a small team of humans (and one owl) working together to do big things." A three-column grid of bordered cards follows, each with a photo, serif name, uppercase role and two short bios. The final card is "Owlbert", "CHIEF WHIMSY OFFICER".
Blog pagesView crop
The blog page begins with "01. BLOG" and a split layout: a large featured post, "Just Enough AI, Part 1: AI for Search and Discoverability", beside three smaller posts. A changelog block, "In-App OAS Editing", lists bullets under "Improvements" and "Bugs Eaten by Owlbert". A Socure quote and an "Older Posts" table with tags and dates follow.
On mobile
At 390px the layout becomes one column and the navigation shrinks to a logo and menu icon. "Build site" spans the full width of the hero input card. Logos drop to two columns, feature tabs wrap onto two rows, and paired feature blocks stack. Dashboard mockups are cropped at the right edge, and small monospace labels become hard to read.
Worth borrowing
- Numbered monospace eyebrows such as "03. THE FULL STACK" give a very long scroll a visible chapter system.
- Repeating the "Import by URL" card under "Get a preview of your docs" puts the main action at both ends of the page.
- Switching background from navy to white to near-black, as at "07. ENTERPRISE-READY", marks topic changes without dividers.
