---
version: alpha
name: Actual Budget — budgeting product demonstration
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: 28px
    fontWeight: 400
    lineHeight: 35px
  supporting:
    fontFamily: '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
      Helvetica, Arial, sans-serif'
    fontSize: 16px
    fontWeight: 500
    lineHeight: 26.4px
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

A centered budgeting feature with an understated heading, explanatory copy, a purple documentation link, and a scaled product screenshot below.

Captured from https://actualbudget.org/ at 2026-10-12T06:08:15.747649+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 28px / 35px on mobile.

- `h2` “Powerful budgeting made simple”: 28px, weight 400, line-height 35px, color `rgb(28, 30, 33)`.
- `a` “Learn more”: 16px, weight 500, line-height 26.4px, color `rgb(107, 70, 193)`.

## Layout

Use a 700px centered desktop column for the heading, explanatory copy and product preview. At 390px it shrinks to 360px with 15px gutters. The title wraps from one line to two, the paragraph grows vertically, and the product screenshot scales down rather than becoming a live interactive table. Preserve the generous gap before the preview.

Measured desktop region: 700.00 × 547.64px at a 1440px viewport. Measured mobile region/page: 360.00 × 556.02px at a 390px viewport. The primary image is only the selected element; use selector `.bigFeature_bQW1:nth-child(1 of .bigFeature_bQW1)` to identify its boundary. Desktop and mobile were warmed up, measured, and cropped from fresh full-page captures.

## Elevation & Depth

The source product image contains rounded corners and a subtle shadow; keep the surrounding feature block flat. The savings statement is source marketing copy, not an independently verified outcome.

## 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

Use a 700px centered desktop column for the heading, explanatory copy and product preview. At 390px it shrinks to 360px with 15px gutters. The title wraps from one line to two, the paragraph grows vertically, and the product screenshot scales down rather than becoming a live interactive table. Preserve the generous gap before the preview.

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.