---
version: alpha
name: Eagle — blue collection feature showcase
colors:
  primary: '#6AAFFF'
  surface: '#000000'
  text: '#F7F8F8'
typography:
  primaryRole:
    fontFamily: inter, "inter Fallback", "SF Pro Text", -apple-system, Roboto, "Segoe
      UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "PingFang SC",
      "PingFang TC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif
    fontSize: 60px
    fontWeight: 600
    lineHeight: 66px
  supporting:
    fontFamily: inter, "inter Fallback", "SF Pro Text", -apple-system, Roboto, "Segoe
      UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "PingFang SC",
      "PingFang TC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
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 blue-accented collection chapter pairing a large workflow demonstration with smaller browser-extension and capture-method examples.

Captured from https://eagle.cool/ at 2026-10-17T06:07:02.294569+00:00. This reference isolates `section.theme-blue`.

## Colors

Primary accent `#6AAFFF`, surface `#000000` and principal text `#F7F8F8` describe visible roles. These are reference-local colors, not an exhaustive brand system. Match the screenshot where gradients or image colors differ.

## Typography

- section “Collect

Effortlessly save images and inspiration

Capture fleeting in”: inter, "inter Fallback", "SF Pro Text", -apple-system, Roboto, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; 16px, weight 400, line height 24px.
- p “Collect”: inter, "inter Fallback", "SF Pro Text", -apple-system, Roboto, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; 16px, weight 400, line height 24px.
- h2 “Effortlessly save images and inspiration”: inter, "inter Fallback", "SF Pro Text", -apple-system, Roboto, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; 60px, weight 600, line height 66px.
- p “Capture fleeting inspirations anytime with Eagle browser extension, ca”: inter, "inter Fallback", "SF Pro Text", -apple-system, Roboto, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; 20px, weight 400, line height 30px.
- h3 “Browser Extension”: inter, "inter Fallback", "SF Pro Text", -apple-system, Roboto, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; 20px, weight 600, line height 30px.

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 centered Collect eyebrow, large feature title and short description above a broad demonstration panel. Group supporting collection methods in smaller rounded panels below, retaining distinct image and text roles.

Desktop primary image: 1200 × 1580px at a 1440px viewport and device scale 1. Mobile evidence: 342 × 1423px at a 390px viewport. The selected element measured 1200.00 × 1580.00px desktop and 342.00 × 1421.28px 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 section fits a 342px rail. The main browser-extension example stacks its artwork over text and the install action; the desktop tab row becomes a row of pagination dots. Below it, Screenshot spans the row, followed by Drag & Drop and Clipboard in two columns. The section measures 1200 × 1580px desktop and approximately 342 × 1423px mobile. Capture shows one state of each product illustration, not tested software behavior.

## Elevation & Depth

A faint blue glow and translucent near-black panels separate the chapter from the black page. Use thin soft borders instead of heavy drop shadows.

## Shapes

Rounded demonstrations and inset application imagery contrast with the plain centered headline.

## Components

The source chapter presents browser-extension, drag-and-drop, batch saving and other collection approaches using product imagery. These are observed labels and illustrations, not verified capability claims.

## Do’s and Don’ts

Keep explanatory text separate from detailed screenshots. Do not invent collection performance, animations or interaction results.

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.