blume.codes

A developer tool that refuses to look like one. Blume Sidecar — a macOS companion that watches coding agents — opens on a full-bleed painted sky: cobalt blue, streaked cirrus, cumulus piled like an animated film's establishing shot, sunflowers and lilies crowding the right edge and a meadow dropping away below. The headline sits dead center in Gelica, an 84px medium-weight serif with tight 0.94 line-height, set in white over the sky, with SN Pro sans for the 19px body. The only interface in the hero is the product itself: a cream, warm-gray app window with a tabbed toolbar and three little gauges, flanked by two frosted, half-faded agent cards — the software floats in the landscape rather than the landscape decorating the software. Below the fold the page turns to a cream ground (#fbf0dc) and a hand-drawn green vine snakes down the page from feature to feature, each block a small cream app-window mockup sprouting grass and an orange lily, with tiny flower heads as waypoints. The one hot color is the brand orange (#d55102): the lily in the logo, the pill Download button, a diagonal "We're hiring" ribbon in the corner and a floating round flower FAB. Small radii (3–5px) on chrome, 12–14px on cards, a 44px pill for the single CTA. It reads as a children's-book garden housing a serious monitoring tool, and the contrast is the point.

Build on a warm cream page ground (#fbf0dc), with cards and windows one step lighter (#f3efe5) and text in a warm near-black. Use exactly one hot accent, a burnt orange (#d55102), and spend it only on the logo mark, the primary CTA, and one or two small "physical" flourishes (a corner ribbon, a round FAB); never on headings or body. Display type is a soft humanist serif (Gelica / Fraunces) at weight 500, 72–84px, line-height ~0.94, normal tracking; body is a rounded geometric sans (SN Pro or similar) at 18–19px, weight 400, tracking −0.015em, line-height 1.45. Open with a full-bleed painted or illustrated scene — saturated sky blues (#07377f → #0a73de) with soft clouds — and set the headline in white directly on it; let the product UI rise from the bottom edge, cropped, with secondary cards blurred and faded to 60% behind it. Below the hero, switch to the cream ground and connect sections with a single hand-drawn organic path (a vine, thread or river) that meanders between alternating left/right text-and-mockup pairs; mark it with small illustrated waypoints. Render product screenshots as miniature cream app windows with three traffic lights and low-contrast placeholder rows, and let illustration touch each one (foliage growing from the frame). Radii: 3–5px on window chrome and inputs, 12–14px on cards, 9999px on the CTA and nav capsule. The primary button is a 44px orange pill, 15px/600 white label, with an optional nested lighter capsule tag on its right. Nav is a floating white capsule pinned top-center that only holds a short line of text and the CTA. Shadows are soft and warm, never gray; illustration and cream should read as printed paper rather than glassy UI.