Balsamiq — lavender product-trial CTA

---
version: alpha
name: Balsamiq — lavender product-trial CTA
colors:
  primary: '#AE1C59'
  ink: '#311C3B'
  surface: '#FFFFFF'
  lavender: '#D1C0FF'
  motif: '#DACCFF'
typography:
  heading:
    fontFamily: Lexend
    fontSize: 45px
    fontWeight: 500
    lineHeight: 51.75px
  body:
    fontFamily: Lexend
    fontSize: 20.25px
    fontWeight: 300
    lineHeight: 30.375px
  control:
    fontFamily: Lexend
    fontSize: 18px
    fontWeight: 300
    lineHeight: 27px
rounded:
  control: 18px
spacing:
  control-block: 13.5px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.ink}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

A lavender closing call-to-action card pairing large plum copy and a magenta trial button with a deliberately edge-cropped wireframe preview.

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

## Colors

Observed palette: primary: #AE1C59; ink: #311C3B; surface: #FFFFFF; lavender: #D1C0FF; motif: #DACCFF. 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 45px / 51.75px, weight 500, using Lexend; its measured width is 631.16px. The corresponding mobile sample is 27.984px / 32.1816px, width 286.00px. Computed styles may describe a parent while a child paints a colored word. Exact selected element bounds: desktop 1440.00 × 594.00px; mobile 390.00 × 392.69px. 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

Use the final main section as the component boundary. Inset a broad rounded lavender panel within white gutters. Desktop balances a large left text block with a right-hand product preview that intentionally exits the card at its right edge.

Responsive evidence: The desktop section is 1440px wide and the mobile section 390px wide. At mobile, the screenshot illustration is hidden and the headline, reassurance and trial button form a left-aligned stack inside the lavender panel. The crop contains the entire section and its original white spacing.

## Elevation & Depth

Large rounded panel corners, a faint oversized background motif and a subtle product-preview shadow provide depth. The magenta rounded action should remain the strongest small shape.

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 13.5px 27px. Match that control's role rather than applying the same radius to every container.

## Components

Preserve the source invitation about product ideas getting lost in translation, the short no-credit-card reassurance and one Start your free trial link. Do not add an email field or call this an auth form. The source trial action was not submitted.

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.