# pen.dev

Source: https://www.pen.dev/
Captured: 2026-10-30
Tags: saas, landing, light, both, minimal, bento, premium, technical, calm, futuristic, confident
Colors: #e3e7eb, #31292c, #b5b5b8, #0e0e0e, #6f6c6e, #938e91, #524e51, #6f3443
Type (h1): InterDisplay · 32px/36px · 400 · tracking -0.64px — "pen.dev is an agentic canvas for building bold ideas."
Type (h2): InterDisplay · 32px/36px · 400 · tracking -0.64px — "Never start from scratch."
Type (h3): InterDisplay · 16px/24px · 500 · tracking -0.16px — "Buttery smooth performance"
Type (body): InterDisplay · 20px/24px · 400 · tracking -0.2px — "Try importing any website or app as editable layers"
Type (button): InterDisplay · 16px/20px · 500 · tracking -0.32px — "Download for macOS"
Button: "Download for macOS" — fill #0d0d0d, text #ffffff, radius 9999px, border 1px, padding 12px 20px, height 46px, type 16px/500
Radii: 50% (35), 1.317px (22), 4px (10), 0.854px (7), 24px (6)

## Images

- Hero (desktop): https://media.lvly.design/library/pen-dev/hero.webp?v=4530e452
- Page crop (mid-1): https://media.lvly.design/library/pen-dev/mid-1.webp?v=b8d29e6c
- Page crop (mid-2): https://media.lvly.design/library/pen-dev/mid-2.webp?v=45c7549a
- Hero (mobile): https://media.lvly.design/library/pen-dev/mobile-hero.webp?v=f67e58d9
- Full page (desktop): https://media.lvly.design/library/pen-dev/full.jpg?v=eacc8f03
- Full page (mobile): https://media.lvly.design/library/pen-dev/mobile-full.jpg?v=88641557
- Clip preview (mp4): https://media.lvly.design/library/pen-dev/video-movhl5.preview.mp4?v=80ce17ff

A monochrome tool-maker's landing page on a cool blue-gray field (#e3e7eb) where the only real color comes from the work shown inside the product. The hero is quiet and centered: a small chrome pen-nib mark, a two-line Inter Display headline at regular weight whose second line drops to mid-gray, a prompt bar that doubles as a CTA, and one black pill. Everything below is either a near-full-width product window (macOS traffic lights, left tool rail, right inspector) or a three-column feature grid of soft, slightly lighter tiles, each holding a single polished-chrome 3D icon floating on a blurred drop shadow. Brushed metal stands in for a brand hue, so the page reads expensive and engineered without ever reaching for a gradient accent.

## Steal-worthy details

- Two-tone headline: line one in near-black, line two the same size and weight in #6f6c6e gray, so the sentence carries its own hierarchy with no bold and no size jump
- Prompt bar as hero CTA: a 620px-wide pill input with example placeholder text ("Ask pen.dev to design…") and a gray inset "Create" pill docked inside its right end — the product's first interaction is the page's first interaction
- Black pill primary with a whisper-gray text link under it ("Try web version for free") instead of a second button — one decision, one escape hatch
- Real product chrome as the hero image: a full app window with traffic lights, monospace inspector values (X 162, Y 55) and floating rounded panels, bleeding off the fold rather than shrunk into a device mock
- Chrome 3D icons as the feature visuals: each grid tile holds one brushed-metal object (Figma glyph, globe, pen nib) with a long soft shadow, with neighboring glyphs ghosted in flat gray outline — material replaces color as the brand signal
- One inverted tile in a light grid: the shaders card goes fully black with a glossy object, breaking the monochrome rhythm exactly where the feature is about visual effects
- Agent terminal overlapping the canvas: a white "Claude Code — zsh" window with monospace tool calls and blue status dots sits half outside the app window, showing the integration as a scene rather than a diagram
- Hairline-tight feature grid: tiles sit 8px apart with a ~6px radius on a slightly darker field, centered title on top and two-line centered gray caption at the bottom, the object floating in the empty middle
- A giant chrome pen nib as the footer sign-off, cropped by the page bottom, echoing the tiny hero mark at monumental scale
- Sticky black announcement strip ("pencil.dev is now pen.dev") with a centered bold-name rename message and a close X, above a chromeless nav whose only fill is the black Download pill

## Style recipe

Build on a cool blue-gray canvas (#e3e7eb) with tiles and panels one step lighter (#eceff2 to #f4f5f7) and pure white reserved for floating windows and inputs. Stay monochrome: ink #0d0d0d, secondary text #6f6c6e, tertiary #938e91, borders #b5b5b8 at low opacity. No brand hue — let polished chrome/brushed-metal 3D objects with long, soft, blurred shadows carry identity, and let color appear only inside showcased content or one deliberately inverted black tile (if a hue is required, borrow a muted wine like #6f3443 sparingly). Type is Inter Display throughout at regular weight (400) for headlines, 32–44px, line-height ~1.0–1.1, tracking -0.02em; split a headline across two lines with the second set in mid-gray instead of bolding anything. Body 20px/24px at -0.01em in gray; small labels 16px weight 500. Use monospace only for numeric inspector-style values and terminal text. Primary action is a solid #0d0d0d pill (radius 9999px, 12px 20px padding, 16px/500 white text, ~46px tall) paired with a plain gray text link below rather than a secondary button. Inputs are wide white pills with a gray inset pill button docked at the right end. Cards use small radii (4–8px) with 8px gutters in three-column grids; content centered — title top, object floating mid-tile, two-line gray caption at the bottom. Large panels and app windows get ~24px radii and very soft ambient shadows. Navigation is chromeless: no bar fill or border, muted gray links, the one black pill as the only weight. Generous vertical rhythm between sections, near-zero ornament, every visual a crisp product screenshot or a single metallic object.