Pen
pen.dev/
The pencil.dev URL now redirects to pen.dev, an agentic design canvas built for handling large volumes of visual content — it specifically claims to handle "10000 photos, 10GB of content, 60fps, no problem" via a custom WebGL rendering pipeline, a performance figure that's unusually concrete for a design tool's marketing page. Its hero states it's "an agentic canvas for building bold ideas," and it supports importing existing Figma files or live webpages (via a Chrome extension or built-in browser) and exporting straight to HTML/CSS/Tailwind. It supports multiple AI models by name — Claude, OpenAI, Grok, Qwen, Gemini, Kimi, Deepseek, Minimax — rather than committing to a single provider, and states it's backed by a16z's Speedrun program.
- Category
- Engineering & Infrastructure
- Style
- LightMinimal
- Stack
- Next.jsTailwind CSS
- Fonts
- InterDisplayRubik
- Palette
- Meta title
- pen.dev – An agentic canvas for building bold software
- Sections
- 4
- Updated
Pen's landing page, section by section
Each section below is cropped straight from Pen's live page — useful references for engineering & infrastructure landing page design.
Pen design review: how the homepage is built
A single page of about 16,194 pixels on a pale blue-grey ground (#dbe0e6) with near-black text; no navigation bar is visible above the hero. The order runs from a centred pen-nib logo and headline, through a large editor mockup, a dark showcase panel, a row of model logos, and a three-column grid of feature cards interrupted by full-width editor screenshots, ending in a giant "pen.dev" wordmark. Pink (#f876a9, #f997c5) appears only inside the product imagery, never in buttons or type. Headings use InterDisplay and body text Rubik.
Above the fold
A chrome-metal pen-nib icon sits above the headline "pen.dev is an agentic canvas" in black, then "for building bold ideas." in grey. One black pill button reads "Download for macOS". Below, a desktop app window spans the width, with tabs "Agent", "Layers", "Slides", "Components" and "Libraries", a tool column, three pink and black artboards, and a properties panel. A cookie bar with "Decline" and "Accept" overlaps the canvas.
Showcase, model logos and first feature cards
A switch with "Website", "Mobile App" and "Socials & Marketing" precedes "Never start from scratch." and a black panel of five phone mockups in different colourways. "Made in pen.dev." shows a purple football-kit image beside two cropped phone screens. "Bring any model to the canvas." lays out eight square tiles, "Claude" through "Minimax". "The design features you expect." opens a three-column grid: "Buttery smooth performance", "Pen tool" and "Shaders".
Feature grid and editor screenshots
Each grid card pairs a 3D metallic icon with a two-line caption. Rows continue with "Figma import", "Chrome extension", "Flex layout", "Effects", "Variables" and "Gradients", the last filled with a pink-to-purple gradient. Between rows sit full-width screenshots under one-line headings: "Vibe Shaders." over a glowing black-circle render, and "AI Pen." over a red frame with a line-drawn lion. The last card reads "This list goes on and on and on...".
Closing section and footer
"Killer performance." and "10000 photos, 10GB of content, 60fps, no problem." introduce a photo-filled editor view. The nib icon returns at large size over "Start building your ideas today." and a black "Download pen.dev" button. Below, "Built different. Designed to ship." sits left and "Backed by" right, above an oversized black "pen.dev" wordmark, four columns of small links including "FAQ" and "Add to Cursor", and "© 2026 High Agency Inc."
On mobile
At 390px the hero button shortens to "Download" and the headline wraps over three lines. The editor mockup becomes a tall frame with a prompt bar and chips "Show shader", "Fit all screens" and "Show landing". The dark showcase gains a play button. Model tiles form a two-column grid, and feature cards drop to one or two columns, some at half width. The footer links split into two columns.
Worth borrowing
- A headline split into black and grey tones, as in "for building bold ideas.", builds hierarchy without a second typeface.
- Using the product editor with its tabs intact as the hero image lets the interface serve as the feature list.
- Ending the grid with "This list goes on and on and on..." turns an exhaustive list into a joke.
