# blume.codes

Source: https://blume.codes/
Captured: 2026-09-13
Tags: saas, landing, light, both, organic, retro-warm, playful, warm, optimistic, friendly, human, calm
Colors: #07377f, #f3efe5, #0a73de, #0654b4, #cdd2d0, #6290c9, #adb1a0, #95b4dc
Type (h1): Gelica · 60px/60px · 500 · tracking -1.5px — "Tired of steering your coding agents?"
Type (h2): Gelica · 56px/56px · 500 · tracking -1.4px — "Your journey begins here"
Type (h3): SN Pro Variable · 22px/28.6px · 700 · tracking -0.66px — "All Your Agents, in Focus"
Type (body): SN Pro Variable · 19px/27.55px · 400 · tracking -0.285px — "Rules, skills, hooks and corrections pile up in every harness. Blume sees the wh"
Type (small): SN Pro Variable · 13px/13px · 720 · tracking 0.715px — "WE’RE HIRING"
Type (button): SN Pro Variable · 13px/13px · 720 · tracking 0.715px — "WE’RE HIRING"
Button (primary): "We’re hiring" — text #24324a, radius 0px, border 1px, padding 0px 0px, height 209px, type 13px/720
Radii: 4px (14), 3px (12), 12px (12), 5px (9), 14px (8)

## Images

- Hero (desktop): https://media.lvly.design/library/blume-codes/hero.webp?v=eb594a53
- Page crop (mid-1): https://media.lvly.design/library/blume-codes/mid-1.webp?v=165a325a
- Page crop (mid-2): https://media.lvly.design/library/blume-codes/mid-2.webp?v=77eccc90
- Hero (mobile): https://media.lvly.design/library/blume-codes/mobile-hero.webp?v=e5326908
- Full page (desktop): https://media.lvly.design/library/blume-codes/full.jpg?v=11c34be8
- Full page (mobile): https://media.lvly.design/library/blume-codes/mobile-full.jpg?v=9f987ab4
- Clip preview (mp4): https://media.lvly.design/library/blume-codes/video-dlk6uf.preview.mp4?v=3febeee6

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.

## Steal-worthy details

- Full-bleed painted-sky hero with white serif headline centered on it and the product window rising from the bottom edge, partly cropped — the app is placed *in* the world, not on a card.
- A single brand orange (`#d55102`) carries every interactive moment: logo glyph, CTA pill, corner ribbon, FAB. Everything else is cream, warm gray and illustration.
- Pill CTA with a nested capsule tag inside it ("Download" + a small "DMG" chip), and a plain caption beneath ("Apple Silicon · v1.0.74") instead of a second button.
- A continuous hand-drawn vine as the scroll spine: it links alternating feature blocks, carries leaf and flower-head markers, and doubles as the section divider.
- Feature mockups are miniature cream app windows with traffic lights and rows of agent avatars, each one "planted" — grass tufts and an orange lily grow out of the frame's base.
- Sticky top-center pill nav that appears on scroll: white capsule holding a text label ("Get Blume.") and the same orange CTA, nothing else.
- Diagonal "We're hiring" ribbon pinned across the top-right corner, in the brand cream with orange dot and arrow — a physical-object gesture over a painted scene.
- Heading serif (Gelica) at 500 weight rather than bold, so the display type stays soft and bookish over an illustration.

## Style recipe

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.