Impeccable
impeccable.style/
Impeccable is a design-checking tool for AI coding agents (Claude Code, Cursor, GitHub Copilot, and others) that runs automated checks against generated interfaces to catch what it calls "AI slop" before it ships. It cites 61 automated checks and shows concrete before/after performance numbers from real fixes, such as page load dropping from 3.4s to 1.1s and JS bundle size from 412 kB to 86 kB. Social proof comes from over 30 embedded tweets with handles and photos rather than conventional testimonial blocks or company logos. The copy is unusually profane and casual for a developer tool's homepage, with lines like "it fucking works beautifully," a deliberate departure from typical dev-tool marketing register.
- Category
- Engineering & Infrastructure
- Style
- DarkColorful
- Fonts
- Alumni SansCormorant GaramondAlbert SansIowan Old Style
- Palette
- Meta title
- Impeccable: The missing design vocabulary for agents
- Sections
- 4
- Updated
Impeccable's landing page, section by section
Each section below is cropped straight from Impeccable's live page — useful references for engineering & infrastructure landing page design.
Impeccable design review: how the homepage is built
Impeccable's homepage runs about 8,640 pixels tall on desktop, over a near-black canvas with a gold-and-teal textured hero image. The gold accent is #ca9408, set against the cream #f5e7d5 used on light specimen panels and the deep brown #352913 in dark surfaces. Typography follows the detected stack: Alumni Sans and Cormorant Garamond for display, Albert Sans and Iowan Old Style for body. The page runs top to bottom through a split hero, a testimonial strip, a component gallery, a command walkthrough, a generated card deck, five capability panels and an install block. Its distinctive move is live-looking interface specimens in place of feature icons.
Above the fold
Above the fold, a left column sets the headline "The missing design vocabulary for agents." in light condensed type, with a filled "Get started" button and a text link "How it works" beneath the subhead. Nine small grey tool logos sit below. The right column holds a before-and-after panel with callouts "AI kicker", "Italic serif", "Side-tab border" and "AI beige", and command tabs "/polish", "/distill" and "/clarify" along its base.
Testimonials, component gallery and walkthrough
Testimonial cards carry quotes such as "Impeccable > Claude design". The block headed "Detects and removes AI slop." pairs the line "59 checks catch the defaults agents keep reaching for before they become your design." with an outlined "Explore all 59" button. A grid of component specimens follows, each tagged with yellow labels such as "AI beige + serif" and "Soft rounded card". The walkthrough shows a chat input reading "/impeccable polish" beside a browser preview.
Worlds deck and capability panels
The "Worlds on the table" section shows generated card art across three numbered stages: Imagine, Commit and Build. "Ready to drop in" then introduces five numbered panels. "Respects your design system." and "Real product context." share the top row, with three panels beneath, "Travels as DESIGN.md.", "Knows what the surface is for." and "Block slop before it ships." Each carries a mock, from a terminal log to a hook timeline.
Closing section and footer
The closing block is a dark panel headed "Get started" with command boxes reading "npx impeccable install", "/impeccable init" and "npx impeccable update". A tall gold-and-teal texture runs down its right edge. Three link columns, "Chrome extension", "CLI for CI" and "Follow along", sit above a footer with links "Changelog", "FAQ", "Privacy" and "GitHub" and the credit "Created by Paul Bakaus".
On mobile
At 390px the hero stacks into one column, with the full-width "Get started" button above the tool logos and the before-and-after panel below them. The testimonial strip shrinks to one card. The specimen grid collapses to one column, and the command tabs become a "PALETTE" and "PERIODIC" pill toggle, with chips such as "craft" scrolling sideways. The install command "npx impeccable install" wraps onto two lines inside its box.
Worth borrowing
- Specimens labelled with small yellow tags replace abstract feature icons across the page.
- The hero demonstrates the product with a before-and-after panel instead of a static screenshot.
- Install commands sit in copy-enabled boxes at the foot of the page, doubling as the setup guide.
