---
version: alpha
name: Raindrop.io — pastel bookmark-manager landing
colors:
  primary: '#1987E1'
  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: 50px
    fontWeight: 600
    lineHeight: 56px
  supporting:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
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 airy white product landing with black system typography, blue account actions, pastel textured blobs and alternating bookmark-manager screenshots.

Captured from https://raindrop.io/ at 2026-10-17T06:01:51.964999+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

- h1 “All-in-one bookmark manager”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 50px, weight 600, line height 56px.
- h2 “Designed for ✐ creatives, built for {coders}”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 36px, weight 600, line height 50.4px.
- h2 “Organize with ease”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 36px, weight 600, line height 50.4px.
- h2 “See the big picture”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 36px, weight 600, line height 50.4px.
- h2 “Connect to your world”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 36px, weight 600, line height 50.4px.

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

Build a centered roughly 1000px content rail below a slim horizontal navigation. Pair the opening left-aligned headline with an oversized product screenshot extending toward the right edge. Alternate text and product artwork through organizing, highlights, backup and teamwork stories; finish with a compact capability grid and footer.

Desktop primary image: 1440 × 5384px 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 navigation becomes a Menu control; text and artwork stack in a 330px content column. The 50px hero wraps across three lines instead of two. The first mobile viewport shows the artwork below the signup/download actions. Later breakpoint transitions and interactive tabs were not exercised.

## Elevation & Depth

Soft shadows lift the product windows; keep the surrounding white page flat. Pastel organic textures sit behind imagery rather than over text.

## Shapes

Use lightly rounded blue primary actions, rounded screenshot windows and large irregular pastel ovals.

## Components

The hero pairs a small announcement pill, a large headline, a short promise and two differently weighted actions. Subsequent product narratives combine headings, descriptions and small inline feature choices.

## Do’s and Don’ts

Preserve whitespace and readable screenshot scale. Do not copy source marketing claims as independently verified facts or invent interactive states.

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.