Craft — Cloud-Glass Shared Account Entry

---
version: alpha
name: Craft — Cloud-Glass Shared Account Entry
colors:
  ink: '#1A1C1E'
  surface-1: '#FCFDFE'
  surface-2: '#2E6DE9'
  surface-3: '#9ED4EF'
typography:
  heading:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, sans-serif
    fontSize: 24px
    fontWeight: 600
    lineHeight: 36px
  body:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16.1px
---

## Overview
A source-owned shared account-entry screen with a floating app icon, translucent rounded panel, email-first continuation and Google, Apple, Microsoft and SSO alternatives over soft clouds. 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 (Welcome to Craft) uses Inter, -apple-system, BlinkMacSystemFont, sans-serif, 24px with 36px leading and weight 600. The supporting sample uses Inter, -apple-system, BlinkMacSystemFont, sans-serif, 14px / 16.1px. The corresponding mobile heading sample is 24px / 36px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
A roughly 588px-wide desktop glass panel centers the icon, welcome title, email entry and provider stack. At 390px the panel fits within 16px margins; the title stays 24px and input/actions stretch across the inner column. The app icon overlaps the panel top edge, and legal text remains at the bottom. Saved images measure 1440 × 1000px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
A thin white border and translucent pale panel float above a blue-to-white cloud field. The app icon and panel cast restrained soft shadows. The email action is visibly pale in the empty state.

## Shapes
Large-radius panel corners, medium-radius email and provider controls, a rounded-square application icon and an unboxed SSO text link.

## Components
Welcome heading, email input, Continue, SSO entry, Google/Apple/Microsoft choices and legal/reCAPTCHA notices. Marketing Log in and Download → Open in browser lead to this same entry flow; it is collected once with both sign-in and sign-up tags. No email or credentials were supplied and no provider route was opened.

## Do's and Don'ts
Preserve the lightweight glass hierarchy and source-owned branding. Distinguish the shared entry step from a completed account creation or verified login. Do not fabricate a password form that is not present. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.