Inside the Blacksmith website design
Blacksmith is a developer tools website built with Webflow, Next.js, and GSAP. Its pages are built from hero, product demo, testimonials, features, comparison, stats, CTA, and footer sections, shown here in full-page captures and a scroll recording. Typography: IBM Plex Sans (display text, headings, and body text) and IBM Plex Mono (monospaced text). Colours: background #F5F5F5, text #202020, accent #F0FB29.
Speed up your GitHub actions with Blacksmith. Run CI/CD 2x faster, download caches 4x faster, build Docker images 40x faster, and eliminate queue times. Start free today. Its visual style is brutalist, minimal, and retro, with announcement bar, navigation bar, and hero among its components.
Why we picked it
A pixel-font wordmark and acid yellow banner give a developer-tool page some personality, while the diff-style code snippet shows the product change in the exact syntax engineers already read. Black and white tables and a dotted grid keep dense comparison data and stats easy to scan as the page moves from proof points to customer logos to pricing.
What to look for
- Hero: a specific headline instead of a generic slogan
- Product Demo: the product doing real work, not a sizzle reel
- Testimonials: names, roles, and photos or logos for credibility
- Features: benefits framed around what the user gets, not internal capability names
Questions designers ask
What fonts does Blacksmith use?
Blacksmith uses IBM Plex Sans for display text, headings, and body text, and IBM Plex Mono for monospaced text, measured from the captured page's CSS.
What is the Blacksmith website built with?
The Blacksmith website is built with Webflow, Next.js, and GSAP, detected when the page was captured.
What colours does the Blacksmith website use?
Measured from the captured page's CSS, the Blacksmith website uses #F5F5F5 for the background, #202020 for text, and #F0FB29 as an accent.
What sections does the Blacksmith website have?
The Blacksmith website includes hero, product demo, testimonials, features, comparison, stats, CTA, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
