---
version: alpha
name: Raindrop.io — compact icon capability grid
colors:
  primary: '#000000'
  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: 16px
    fontWeight: 400
    lineHeight: 20px
  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 isolated eight-item capability grid pairing monochrome line icons, short labels and concise descriptions on a white background.

Captured from https://raindrop.io/ at 2026-10-17T06:03:41.968804+00:00. This reference isolates `.landing_ferrari__75ba0`.

## Colors

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

- div “MCP

Search, save, and organize your bookmarks right from Claude, Chat”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 16px, weight 400, line height 20px.
- p “Search, save, and organize your bookmarks right from Claude, ChatGPT, ”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 16px, weight 400, line height 22px.
- p “Add reminders and notifications to your bookmarks.”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 16px, weight 400, line height 22px.
- p “Add tags, move or remove multiple items at once.”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 16px, weight 400, line height 22px.
- p “Arrange items in whatever way makes sense for your project.”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 16px, weight 400, line height 22px.

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

Use three desktop columns with even horizontal spacing and compact vertical groups. Each item aligns a small outline icon in a narrow left gutter with a label and description on the right. The last row has only two items; do not fill it with invented content.

Desktop primary image: 1000 × 313px at a 1440px viewport and device scale 1. Mobile evidence: 330 × 772px at a 390px viewport. The selected element measured 1000.00 × 311.17px desktop and 330.00 × 771.12px mobile. Both crops use current document coordinates measured after a warm-up full-page screenshot; integer rounding adds at most one pixel at each edge.

At 390px the complete grid becomes a single 330px column, preserving item order. Its measured crop grows from roughly 313px to 772px high. Descriptions wrap naturally beneath their labels; no interactions were exercised.

## Elevation & Depth

Keep the grid flat: hierarchy comes from alignment, label weight and whitespace rather than containers.

## Shapes

Monochrome outlined symbols sit beside unboxed text. Do not turn every capability into a rounded card.

## Components

Observed items cover MCP, reminders, batch processing, manual sorting, media uploads, import/export, themes and merge tags. These are source labels, not independently tested capabilities.

## Do’s and Don’ts

Keep icon baselines and description indents consistent. Do not invent extra rows, metrics or operational guarantees.

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.