Balsamiq — standalone login panel

---
version: alpha
name: Balsamiq — standalone login panel
colors:
  primary: '#AE1C59'
  ink: '#311C3B'
  surface: '#FFFFFF'
  muted: '#6B7280'
  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 complete isolated left-side login panel with Balsamiq branding, Google login, labeled email/password controls, recovery and registration links, and muted magenta submission.

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

## Colors

Observed palette: primary: #AE1C59; ink: #311C3B; surface: #FFFFFF; muted: #6B7280; 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. Exact selected element bounds: desktop 720.00 × 1000.00px; mobile 390.00 × 976.84px. 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 the actual first div inside main: the form column including brand and privacy footer, excluding the separate dark product panel. Keep the form centered within this column, with a maximum inner width of 480px. Order Google, divider, email, password, recovery, login and registration.

Responsive evidence: At desktop this panel is 720px wide inside a 1440px viewport; on mobile it occupies the 390px viewport and uses a 326px inner form. Mobile introduces the brief product-benefit text above the form. See measured bounds below for exact capture geometry.

## Elevation & Depth

A flat white panel relies on typography, generous vertical spacing and fine field borders. Keep the muted magenta login button distinct from active links. This wider component boundary retains input focus outlines without cropping their edges.

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 is the #login hash state and exact selector main > div:first-child. It differs materially from registration: no paired names or agreement field, but a password-recovery affordance and a login action. Inputs remain empty. Google, SSO, password recovery and form submission were not tested.

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.