Sketch — Minimal Multi-Provider Sign-in

---
version: alpha
name: Sketch — Minimal Multi-Provider Sign-in
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: 12px
    fontWeight: 400
    lineHeight: 18px
---

## Overview
A restrained light sign-in screen with a narrow centered column, Google/Apple/SSO choices, labeled email/password inputs, account recovery and a disabled violet submit action. 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 (Sign in to Sketch) 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, 12px / 18px. 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 page places a compact form below a widely spaced header with the diamond at left and Help at right. At 390px the form spans almost the screen width with 16px side gutters, and the title changes from 32px to 24px. Provider actions remain stacked above the email/password form; the alternate account link stays below a separator. Saved images measure 1440 × 1000px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
The page has no enclosing raised card. Very light gray input fills and small provider-button shadows separate controls from the near-white background. Inputs remain neutral after the legal notice is dismissed; the empty form action is pale violet.

## Shapes
Small-radius rectangular fields and full-width provider buttons, with horizontal rules around the alternative sign-in paths. The eye icon sits inside the password field.

## Components
Google, Apple and SSO options; empty email/password fields; Forgot Password link; disabled Sign In button; Create an account link; legal/support footer. The dismissible legal notice was closed via its existing cross button. No values were entered and no authentication or validation was attempted.

## Do's and Don'ts
Maintain visible field labels and keep recovery near the password field. Use the disabled action state only when validation warrants it. Do not confuse the source-owned screen with an external identity-provider page. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.