# pencil.video

Source: https://pencil.video/
Captured: 2026-10-28
Tags: saas, landing, light, both, minimal, editorial, calm, human, technical, elegant
Colors: #f7f7f5, #a4aa96, #d0cfc7, #8f8f76, #743528, #84624e, #b64234, #43352d
Type (h1): Geist · 56px/62.72px · 300 — "Pencil is the video editor your agents can use."
Type (h2): Geist · 28px/38.5px · 300 — "Footage becomes material an agent can reason about."
Type (h3): Geist · 18px/28px · 500 — "Import"
Type (body): Geist · 19.2px/31.68px · 400 — "Import your footage, ask for an edit, and refine every decision on a real timeli"
Type (small): Geist Mono · 10.24px/15.36px · 400 — "Terminal — Pencil MCP"
Type (button): Geist · 14px/20px · 500 — "Download"
Button: "Download" — fill #26251e, text #fcfcf9, radius 9999px, border 0px, padding 8px 16px, height 36px, type 14px/500
Radii: 4px (35), 3px (31), 2px (23), 6px (8), 9999px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/pencil-video/hero.webp?v=62dd814a
- Page crop (mid-1): https://media.lvly.design/library/pencil-video/mid-1.webp?v=94a1c090
- Page crop (mid-2): https://media.lvly.design/library/pencil-video/mid-2.webp?v=0e72bf7f
- Hero (mobile): https://media.lvly.design/library/pencil-video/mobile-hero.webp?v=3847ae6e
- Full page (desktop): https://media.lvly.design/library/pencil-video/full.jpg?v=aa54c56b
- Full page (mobile): https://media.lvly.design/library/pencil-video/mobile-full.jpg?v=6da58ff0
- Clip preview (mp4): https://media.lvly.design/library/pencil-video/video-r9g5ld.preview.mp4?v=388dcee6

Pencil sells an agent-driven video editor with almost no marketing voice: a warm off-white page (#f7f7f4), a 56px Geist Light headline set flush-left at the gutter, gray body copy, one near-black pill CTA. The identity comes from one bold choice. The product screenshot sits on an impressionist water-lily painting, a hazy sage-and-mauve Monet field, so a dense, technical macOS UI floats on something soft and handmade. Below, the page alternates text and app-window mockups in a calm zig-zag, each section introduced by a lowercase Geist Mono eyebrow ("understand", "assemble"), and closes on the same painting as a full-bleed band behind the final CTA. Tech is carried by the monospace micro-type and the faithful UI; humanity by the painting and the light weights.

## Steal-worthy details

- Fine-art painting as the product-shot backdrop: a public-domain impressionist canvas sits behind the app windows instead of a gradient or a blur, softening a dense UI and giving the brand a palette (sage #a4aa96, olive #8f8f76) it never has to state
- Light-weight display at large size: the H1 is Geist 300 at 56/63px, H2s 300 at 28px, so the headlines read quiet and confident without bold weight doing the work
- Two stacked macOS windows, the back one a "Terminal — Pencil MCP" in mono, the front the editor: the CLI-and-GUI story told by layering alone, no caption needed
- Primary pill paired with a bare text link: a #26251e pill with a download glyph next to a gray "Read the docs →" with no chrome, so the hierarchy is fill against no fill
- Lowercase Geist Mono eyebrows ("understand", "assemble", "direct", "refine") label each zig-zag section like a pipeline stage, in muted gray above a light H2
- Spec strip under the hero: a single centered mono line ("Free beta · Pencil 1.0 · native macOS · signed and notarized …") stands in for a logo wall or feature badges
- Four-step loop as plain numbered columns (01 Import, 02 Describe, 03 Review, 04 Finish) with mono numerals and no cards, icons or borders
- The painting returns as a full-bleed closing band behind a centered CTA, bookending the page with the hero's image

## Style recipe

Build on a warm off-white canvas (#f7f7f4, cards and app surfaces #ffffff, hairlines #e4e3dc) with near-black warm ink #26251e and muted gray body text around #6b6a63. Set everything in Geist: display at weight 300, 56px/1.12 for H1 and 28px/1.375 for H2, normal tracking; body 19px/1.65 at 400; buttons 14px/500. Use Geist Mono at 10–12px, lowercase, gray, for eyebrows, window titles, spec lines and step numerals; it is the only signal of the technical side. Left-align headlines to the content gutter and keep body copy to about 60ch. Primary action: a solid #26251e pill (9999px radius, 36px tall, 8px 16px padding, #fcfcf9 text, small leading icon); secondary actions are bare gray text links with an arrow, never outlined buttons. Keep UI radii tiny (2–4px, 6px for windows) so the pills are the only round things. Show the product as faithful macOS windows with traffic lights and centered mono titles, with soft low shadows, placed on a full-bleed fine-art painting in muted sage (#a4aa96), olive (#8f8f76) and dusty pink; use the same painting again as a closing band. Let the product's own small accent (a violet near #6b5ce7 on app chips) and the footage's brick red (#b64234) be the only saturated color; the page chrome itself stays neutral. Alternate text and screenshot in a two-column zig-zag with generous vertical space (about 160px between sections), and present processes as unboxed numbered columns rather than cards.