Eagle — cyan organization feature bento

---
version: alpha
name: Eagle — cyan organization feature bento
colors:
  primary: '#33FFFF'
  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 cyan-accented feature chapter with a centered heading and mixed-size cards demonstrating tags, folders, smart folders, annotation and related tools.

Captured from https://eagle.cool/ at 2026-10-17T06:04:01.256940+00:00. This reference isolates `section.theme-cyan`.

## Colors

Primary accent `#33FFFF`, 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 “Organize

Streamline your assets management

Overcome disorganized ass”: 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 “Organize”: 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 “Streamline your assets management”: 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 “Overcome disorganized assets with Eagle’s diverse categorization, keep”: 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.
- a “Tag

Add tags to any assets for quicker organization and retrieval.”: 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.

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

Start with a cyan Organize eyebrow, a large centered two-line title and a short description. Use four large demonstration cards in a two-by-two desktop grid, followed by four narrower feature cards in a single row. Each card leads with a label and short description before a cropped application view.

Desktop primary image: 1200 × 1688px at a 1440px viewport and device scale 1. Mobile evidence: 342 × 1959px at a 390px viewport. The selected element measured 1200.00 × 1688.00px desktop and 342.00 × 1958.19px 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 four large cards stack individually; the four smaller cards become a two-column grid. The selected element narrows from 1200px to 342px. Its height grows from roughly 1688px to 1959px. Screenshot artwork is deliberately masked inside cards, not accidentally clipped text.

## Elevation & Depth

Faint cyan radial light behind the heading and near-black tinted cards add depth. Keep card borders thin and translucent.

## Shapes

Large rounded cards and inset rounded screenshots establish a consistent enclosure pattern; smaller feature cards repeat the same treatment.

## Components

Preserve the distinction between taxonomy examples, smart-folder rules, annotation and the smaller Action/Find Duplicates/Rating/Auto Tag examples. Captured interface text is illustrative product evidence; these capabilities were not operated.

## Do’s and Don’ts

Keep card headings and descriptions visible above artwork. Do not flatten all cards into identical sizes or mistake illustrated application controls for live page controls.

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.