Raindrop.io — Free and Pro pricing page

---
version: alpha
name: Raindrop.io — Free and Pro pricing page
colors:
  primary: '#F16556'
  surface: '#FFFFFF'
  text: '#000000'
typography:
  primaryRole:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 34px
    fontWeight: 600
    lineHeight: 42.5px
  supporting:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 15px
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 complete white pricing page contrasting a neutral Free plan with coral-accented Pro yearly pricing, followed by an expanded text FAQ.

Captured from https://raindrop.io/pro/buy at 2026-10-17T06:02:59.566729+00:00. This reference preserves the complete public page.

## Colors

Primary accent `#F16556`, 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

- h1 “Simple pricing”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 34px, weight 600, line height 42.5px.
- h3 “Free”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 22px, weight 500, line height 27.5px.
- h3 “Pro yearly”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 22px, weight 500, line height 27.5px.
- h1 “Frequently asked questions”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 34px, weight 600, line height 42.5px.
- p “—20%”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 12px, weight 700, line height 15px.

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

Place the pricing title and monthly/yearly radio controls above a two-column comparison. The Free panel starts lower than the Pro panel, whose upper corner carries a small illustration. Use aligned checkmark feature lists, a strong full-width coral subscription action and a text-first FAQ below.

Desktop primary image: 1440 × 1975px 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 plans move into a vertical flow, but the source page measures 470px scroll width. The Free panel and some long copy exceed the viewport; this is an observed source limitation, not an endorsed responsive pattern. Mobile evidence covers the first viewport only.

## Elevation & Depth

Thin pale borders define the plans. Keep shadows restrained and reserve the coral outline for the paid tier.

## Shapes

Square-ish outlined plan panels contrast with rounded radio controls and the coral subscription button.

## Components

Capture reflects the default yearly selection and displayed euro price including VAT. Prices are source-page evidence at capture time, not universal or guaranteed. Billing toggles, tooltips and checkout were not tested.

## Do’s and Don’ts

Make plan differences scannable. Do not recreate the measured mobile overflow in a new implementation; constrain cards and wrap long copy.

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.