Balsamiq — split-panel sign-up screen

---
version: alpha
name: Balsamiq — split-panel sign-up screen
colors:
  primary: '#AE1C59'
  ink: '#311C3B'
  surface: '#FFFFFF'
  benefit-panel: '#2A1137'
  disabled: '#D68CAB'
typography:
  heading:
    fontFamily: Lexend
    fontSize: 30px
    fontWeight: 600
    lineHeight: 36px
  control:
    fontFamily: Lexend
    fontSize: 16px
    fontWeight: 300
    lineHeight: 24px
rounded:
  control: 16px
spacing:
  control-block: 8px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.ink}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

A branded registration screen with a white form column and deep-plum product-benefit panel, paired name inputs, Google continuation and a muted magenta submit action.

Source: https://balsamiq.cloud/#signup. Captured 2026-10-06T06:03:06.312562+00:00. This guide describes the observed reference, not an official brand specification.

## Colors

Observed palette: primary: #AE1C59; ink: #311C3B; surface: #FFFFFF; benefit-panel: #2A1137; disabled: #D68CAB. 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 30px / 36px, weight 600, using Lexend; its measured width is 480.00px. The corresponding mobile sample is 30px / 36px, width 326.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

At desktop divide the screen into two halves. Place the logo and centered form content in the left half and product benefits plus a wireframe-to-mobile illustration in the dark right half. In the form, put Google above the OR divider, paired names, work email, password, agreement and continuation.

Responsive evidence: At 390px the dark illustration panel disappears and a short product-benefit introduction appears above the form on white. The 480px desktop heading/form column becomes 326px wide, retaining a 30px heading. First and last names remain side by side; the remaining inputs stack.

## Elevation & Depth

The right-half plum surface supplies contrast rather than a floating modal shadow. White fields have thin neutral outlines; the pink-looking continuation button is the visibly muted state of the magenta accent. Keep the illustrated product panel absent on narrow screens.

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 16px radius and padding 8px 40px. Match that control's role rather than applying the same radius to every container.

## Components

This captures the actual #signup state linked from the homepage; the canonical stored page URL omits the fragment. It is visually distinct from the login panel. Required agreement remains unchecked; Google, credentials, continuation and trial setup were not used.

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.