Raindrop.io — compact password sign-in screen

---
version: alpha
name: Raindrop.io — compact password sign-in screen
colors:
  primary: '#1987E1'
  surface: '#FFFFFF'
  text: '#000000'
typography:
  primaryRole:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji"
    fontSize: 14.625px
    fontWeight: 600
    lineHeight: 22.5px
  supporting:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji"
    fontSize: 15.75px
    fontWeight: 400
    lineHeight: 22.05px
omitted:
- section: spacing
  reason: Per-reference geometry is recorded in Layout; a global spacing scale was
    not inferred.
- section: rounded
  reason: Observed shape roles are described in Shapes, without inventing a universal
    radius scale.
- section: components
  reason: The individual pattern is specified in prose, not an inferred component
    API.
---

## Overview

A minimal white login screen with email-or-username and password fields, a reset-password link, a blue sign-in action and separated identity-provider alternatives.

Captured from https://app.raindrop.io/account/login at 2026-10-17T06:03:12.038923+00:00. This reference preserves the complete public page.

## Colors

Primary accent `#1987E1`, surface `#FFFFFF` and principal text `#000000` describe visible roles. These are reference-local colors, not an exhaustive brand system. Match the screenshot where gradients or image colors differ.

## Typography

- a “Reset password”: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 14.625px, weight 600, line height 22.5px.
- a “Sign in with google”: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 15.75px, weight 400, line height 31.5px.
- a “Sign in with apple”: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 15.75px, weight 400, line height 31.5px.
- a “Sign up”: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 15.75px, weight 600, line height 31.5px.
- a “Support”: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 15.75px, weight 400, line height 22.05px.

These are measured computed styles; rendered font availability and platform-specific fallback can affect exact glyph shapes. Do not apply the primary-role token indiscriminately to every text level.

## Layout

Center the cloud mark above a narrow two-field login column. Align Reset password to the right of the Password label. Put the blue submit button above a divider, two provider actions and a centered Sign up link. Keep the footer low on the page.

Desktop primary image: 1440 × 1000px at a 1440px viewport and device scale 1. Mobile evidence: 390 × 844px at a 390px viewport. The primary screenshot is the complete page; mobile evidence covers only the opening 844px viewport.

At 390px the form widens to about 354px within 18px insets; labels, reset link and provider rows remain readable without horizontal overflow. Login, reset-password and identity-provider interactions were not submitted or followed.

## Elevation & Depth

Flat white canvas, lightly tinted inputs and delicate horizontal dividers create hierarchy without a card shadow.

## Shapes

Use restrained small-radius fields, a blue focus outline and full-width rectangular actions.

## Components

The email-or-username field is auto-focused. The password recovery link belongs beside the password label; the registration link sits below all sign-in methods.

## Do’s and Don’ts

Keep recovery and registration discoverable without matching the primary action weight. Do not add unsupported error messages or claim an authentication result.

Use only observed source content. Sizes above are measured; unquantified visual treatments are qualitative observations. No forms were submitted, accounts created, trials started or purchases made.