Sketch — Account Registration with Device Guidance

---
version: alpha
name: Sketch — Account Registration with Device Guidance
colors:
  ink: '#000000'
  surface-1: '#FFFFFF'
  surface-2: '#FAFAFA'
typography:
  heading:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      sans-serif
    fontSize: 32px
    fontWeight: 700
    lineHeight: 32px
  body:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      sans-serif
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
---

## Overview
A separate registration screen combining macOS requirements, Google/Apple alternatives, first-name/email/password fields, optional newsletter consent and explicit legal copy. Inspected at 1440px desktop and 390px mobile on 2026-10-02. The primary image is the full desktop page; mobile evidence is the opening viewport only.

## Colors
The palette lists opaque computed CSS colors observed in this reference. A sampled-canvas token, when present, is a screenshot pixel sample rather than a CSS declaration. Gradients, transparency, texture, illustration colors and logo hues remain visually described; do not flatten them into one accent.

## Typography
The measured heading sample (Create a Sketch Account) uses Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, 32px with 32px leading and weight 700. The supporting sample uses Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, 13px / 19.5px. The corresponding mobile heading sample is 24px / 24px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
The desktop registration column is wider and taller than the sign-in form, with a device-requirements callout before the provider buttons. At 390px controls remain stacked within roughly 32px side gutters and the title drops from 32px to 24px. The mobile content exceeds the opening viewport and a nested scroll region was detected; this guide does not claim a complete mobile-page capture. Saved images measure 1440 × 1085px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
A nearly flat white/gray canvas uses thin borders, faint input fills and light provider-button shadows. The device callout is a quiet inset panel rather than a promotional banner.

## Shapes
Rectangular form controls with small radii, square unchecked consent controls, a slim divider, and a full-width pale violet action in the empty state.

## Components
Device-requirements notice, Google/Apple buttons, first name, email, password with visibility icon, unchecked optional newsletter checkbox, terms/privacy links, disabled Sign Up, and an existing-account link. The source legal toast was dismissed. Nothing was entered, checked or submitted.

## Do's and Don'ts
Keep optional newsletter consent separate from legal terms and primary registration. Retain the device compatibility guidance near the beginning. Do not infer password rules or successful registration from this resting state. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.