Eagle — dark creative-asset product landing

---
version: alpha
name: Eagle — dark creative-asset product landing
colors:
  primary: '#0072EF'
  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: 20px
    fontWeight: 400
    lineHeight: 30px
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 long black product landing with pastel-gradient headings, vivid application screenshots, themed feature grids and a dense resource footer.

Captured from https://eagle.cool/ at 2026-10-17T06:02:24.132309+00:00. This reference preserves the complete public page.

## Colors

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

- h1 “Organizing design files has never been easier”: 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.
- h2 “An asset manager tailored for designers”: 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.
- h2 “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; 20px, weight 600, line height 30px.
- h2 “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; 20px, weight 600, line height 30px.
- h2 “Search”: 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

Center the page within a 1200px desktop rail with a slim header. Lead with a large centered title, supporting copy and download control above a screenshot carousel. Follow with themed feature chapters using varied bento grids; end with testimonials, a trial/download message and resource columns.

Desktop primary image: 1440 × 17264px 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 header becomes a logo/menu row, the hero title reduces from 60px to 36px, and text fits within 24px side insets. The first product carousel intentionally shows neighboring slides at the edges. Mobile evidence is limited to the opening viewport; selected components have separate full-height mobile evidence.

## Elevation & Depth

Use faintly tinted translucent panels, thin borders and diffuse chapter-colored glows on pure black. Product images provide most of the visual detail.

## Shapes

Rounded panels and screenshots contrast with clean typography and compact pills. Match the source’s generous card radii without rounding the entire page into one container.

## Components

Each chapter uses a colored eyebrow, gradient title and concrete interface imagery. Source testimonials and performance statements are captured as source content only, not endorsements or independently verified statistics.

## Do’s and Don’ts

Keep colorful accents local to each feature chapter and screenshots sharp. Do not invent customer quotes, add unobserved carousel states or present source claims as measured 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.