Raindrop.io — blue email registration screen

---
version: alpha
name: Raindrop.io — blue email registration 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: 400
    lineHeight: 20.475px
  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

An untouched account-registration screen with a centered cloud mark, three labeled fields, a blue signup action, legal copy and separate Google/Apple options.

Captured from https://app.raindrop.io/account/signup at 2026-10-17T06:03:05.509779+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 “Terms of Service”: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 14.625px, weight 400, line height 20.475px.
- a “Privacy Policy”: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 14.625px, weight 400, line height 20.475px.
- 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 in”: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 15.75px, weight 600, line height 31.5px.

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 a narrow registration column on a white full-height canvas. Put the cloud logo above the form, then a short introduction, Username, Email and Password fields, the primary submit action, legal disclosure, social alternatives and a sign-in link. Keep support/copyright near the viewport bottom.

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 fields fill the viewport minus approximately 18px side insets. Legal copy wraps, the logo remains centered, and the footer keeps copyright and Support on one row. No input, validation, social authentication or submission was performed.

## Elevation & Depth

Use flat pale-gray input surfaces and hairline separators instead of a floating card or heavy shadow.

## Shapes

Inputs and buttons use small corner radii; provider actions are white outlined rectangles with recognizable marks.

## Components

The first field is auto-focused with a blue outline in the captured logged-out state. Labels remain visible above fields. This is distinct from the two-field sign-in screen.

## Do’s and Don’ts

Retain field labels, legal disclosure and the alternative sign-in route. Never infer success, error or password-visibility behavior from this untouched screen.

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.