Readwise — Provider Choices and Email Sign-in

---
version: alpha
name: Readwise — Provider Choices and Email Sign-in
colors:
  canvas: '#FFFFFF'
  text: '#478CD0'
  observed-1: '#1F1F1F'
  observed-2: '#FFE7A7'
typography:
  label:
    fontFamily: Mulish, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: Mulish, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A complete logged-out sign-in screen with a centered bordered panel, gold Amazon and black Apple options, an or divider, email/password fields and a blue email-login button. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This is a complete page/screen capture, not an isolated element crop.

## Colors
The YAML palette records computed opaque CSS text/action colors. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. Preserve the visual contrast between the main reading surface, text and actions shown in the capture.

## Typography
The selected a sample uses Mulish, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif, 16px / 24px, weight 400; supporting text uses 16px / 24px. Its corresponding mobile sample is 16px / 24px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.

## Layout
A single narrow panel centers on the desktop canvas. At 390px it expands toward the side gutters, retains provider actions above the email/password pair and keeps recovery plus signup links below. Field purpose is shown through placeholders in this observed state, unlike the separately captured labeled signup form. Measured screenshot bounds: 1440 × 1000px desktop and 390 × 844px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
The thin gray panel edge and lightly shaded fields remain flat. Gradients distinguish the gold and blue actions while the Apple alternative is solid black.

## Shapes
Wide rounded provider buttons, short horizontal divider rules, rectangular inputs and a large blue rounded primary action.

## Components
Amazon, Apple and email sign-in choices, password recovery and alternate signup navigation. Provider flows, password recovery, errors, field validation and submission outcomes were not tested.

## Do's and Don'ts
Keep authentication alternatives visually separable and preserve the recovery link. In a new implementation add persistent accessible labels rather than relying only on placeholders. Do not claim accessibility conformance from this screenshot. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.