pen.dev

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.

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.