Balsamiq — sketch-led product landing page

---
version: alpha
name: Balsamiq — sketch-led product landing page
colors:
  primary: '#AE1C59'
  ink: '#311C3B'
  surface: '#FFFFFF'
  cream: '#F7F2EA'
  lavender: '#EDE6FF'
typography:
  heading:
    fontFamily: Lexend
    fontSize: 69.984px
    fontWeight: 500
    lineHeight: 80.4816px
  body:
    fontFamily: Lexend
    fontSize: 18px
    fontWeight: 300
    lineHeight: 27px
  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 plum-and-magenta wireframing site with Lexend headlines, sketch-like UI annotations, lavender feature cards, cream proof bands and a high-contrast footer.

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

## Colors

Observed palette: primary: #AE1C59; ink: #311C3B; surface: #FFFFFF; cream: #F7F2EA; lavender: #EDE6FF. 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 1090.83px. 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

Use a centered text-led hero framed by deliberately hand-drawn annotations and a wide product-video poster. Follow with a two-by-two feature grid, a workflow narrative, customer story, proof carousel, security grid, example carousel and closing lavender call to action.

Responsive evidence: The main headline changes from about 70px/80.48px at desktop to 48.944px/56.29px at 390px. Mobile uses a symbol-only logo, retained trial button and hamburger; the centered copy and video poster narrow to a 350px content width. Only the opening mobile viewport is visually reviewed.

## Elevation & Depth

Softly rounded panels and restrained shadows support the sketch vocabulary. The video poster and CTA are the dominant framed surfaces; do not add decorative shadows to every paragraph.

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

Keep the white canvas, magenta trial links, lavender cards and source product imagery. The consent dialog was rejected through its real Deny control. The chat launcher remains closed. Two missing-image flags belonged to nonvisible horizontal-carousel slides outside the captured width, not blank assets in the visible slide set. Do not reproduce testimonial claims as your own proof.

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.