CleanShot Cloud — Split-Panel Sign-In

---
version: alpha
name: CleanShot Cloud — Split-Panel Sign-In
colors:
  heading-ink: '#FFFFFF'
  body-ink: '#B4B6B9'
  surface: '#FFFFFF'
  action: '#2D7FFB'
  primary: '#2D7FFB'
typography:
  heading:
    fontFamily: Metropolis, "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica,
      Arial, sans-serif
    fontSize: 38px
    fontWeight: 700
    lineHeight: 45.6px
  body:
    fontFamily: Metropolis, "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica,
      Arial, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22.4px
---

## Overview
A logged-out CleanShot Cloud sign-in page with a dark branded introduction beside a restrained white email/password form, account-creation route and secondary SSO links. Inspected on 2026-10-04. This is a complete page reference, not a relabelled section crop.

## Colors
Tokens above reflect observed CSS text/surface colors; Typewolf canvas is sampled from its screenshot. Photography, gradients and alpha treatments remain visual references rather than invented flat-color tokens. Keep saturated blue restricted to actions and emphasized words.

## Typography
The observed leading text sample uses Metropolis, "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica, Arial, sans-serif at 38px, weight 700, with 45.6px leading. Supporting text uses Metropolis, "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica, Arial, sans-serif at 14px / 22.4px. These are computed local samples, not a claimed universal type scale. Use licensed fonts or suitable fallbacks; imagery may contain unrelated typefaces.

## Layout
Desktop divides the page into equal dark and white halves with a narrow form centered within the right panel. At 390px the marketing panel disappears, the app icon and wordmark move above the form, and the two main actions remain adjacent. Labels stay above inputs and password recovery shares the password-label row. The desktop screenshot is 1440 × 1000px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 844px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
The left panel uses a subtle charcoal gradient. The white form area is flat, with light input borders and a visible blue focus halo on the first field.

## Shapes
Inputs and primary actions have rounded rectangular silhouettes; a small square checkbox anchors Remember me. Avoid wrapping the whole form in an extra floating card.

## Components
Email, password, recovery link, Remember me, Create an account, Log in, SSO Login and Setapp links are visible. Blank placeholders are not entered credentials. This records only the logged-out form, not validation or authenticated states.

## Do’s and Don’ts
Maintain a clear contrast between the blue sign-in action and white account-creation action. Do not imply SSO or password recovery was verified; no field entry or form submission occurred. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.