OpenBudget

---
version: alpha
name: OpenBudget landing-page reference
description: A warm, restrained finance landing page with modest left-aligned Geist
  headings, charcoal pill actions, cream surfaces and large product demonstrations
  framed by muted city photography. Alternating chat and spreadsheet showcases lead
  into compact tool cards and an oversized closing statement.
colors:
  primary: '#25241D'
  surface: '#F8F7F2'
  on-surface: '#25241D'
  secondary: '#F3F1EB'
  accent: '#2F4D77'
typography:
  headline:
    fontFamily: Geist, sans-serif
    fontSize: 26px
    fontWeight: '400'
    lineHeight: 32.5px
  body:
    fontFamily: Geist, sans-serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  closing:
    fontFamily: Geist, sans-serif
    fontSize: 72px
    fontWeight: '400'
    lineHeight: 79.2px
---

# OpenBudget landing-page reference

## Overview

Observed at 2026-09-19T06:42:07.035981+00:00; desktop 1440 × 1000 CSS pixels at device scale 1, with a full-page capture and a separate 390 × 844 mobile opening view. Values explicitly called measured come from computed styles; other spatial descriptions are visual observations.

An independent visual reference for a personal-finance product connected to AI and spreadsheets. Its defining move is a deliberately modest opening statement followed by a much larger demonstration. Warm near-white surfaces and generous blank space keep a technical subject approachable. This is the public landing page, not an authenticated budgeting interface or an official brand manual.

## Colors

The measured canvas is #F8F7F2, with #25241D text and primary actions. Supporting panels use #F3F1EB and #ECEAE3; quieter separators and interface fills include #E7E5DE. Links and demonstration bars use #2F4D77. The photography adds muted blue-green shadows and warm city lights, visually observed rather than extracted palette tokens. Keep those photographic colors inside the demonstration frames. Secondary prose is sampled as the foreground color at 60% opacity, not a separate solid gray. Avoid pure-black blocks or saturated gradients across the main canvas.

## Typography

Geist is declared throughout. The opening headline measures 26px, weight 400, 32.5px line height and -0.325px tracking at both inspected widths. On desktop its box is 715px wide; on mobile it is 358px and wraps naturally. Feature-row headings and adjacent descriptive prose use 22px/28.6px on desktop, with selected feature headings reduced to 16px/24px on mobile. Smaller tool headings use 18px/25.2px. Product-preview text is denser, often 12–13px with 18–19.5px leading. The final conversion statement deliberately jumps to 72px/79.2px with -2.16px tracking; at 390px it becomes 52px/59.8px. Preserve the quiet opening versus expressive closing contrast rather than enlarging every title.

## Layout

At 1440px, a centered 1252px content region starts at x=94. Use a compact header with a small geometric wordmark left, a row of navigation links, then secondary and primary pill actions right. Leave a generous vertical gap before the left-aligned hero, followed by its trial action, a small security annotation and an inline integration-logo row. The large photographic demonstration frame is the first dominant visual object.

Place four evenly spaced statistics below the demonstration. Continue with three wide alternating feature rows: narrow copy beside a larger chat mockup, a spreadsheet on the left with copy on the right, then another chat-led asset overview. Each pairs a low-contrast text panel with imagery containing a bright interface window. Follow with a three-column tool-card group, a shallow security strip, a scheduled-workflow panel, and three understated blog cards. End with a centered oversized headline, a single pill action and a four-column footer separated by fine rules. Estimate section gaps from the composition; no universal spacing scale was measured.

At 390px the outer inset is 16px. The header collapses to wordmark and a 36px menu control; the desktop integration row is absent in the inspected opening, while the security annotation remains. The trial button stays left aligned. Feature headings share a single-column x=40 position inside padded panels. The mobile opening was visually reviewed, not the complete mobile scroll sequence. Both inspected widths have no horizontal document overflow. The tall mobile demonstration is a cropped/reflowed media presentation; preserve surrounding gutters rather than forcing the desktop composition into a tiny scaled panel.

## Elevation & Depth

Depth comes from bright interface windows inset within softly atmospheric photographs. Main layout panels are almost flat; small window shadows and subtle surface changes separate nested content. Keep elevation quiet so that charts and conversation text remain the focal point. Exact shadow values were not sampled.

## Shapes

Primary controls are full pills with 20px horizontal padding, sampled at 192px total width for the trial action. Small chat bubbles use a measured 16px 16px 4px corner pattern and 6px 12px padding. Larger content panels are near-rectangular with restrained corner rounding, visually estimated. Do not apply the pill radius to every card.

## Components

The main showcase is a large media preview on a photographic stage. Feature demonstrations include a window title bar, AI conversation, muted user bubbles, blue horizontal charts, compact tabular financial data and occasional green spreadsheet states. Treat those as illustrative content, not a requirement to build a working financial integration. Tool cards present a short lead, supporting explanation, quiet text link and cropped example. The workflow panel uses small prompt tiles, while blog cards use dates and simple text hierarchy rather than large cover images.

The desktop nested-scroll flag was reviewed as a contained demonstration, not a clipped page scroller. The screenshot records one static media/conversation state; animation timelines, menu-open states, hover styles and trial flows were not tested. Cookie consent was rejected before the final capture. Do not mistake preview cropping for permission to hide essential live-product controls.

## Do's and Don'ts

- Do keep the opening compact and left aligned, with the demonstration carrying the visual weight.
- Do distinguish warm canvas, quiet panel fill and readable dark foreground.
- Do alternate copy and demonstration placement to pace the long page.
- Don't replace the restrained palette with generic bright finance gradients.
- Don't render every card as a heavily shadowed floating object.
- Don't reproduce example balances or marketing claims as verified product facts.