Balsamiq — two-column pricing FAQ accordion

---
version: alpha
name: Balsamiq — two-column pricing FAQ accordion
colors:
  primary: '#AE1C59'
  ink: '#311C3B'
  surface: '#FFFFFF'
  canvas: '#FAF7F3'
typography:
  heading:
    fontFamily: Lexend
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
omitted:
- section: spacing
  reason: No standalone spacing scale inferred from this captured reference.
- section: rounded
  reason: No control corner token measured for this isolated reference.
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.ink}'
---

## Overview

An isolated six-question accordion grid with white rounded rows, fine plum-tinted borders, Lexend question text and magenta chevrons on a warm pricing background.

Source: https://balsamiq.com/pricing/. Captured 2026-10-06T06:15:39.285336+00:00. This guide describes the observed reference, not an official brand specification.

## Colors

Observed palette: primary: #AE1C59; ink: #311C3B; surface: #FFFFFF; canvas: #FAF7F3. Values come from source computed styles and inspected native-raster surface samples. Disabled controls are recorded as painted colors where opacity changes their base accent. Preserve the color roles shown in this individual reference.

## Typography

Measured in a 1440px desktop viewport and a 390px mobile viewport at device scale 1. The chosen desktop primary text sample is 18px / 27px, weight 400, using Lexend; its measured width is 503.00px. The corresponding mobile sample is 16px / 24px, width 300.00px. Computed styles may describe a parent while a child paints a colored word. Exact selected element bounds: desktop 1190.00 × 375.00px; mobile 350.00 × 708.00px. Crops use freshly measured document coordinates after a warm-up screenshot.

Maintain the observed heading/body hierarchy. Do not replace the source typeface with a system font without checking wrapping and control widths.

## Layout

Capture only the actual .faqs-accordion-group container, excluding the separate Pricing FAQs heading and adjacent promotional CTA. At desktop arrange two columns of three rows, keeping generous column and row gaps and allowing long questions to wrap without colliding with the chevron.

Responsive evidence: The complete desktop and mobile crops provide the actual grid dimensions below. At 390px the two source columns become a single sequence of six questions, with labels wrapping inside the inset cards. No text is replaced or reduced merely to preserve one-line questions.

## Elevation & Depth

Fine borders define white question rows without heavy shadows. Magenta downward chevrons provide consistent disclosure cues. Keep the warm surrounding canvas and sufficiently large click targets; do not infer focus or expanded-state colors.

No hover, transition timing or shadow blur values were measured. Any additional elevation values would be implementation estimates, not captured tokens.

## Shapes

Follow the original component boundary and preserve the visible illustration and panel geometry; no universal radius scale is inferred.

## Components

Questions cover AI credits, reviewers, projects versus boards, trial payment requirements, solo use and discounts. All items are captured collapsed. No accordion was expanded, so animation, answer layout and multi-open behavior remain untested. Use other with FAQ and accordion tags, not a full pricing-page type.

This is a static recorded state. Interactions not explicitly described as inspected remain untested.

## Do's and Don'ts

- Do preserve the hierarchy, whitespace, source-state distinctions and responsive changes documented above.
- Do keep field labels, content order and visible control affordances intact.
- Do treat captured prices, marketing claims and quotations as dated source content.
- Don't fabricate testimonials, metrics, expanded states, error messages or successful transactions.
- Don't infer dark mode, extra breakpoints or animation timings from these two viewport samples.