Pencil
pencil.dev/
Pencil is a Developer Tools product. See its pencil.dev landing page design in full — desktop and mobile screenshots plus close-ups of the heroes, features, footers, ctas and pricing & plans. It's built with Next.js and Tailwind CSS. Its type is set in DM Sans, anchored by a #fafafa palette. Study how Pencil structures its messaging, layout and visual hierarchy, then explore more of the best Developer Tools website designs.
- Category
- Developer Tools
- Meta title
- pen.dev – Design on canvas. Land in code.
- Stack
- Next.jsTailwind CSS
- Typography
- DisplayDM SansBodyRubik
- Palette
- Sections
- 05
- Updated
pencil.dev/
Pencil's landing page, section by section
Each section below is cropped straight from Pencil's live page — useful references for developer tools landing page design.
