Actual Budget — illustrated local-first feature

---
version: alpha
name: Actual Budget — illustrated local-first feature
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 compact two-column feature explaining local-first software, pairing a left-aligned heading and paragraph with a purple layered-document illustration.

Captured from https://actualbudget.org/ at 2026-10-12T06:08:05.052882+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` “Unabashedly local-first software”: 28px, weight 400, line-height 35px, color `rgb(28, 30, 33)`.
- `a` “end-to-end encryption”: 16px, weight 500, line-height 26.4px, color `rgb(107, 70, 193)`.

## Layout

At 1440px the component is 854px wide: text occupies roughly 448px on the left and the illustration sits to its right. At 390px the element becomes 360px wide with 15px side gutters; the illustration moves above the copy and the heading wraps into two lines. Preserve the bold opening sentence and inline purple encryption link.

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

## Elevation & Depth

The illustration supplies depth through overlapping sheets and small colored marks. Keep the text area on a plain white background without a surrounding card or shadow.

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

At 1440px the component is 854px wide: text occupies roughly 448px on the left and the illustration sits to its right. At 390px the element becomes 360px wide with 15px side gutters; the illustration moves above the copy and the heading wraps into two lines. Preserve the bold opening sentence and inline purple encryption link.

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.