Actual Budget — indigo capability directory

---
version: alpha
name: Actual Budget — indigo capability directory
colors:
  primary: '#FFFFFF'
  text: '#FFFFFF'
  surface: '#232C68'
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 deep-indigo capability section with white icons, a two-column feature list, a data-ownership callout, and an organic wave transition.

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

## Colors

primary: `#FFFFFF`; text: `#FFFFFF`; surface: `#232C68`. The indigo surface token is a visual estimate of the background artwork, not the transparent root computed style.

## 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` “So many features!”: 28px, weight 400, line-height 35px, color `rgb(255, 255, 255)`.
- `h3` “Everything in one place”: 16px, weight 800, line-height 20px, color `rgb(255, 255, 255)`.
- `p` “Add all of your accounts and track everything in one place. Get valuable information ”: 16px, weight 500, line-height 26.4px, color `rgb(255, 255, 255)`.
- `a` “Learn more”: 16px, weight 500, line-height 26.4px, color `rgb(255, 255, 255)`.
- `h3` “Syncing across devices”: 16px, weight 800, line-height 20px, color `rgb(255, 255, 255)`.
- `p` “Self-host our syncing service. It's easy to set up, but uses sophisticated distribute”: 16px, weight 500, line-height 26.4px, color `rgb(255, 255, 255)`.
- `a` “Learn more”: 16px, weight 500, line-height 26.4px, color `rgb(255, 255, 255)`.
- `h3` “Bank Sync”: 16px, weight 800, line-height 20px, color `rgb(255, 255, 255)`.

## Layout

Lay out ten feature items in two desktop columns with a small icon rail beside each text block. Headings use 16px extra-bold type and descriptions use 16px with 26.4px line height. At 390px, the items become one column with text starting 55px from the left. The ownership callout and disclosure remain part of this single cohesive section. Retain the 128px opening space above the section heading.

Measured desktop region: 1440.00 × 1730.38px at a 1440px viewport. Measured mobile region/page: 390.00 × 2414.14px at a 390px viewport. The primary image is only the selected element; use selector `.featuresSection_Y0uK` to identify its boundary. Desktop and mobile were warmed up, measured, and cropped from fresh full-page captures.

## Elevation & Depth

Use flat icon-and-copy groups rather than separate floating cards. The layered wave at the bottom provides separation from the final disclosure. The sampled root is transparent because the dark appearance comes from background artwork; match the visible indigo field instead of assigning transparency to a white page.

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

Lay out ten feature items in two desktop columns with a small icon rail beside each text block. Headings use 16px extra-bold type and descriptions use 16px with 26.4px line height. At 390px, the items become one column with text starting 55px from the left. The ownership callout and disclosure remain part of this single cohesive section. Retain the 128px opening space above the section heading.

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.