Readwise — Classic Bordered Registration Screen

---
version: alpha
name: Readwise — Classic Bordered Registration Screen
colors:
  canvas: '#FFFFFF'
  text: '#1F1F1F'
  observed-1: '#FFE7A7'
  observed-2: '#808080'
  observed-3: '#478CD0'
typography:
  label:
    fontFamily: Mulish, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 21.6px
  body:
    fontFamily: Mulish, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 21.6px
---

## Overview
A sparse white signup screen using a centered bordered panel, wordmark, gold Amazon option, labeled first-name/email/password fields, inline verification widget and blue primary action. 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 label sample uses Mulish, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif, 14.4px / 21.6px, weight 700; supporting text uses 14.4px / 21.6px. Its corresponding mobile sample is 14.4px / 21.6px. 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
The narrow panel is centered with large desktop margins. On the 390px view the panel nearly fills the available width while preserving its interior spacing, stacked labels and full-width actions. The existing-account link stays outside the panel below it. Measured screenshot bounds: 1440 × 1000px desktop and 390 × 844px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
A thin gray perimeter separates the panel from the white canvas. Gold and blue button gradients provide a noticeably classic web-form treatment rather than the newer warm marketing-page styling.

## Shapes
Square text fields, rounded gradient actions, a horizontal or divider and a boxed inline Cloudflare checkbox widget.

## Components
Amazon signup alternative, First name, Email and Password, inline Verify you are human widget, Sign Up action and login link. The inline widget is part of the actual public form, not a whole-page challenge; it was not solved or clicked. No registration, provider redirect or trial was initiated.

## Do's and Don'ts
Retain the distinction between authentication alternatives and the main form. Keep the verification affordance in the documented resting state. Do not replace the actual source form with a generic identity-provider page. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.