Balsamiq — editor-based pricing and comparison

---
version: alpha
name: Balsamiq — editor-based pricing and comparison
colors:
  primary: '#AE1C59'
  ink: '#311C3B'
  surface: '#FFFFFF'
  cream: '#F7F2EA'
  canvas: '#FAF7F3'
typography:
  heading:
    fontFamily: Lexend
    fontSize: 69.984px
    fontWeight: 500
    lineHeight: 80.4816px
  body:
    fontFamily: Lexend
    fontSize: 15.75px
    fontWeight: 300
    lineHeight: 22.5px
  control:
    fontFamily: Lexend
    fontSize: 18px
    fontWeight: 300
    lineHeight: 27px
rounded:
  control: 18px
spacing:
  control-block: 9px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.ink}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

A cream pricing page with monthly/annual controls, an editor-count stepper, three rounded plan cards and a magenta-accented popular middle tier.

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

## Colors

Observed palette: primary: #AE1C59; ink: #311C3B; surface: #FFFFFF; cream: #F7F2EA; 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 69.984px / 80.4816px, weight 500, using Lexend; its measured width is 1190.00px. The corresponding mobile sample is 48.944px / 56.2856px, width 350.00px. Computed styles may describe a parent while a child paints a colored word.

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

## Layout

Center the heading and explanatory copy above the billing switch and editor stepper. Align three plan cards at desktop, elevate the Teams card through its magenta outline and popularity badge, then add customer proof, a feature matrix, FAQs and a project-start CTA.

Responsive evidence: At 390px the pricing title wraps to two lines and the cards stack. The billing switch and editor stepper remain compact and centered. Desktop title size is about 70px, mobile about 49px. Lower comparison-table responsiveness was not visually checked beyond the opening viewport.

## Elevation & Depth

Thin pale borders and rounded white cards sit on a warm canvas. Use magenta only for selected billing, popularity treatment, checks and key actions. The comparison table should remain visually quieter than the offers.

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

## Shapes

A measured visible control uses a 18px radius and padding 9px 0px. Match that control's role rather than applying the same radius to every container.

## Components

The captured default is annual billing for one editor, showing Starter $16, Teams $24 and Enterprise $35 per month/editor. Preserve units and annual-billing context rather than copying prices without conditions. Billing toggles, count changes, FAQs and checkout were not exercised. The consent dialog was rejected; the chat launcher stayed closed.

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.