---
version: alpha
name: Raindrop.io — locale and product-links footer
colors:
  primary: '#333333'
  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: 14px
    fontWeight: 400
    lineHeight: 19.6px
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 restrained white footer grouping a locale control, two small link columns and a muted brand/copyright block.

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

## Colors

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

- footer “🇺🇸 English
🇩🇪 Deutsch
🇯🇵 日本語
🇫🇷 Français
🇪🇸 Español
🇳🇱 Nederlands
🇧🇷 P”: -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.
- label “🇺🇸 English
🇩🇪 Deutsch
🇯🇵 日本語
🇫🇷 Français
🇪🇸 Español
🇳🇱 Nederlands
🇧🇷 P”: -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.
- a “Features”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 16px, weight 500, line height 20px.
- a “Pricing”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 16px, weight 500, line height 20px.
- a “Download”: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 16px, weight 500, line height 20px.

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 a full-width thin top border and a centered interior rail. Put the locale dropdown at the left, two compact navigation columns in the middle and a wider muted brand/copyright block at the right.

Desktop primary image: 1440 × 161px at a 1440px viewport and device scale 1. Mobile evidence: 390 × 360px at a 390px viewport. The selected element measured 1440.00 × 161.00px desktop and 390.00 × 358.97px 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 locale control spans the narrow content width, navigation retains two columns underneath, and the brand/copyright block moves below. The footer grows from about 161px to 360px high. The locale menu was not opened.

## Elevation & Depth

A single hairline rule separates the footer from the page; avoid shadows or a raised panel.

## Shapes

The locale trigger is a lightly outlined rounded pill. Small muted text and underlined legal/social links keep secondary actions subdued.

## Components

Include product/resources links, cloud mark, product descriptor, copyright/location and legal/social links as observed; no newsletter or auth fields are present.

## Do’s and Don’ts

Preserve readable link grouping on mobile. Do not label the locale control as account navigation.

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.