---
version: alpha
name: Actual Budget — local-first finance landing
colors:
  primary: rgb(107, 70, 193)
  text: rgb(28, 30, 33)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
      Helvetica, Arial, sans-serif'
    fontSize: 48px
    fontWeight: 800
    lineHeight: 60px
  supporting:
    fontFamily: '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
      Helvetica, Arial, sans-serif'
    fontSize: 17px
    fontWeight: 500
    lineHeight: 28.05px
omitted:
- section: spacing
  reason: Exact geometry is recorded in Layout; no unobserved global spacing scale
    is inferred.
- section: rounded
  reason: Shapes are described from the capture; no global corner scale is inferred.
- section: components
  reason: This reference uses prose composition rules rather than an invented component-token
    API.
---

## Overview

An airy finance-software homepage with purple installation actions, a large budget preview, alternating illustrated benefits, centered product demonstrations, and a deep-indigo feature directory.

Captured from https://actualbudget.org/ at 2026-10-12T06:03:20.707358+00:00. This is a static reference in a logged-out browser, not a tested application flow.

## Colors

primary: `rgb(107, 70, 193)`; text: `rgb(28, 30, 33)`; surface: `#FFFFFF`. Text and action values are computed CSS samples; decorative artwork contains additional colors and is not reduced to a fabricated palette.

## Typography

Use the measured families and sizes rather than substituting an unrelated display face. The matching heading is measured at 48px / 60px on mobile.

- `h1` “Your Finances — made simple”: 48px, weight 800, line-height 60px, color `rgb(28, 30, 33)`.
- `h2` “Be involved in your financial decisions”: 28px, weight 400, line-height 35px, color `rgb(28, 30, 33)`.
- `h2` “Meticulously designed for speed”: 28px, weight 400, line-height 35px, color `rgb(28, 30, 33)`.
- `h2` “Unabashedly local-first software”: 28px, weight 400, line-height 35px, color `rgb(28, 30, 33)`.
- `h2` “Powerful budgeting made simple”: 28px, weight 400, line-height 35px, color `rgb(28, 30, 33)`.
- `h2` “The fastest way to manage transactions”: 28px, weight 400, line-height 35px, color `rgb(28, 30, 33)`.
- `h2` “Oh my, the reports”: 28px, weight 400, line-height 35px, color `rgb(28, 30, 33)`.
- `h2` “So many features!”: 28px, weight 400, line-height 35px, color `rgb(255, 255, 255)`.

## Layout

Keep the initial value proposition and setup choices centered above the product preview. Alternate text-and-illustration benefits before the larger centered product screenshots; finish with the contrasting two-column capability directory. The mobile header reduces to a hamburger, wordmark and search button. The headline remains 48px and wraps into two lines; the setup actions stack. Lower-page mobile arrangements were inspected only where separately captured.

Measured desktop region: 1440.00 × 6301.00px at a 1440px viewport. Measured mobile region/page: 390.00 × 7585.00px at a 390px viewport. The primary image is the complete desktop page; mobile evidence is the opening 390 × 844px viewport, not proof of every lower-page interaction.

## Elevation & Depth

Use light cloud-like background decoration around the opening area, restrained screenshot shadows, and a flat dark closing section. Do not add card chrome around every paragraph.

## Shapes

Follow the silhouette visible in this reference, including the relative contrast between rectangular content blocks and decorative artwork. Sampled text nodes have no intrinsic radius; that does not imply every surrounding card is square. Do not infer hover elevation, focus rings, or animation curves from this still image.

## Components

Keep the initial value proposition and setup choices centered above the product preview. Alternate text-and-illustration benefits before the larger centered product screenshots; finish with the contrasting two-column capability directory. The mobile header reduces to a hamburger, wordmark and search button. The headline remains 48px and wraps into two lines; the setup actions stack. Lower-page mobile arrangements were inspected only where separately captured.

All depicted copy, illustration, product data and any customer proof come from the source page. Retain attribution when discussing source examples; replace marketing claims with your own verified content when adapting the pattern. Only explicitly described responsive states were inspected.

## Do's and Don'ts

- Do preserve the section hierarchy, text wrapping and measured spacing relationships.
- Do keep readable labels and meaningful action text when adapting this layout.
- Don't reuse source customer claims as your own evidence.
- Don't claim tested validation, checkout, account creation, keyboard navigation or carousel behavior; these were not exercised.