# Target Banner CTA

Schema: Design Details SECTION.md v3.2
Website: saybriefly.com
Source: https://saybriefly.com/
Source section IDs: e781a434-8255-4d84-8bc2-90aae1c34828, b04f4890-6d69-4ce1-a5b5-f47d501b40c9
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The copy and image say the same thing: a frowning target full of pencils illustrates "No more failed projects," so the playful art carries the message.
- A heavy 60px headline over a lighter 20px body gives a clear hierarchy, and the single button leaves no doubt about the next step.
- The layout is a simple split: text and button on the left, illustration anchoring the right, on a bold solid color field with generous padding.

What a screenshot can't show:
- The recording showed no animation or hover motion, so the banner reads as fully static.
- The headline is Bricolage Grotesque at 60px, weight 800, with 64px line height and a wide 6px letter spacing; body copy is Inter at 20px, weight 300, with 32px line height.

Borrow: Draw the pain point your headline names as a small, funny illustration, then put one clear button beside it.
Leave alone: Don't copy the frowning target with pencils, the light blue field, or the Bricolage Grotesque headline; use a different mascot idea and a free heavy grotesque such as Familjen Grotesk.

## Classification

- Type: cta
- Layout: Left-aligned text and CTA button, with a right-aligned illustration on a solid colored background.
- Styles: colourful, illustrative, playful
- Confidence: 95%

## Purpose and structure

A full-width colorful banner calling the user to download the app, featuring an archery target illustration.

Visual signature: Light blue background banner with 'No more failed projects.' and a stylized target with arrows.

## Components

- headline
- body-text
- cta-button
- icon-illustration

## Typography

- Display: Bricolage Grotesque — 80px 800
- Heading: Inter — 30px 600
- Body: Inter — 20px 300
- Mono: Roboto Mono — 16px 400

## Functional palette

- Canvas: canvas #FCFAF5
- Surface: surface #FFFFFF
- Text: text #173300
- Muted-Text: muted text #525252
- Border: border #B6B6B6
- Primary-Action: primary action #0A3400
- Accent: accent #FFEB5B
- Accent: accent #DD6C3E

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 59.82/100 (Competent)
Scored coverage: 85%

- Typography: 58 — Bold, heavy display headline paired with lighter body copy establishes clear hierarchy; contrast is functional but the pairing (heavy grotesque headline + generic sans body) is a familiar CTA convention rather than a distinctive typographic system. Next tier: Needs more deliberate type craft—scale variation, unique treatment of line breaks, or a distinctive voice in the headline setting—to move beyond competent contrast.
- Composition: 62 — Simple, confident left-text/right-illustration split on a bold solid-color field with generous padding; the illustration anchors the right third and the CTA sits with clear breathing room, giving a clean, purposeful banner layout. Next tier: Composition is a standard two-zone banner; achieving strong tier would require asymmetry, layered depth, or an interaction between text and illustration rather than a static side-by-side split.
- Motion: not_assessed — No animation data or timestamped motion evidence supplied; animations array is empty and no motion_moments were reported. Next tier: Requires timestamped visible motion evidence to assess.
- Content: 64 — The illustration directly visualizes the copy's pain point (failed projects/wasted time as a frowning target riddled with pencils), giving genuine synergy between message and image rather than decorative stock art. Next tier: To reach strong tier, the illustration-copy relationship would need additional layers of meaning or interactivity beyond a single clever literal metaphor.
- Originality: 60 — The sad-face target-and-pencils metaphor is a genuinely playful, specific idea that avoids generic CTA imagery, giving it a distinct personality. Next tier: The banner format itself (solid color, left text, right illustration, single button) is extremely conventional; the idea needs a less-templated container to feel more than good/polished.
- Adaptability: 55 — Deterministic evidence shows clear separable roles (headline, body, button, illustration svg) with defined rect/padding, making structural extraction straightforward. Next tier: Lack of radius/shadow/animation specificity and reliance on a bespoke illustration limits how cleanly the visual skin can be swapped without redesigning the artwork.

Strengths:
- Illustration wittily embodies the pain-point copy (sad target, pencils as failed 'arrows')
- Clear, high-contrast layout with generous padding aids readability at a glance
- Consistent color-blocking creates a strong standalone visual beat in the page flow

Weaknesses:
- Layout follows a very standard two-zone CTA banner template
- Typography pairing is functional but not distinctive
- No motion evidence provided, limiting assessment of dynamism
- Single CTA and static illustration leave little room for surprise beyond the initial joke

Why it does not reach the next tier: The section is held to competent/good territory because its structural template (solid color banner, left copy, right illustration, single button) is a widely used CTA pattern; only the illustration concept elevates it. Without motion evidence or a more unconventional layout/type treatment, it cannot exceed 'good'.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the layout skeleton and hierarchy, but replace the illustration with an equally specific, on-brand metaphor rather than generic clip art to preserve the content-integration strength.

What transfers:
- Two-zone color-block banner structure
- Headline+body+CTA button grouping
- Illustration-as-metaphor placement pattern

Dependencies:
- Custom hand-drawn SVG illustration (target/pencils) is a bespoke asset not trivially reproducible
- Specific copy tied to the metaphor

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No animation/motion data supplied, so dynamism is unassessed
- Exact font rendering and color values for this section are inferred from site-level tokens rather section-specific measurement
- Only desktop crops provided; responsive behavior unknown

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: cta
- Source type: cta
- Structure: Left-aligned text and CTA button, with a right-aligned illustration on a solid colored background.
- Layout: Left-aligned text and CTA button, with a right-aligned illustration on a solid colored background.
- Styles: colourful, illustrative, playful
- Components: headline, body-text, cta-button, icon-illustration
- Purpose: A full-width colorful banner calling the user to download the app, featuring an archery target illustration.
- Visual signature: Light blue background banner with 'No more failed projects.' and a stylized target with arrows.
- Place on the page: 18 of 20, after Testimonials (`saybriefly-com:EditorialTestimonial`), before Footer (`8c8cebfa-7abf-47f3-a6d7-a7d009359c94`)

### Crop and composition

- Crop: 1440×584px; aspect ratio 2.466:1
- Page bounds: 18696–19280px of 20673px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "card/subheading",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "20px",
      "weight": "600",
      "lineHeight": "28px",
      "letterSpacing": "normal",
      "sample": "Download for Mac",
      "element": "span",
      "occurrences": 9,
      "sourceId": "font-2"
    },
    {
      "role": "card/subheading",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "30px",
      "weight": "600",
      "lineHeight": "36px",
      "letterSpacing": "normal",
      "sample": "Ask anything. Months later.",
      "element": "h4",
      "occurrences": 4,
      "sourceId": "font-3"
    },
    {
      "role": "section heading",
      "family": "Bricolage Grotesque",
      "stack": "\"Bricolage Grotesque\", sans-serif",
      "size": "60px",
      "weight": "800",
      "lineHeight": "64px",
      "letterSpacing": "6px",
      "sample": "No more failed projects. No more wasted time.",
      "element": "h4",
      "occurrences": 1,
      "sourceId": "font-5"
    },
    {
      "role": "body/supporting copy",
      "family": "Roboto Mono",
      "stack": "\"Roboto Mono\", monospace",
      "size": "15px",
      "weight": "400",
      "lineHeight": "22px",
      "letterSpacing": "normal",
      "sample": "Mac app only",
      "element": "p",
      "occurrences": 12,
      "sourceId": "font-6"
    },
    {
      "role": "card/subheading",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "22px",
      "weight": "600",
      "lineHeight": "34px",
      "letterSpacing": "normal",
      "sample": "Takes the notes, so you can be in the call",
      "element": "p",
      "occurrences": 10,
      "sourceId": "font-7"
    },
    {
      "role": "card/subheading",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "20px",
      "weight": "300",
      "lineHeight": "32px",
      "letterSpacing": "normal",
      "sample": "What was decided. Who said what. What changed. Scribbble remembers it all.",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-8"
    },
    {
      "role": "body/supporting copy",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "16px",
      "weight": "300",
      "lineHeight": "24px",
      "letterSpacing": "normal",
      "sample": "Speak Portuguese, Spanish, French or English. It writes back what you actually said, not an English",
      "element": "p",
      "occurrences": 3,
      "sourceId": "font-11"
    },
    {
      "role": "body/supporting copy",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "16px",
      "weight": "600",
      "lineHeight": "22.4px",
      "letterSpacing": "normal",
      "sample": "Emma Joel, Creative Director",
      "element": "p",
      "occurrences": 3,
      "sourceId": "font-12"
    },
    {
      "role": "body/supporting copy",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "14px",
      "weight": "400",
      "lineHeight": "21px",
      "letterSpacing": "normal",
      "sample": "Itsmy Studio",
      "element": "p",
      "occurrences": 3,
      "sourceId": "font-13"
    },
    {
      "role": "card/subheading",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "24px",
      "weight": "300",
      "lineHeight": "32px",
      "letterSpacing": "normal",
      "sample": "Your projects run smoother. Your clients stay happy. Your Fridays stay free.",
      "element": "p",
      "occurrences": 1,
      "sourceId": "font-14"
    },
    {
      "role": "UI/supporting text",
      "family": "Bricolage Grotesque",
      "stack": "\"Bricolage Grotesque\", sans-serif",
      "size": "16px",
      "weight": "600",
      "lineHeight": "22px",
      "letterSpacing": "normal",
      "sample": "Scope change detection & prevention",
      "element": "span",
      "occurrences": 8,
      "sourceId": "font-16"
    },
    {
      "role": "UI/supporting text",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "10px",
      "weight": "600",
      "lineHeight": "16px",
      "letterSpacing": "normal",
      "sample": "Meeting memory.",
      "element": "span",
      "occurrences": 4,
      "sourceId": "font-17"
    },
    {
      "role": "section heading",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "50px",
      "weight": "600",
      "lineHeight": "62.5px",
      "letterSpacing": "normal",
      "sample": "“SayBriefly allows me to give my full awareness in meetings, enabling radical presence, relevant que",
      "element": "blockquote",
      "occurrences": 3,
      "sourceId": "font-18"
    },
    {
      "role": "section heading",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "60px",
      "weight": "800",
      "lineHeight": "70px",
      "letterSpacing": "normal",
      "sample": "lose 6 hours a week",
      "element": "span",
      "occurrences": 2,
      "sourceId": "font-20"
    },
    {
      "role": "UI/supporting text",
      "family": "Inter",
      "stack": "Inter, sans-serif",
      "size": "14px",
      "weight": "500",
      "lineHeight": "20px",
      "letterSpacing": "normal",
      "sample": "Listening",
      "element": "span",
      "occurrences": 1,
      "sourceId": "font-24"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "80px",
      "family": "Bricolage Grotesque",
      "source": "computed",
      "traits": "Regular",
      "weight": "800",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Used for the dominant opening headline, where the largest and most expressive type treatment appears.",
      "sampleId": "font-4",
      "confidence": 0.99,
      "lineHeight": "84px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "30px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "600",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Repeated on feature headings for meeting memory, action items, and summaries.",
      "sampleId": "font-3",
      "confidence": 0.95,
      "lineHeight": "36px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: Used for recurring explanatory paragraphs beneath feature headings.",
      "sampleId": "font-8",
      "confidence": 0.95,
      "lineHeight": "32px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "16px",
      "family": "Roboto Mono",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-19: computed CSS at 1440×1000; AI role: Used for the desktop navigation labels and echoed by the site's utility-label aesthetic.",
      "sampleId": "font-19",
      "confidence": 0.97,
      "lineHeight": "24px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#FCFAF5",
      "cssValue": "rgb(252, 250, 245)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "control-background"
      ],
      "occurrences": 4,
      "sourceId": "color-3"
    },
    {
      "value": "#D5F5C2",
      "cssValue": "rgb(213, 245, 194)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-9"
    },
    {
      "value": "#FFFAD4",
      "cssValue": "rgb(255, 250, 212)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 4,
      "sourceId": "color-11"
    },
    {
      "value": "#CFCBDC",
      "cssValue": "rgb(207, 203, 220)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 3,
      "sourceId": "color-13"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 2,
      "sourceId": "color-14"
    },
    {
      "value": "#B6C15C",
      "cssValue": "rgb(182, 193, 92)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-15"
    },
    {
      "value": "#1F1E1A",
      "cssValue": "rgb(31, 30, 26)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-16"
    },
    {
      "value": "#FCEB5B",
      "cssValue": "rgb(252, 235, 91)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-17"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.9)",
      "alpha": 0.9019607843137255,
      "appliedAs": [
        "text"
      ],
      "occurrences": 1,
      "sourceId": "color-19"
    },
    {
      "value": "#000000",
      "cssValue": "oklab(0 0 0 / 0.2)",
      "alpha": 0.2,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-20"
    },
    {
      "value": "#E5E5E5",
      "cssValue": "rgb(229, 229, 229)",
      "alpha": 1,
      "appliedAs": [
        "border"
      ],
      "occurrences": 4,
      "sourceId": "color-25"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.7)",
      "alpha": 0.6980392156862745,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-27"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#FCFAF5",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(252, 250, 245); AI role: Measured as the body background and visible as the warm cream page field.",
      "sampleId": "color-3",
      "confidence": 0.99
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-14: computed rgb(255, 255, 255); AI role: Measured on light interface surfaces within product demonstrations.",
      "sampleId": "color-14",
      "confidence": 0.82
    },
    {
      "hex": "#173300",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(23, 51, 0); AI role: Measured on navigation text and matches the dominant deep-green typography and line work.",
      "sampleId": "color-2",
      "confidence": 0.99
    },
    {
      "hex": "#525252",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-10: computed oklch(0.439 0 0); AI role: Measured on subdued integration notes beneath feature descriptions.",
      "sampleId": "color-10",
      "confidence": 0.96
    },
    {
      "hex": "#B6B6B6",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-18: computed rgb(182, 182, 182); AI role: Measured on the navigation border and supports the restrained outlined system.",
      "sampleId": "color-18",
      "confidence": 0.93
    },
    {
      "hex": "#0A3400",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-4: computed rgb(10, 52, 0); AI role: Measured as a deep-green section background consistent with the filled action treatment.",
      "sampleId": "color-4",
      "confidence": 0.93
    },
    {
      "hex": "#FFEB5B",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-7: computed rgb(255, 235, 91); AI role: Measured on the download label and recurring bright-yellow branding, highlights, chips, and frames.",
      "sampleId": "color-7",
      "confidence": 0.99
    },
    {
      "hex": "#DD6C3E",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-12: computed rgb(221, 108, 62); AI role: Measured on integration borders and dividers; orange also highlights warnings and key numerical claims.",
      "sampleId": "color-12",
      "confidence": 0.98
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Unmeasured; visibly moderate on cards and buttons, with fully rounded chips, voice bars, and circular icon controls.",
  "density": "Low-to-moderate density overall, with airy storytelling sections and denser product mockups or comparison rows.",
  "evidence": "The desktop capture repeatedly shows broad whitespace, centered section framing, rounded controls, ruled separators, and outlined cream surfaces.",
  "borderStyle": "Thin dark outlines, dotted horizontal rules, a dashed navigation frame, and selective orange dividers create a sketched utility feel.",
  "buttonStyle": "Dark-green filled CTAs with bright labels; secondary actions use simple cream fills and thin dark outlines.",
  "cornerStyle": "Softly rounded rectangles and pill-shaped controls contrast with organic, irregular hand-drawn artwork.",
  "contentWidth": "Broad centered desktop container with readable text columns; selected artwork and decorative strokes extend toward full width.",
  "spacingRhythm": "Expansive chapter spacing with compact text groups, then large pauses around illustrations, statistics, and narrative transitions."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1320×2820px; block; padding {"top":"0px","left":"24px","right":"24px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 8px.
- Representative content widths: 1320, 1272, 1160, 924, 816, 814, 768, 672px.
- Layout containers: 4; cards/surfaces: 0; media elements: 8; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 6398,
      "bottom": 19280,
      "pageHeight": 20673
    }
  },
  "container": {
    "size": "1320×2820px",
    "position": "x 60px, y 10721px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "left": "24px",
      "right": "24px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "60px",
      "right": "60px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px solid rgb(10, 55, 3)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      8
    ],
    "representativeContentWidthsPx": [
      1320,
      1272,
      1160,
      924,
      816,
      814,
      768,
      672
    ]
  },
  "columns": [
    {
      "element": "a · Download for Mac",
      "size": "266×62px",
      "position": "x 587px, y 9713px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "8px"
    },
    {
      "element": "section · It's 4pm on a Friday. The brief is locked, the client is happy, and Scribbble already sent the meeti",
      "size": "1320×464px",
      "position": "x 60px, y 14136px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · Download for Mac",
      "size": "266×62px",
      "position": "x 587px, y 14456px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "8px"
    },
    {
      "element": "a · Download for Mac",
      "size": "266×62px",
      "position": "x 140px, y 19113px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "8px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "6px",
      "3.35544e+07px",
      "40px"
    ],
    "borders": [
      "1px solid rgb(23, 51, 0)",
      "1px solid rgb(255, 235, 91)",
      "2px solid rgb(23, 51, 0)"
    ],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · block w-full -my-6 md:-my-16 lg:-my-50 relative z-0",
    "size": "1440×866px",
    "position": "x 0px, y 13406px",
    "aspectRatio": 1.7,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://saybriefly.com/line5.png"
  },
  {
    "element": "img · block w-full",
    "size": "1440×651px",
    "position": "x 0px, y 6409px",
    "aspectRatio": 2.2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://saybriefly.com/line1.svg"
  },
  {
    "element": "canvas · canvas",
    "size": "1272×480px",
    "position": "x 84px, y 15008px",
    "aspectRatio": 2.7,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "img · block w-full transition-opacity duration-500",
    "size": "596×559px",
    "position": "x 760px, y 10721px",
    "aspectRatio": 1.1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://saybriefly.com/meeting-img-1.png"
  },
  {
    "element": "img · block w-full absolute top-0 left-0 opacity-0 transition-opacity duration-500",
    "size": "596×558px",
    "position": "x 760px, y 10721px",
    "aspectRatio": 1.1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://saybriefly.com/meeting-img-2.png"
  },
  {
    "element": "img · block w-full absolute top-0 left-0 opacity-0 transition-opacity duration-500",
    "size": "596×558px",
    "position": "x 760px, y 10721px",
    "aspectRatio": 1.1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://saybriefly.com/meeting-img-3.png"
  },
  {
    "element": "img · block w-full absolute top-0 left-0 opacity-0 transition-opacity duration-500",
    "size": "596×558px",
    "position": "x 760px, y 10721px",
    "aspectRatio": 1.1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://saybriefly.com/meeting-img-4.png"
  },
  {
    "element": "img · block w-full",
    "size": "1440×218px",
    "position": "x 0px, y 9839px",
    "aspectRatio": 6.6,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://saybriefly.com/line2.svg"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": {
    "id": "ld-1925",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 60,
      "y": 10721,
      "width": 1320,
      "height": 2820
    },
    "role": null,
    "label": "Meeting memory.Ask anything. Months later.What was decided. Who said what. What changed. Scribbble r",
    "border": "0px solid rgb(10, 55, 3)",
    "margin": {
      "top": "0px",
      "left": "60px",
      "right": "60px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "24px",
      "right": "24px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-1966",
      "tag": "img",
      "rect": {
        "x": 0,
        "y": 13406,
        "width": 1440,
        "height": 866
      },
      "role": null,
      "label": "block w-full -my-6 md:-my-16 lg:-my-50 relative z-0",
      "media": {
        "alt": "",
        "src": "https://saybriefly.com/line5.png",
        "naturalWidth": 3840,
        "naturalHeight": 2309
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1761",
      "tag": "img",
      "rect": {
        "x": 0,
        "y": 6409,
        "width": 1440,
        "height": 651
      },
      "role": null,
      "label": "block w-full",
      "media": {
        "alt": "",
        "src": "https://saybriefly.com/line1.svg",
        "naturalWidth": 1920,
        "naturalHeight": 868
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 2.2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1990",
      "tag": "canvas",
      "rect": {
        "x": 84,
        "y": 15008,
        "width": 1272,
        "height": 480
      },
      "role": null,
      "label": "canvas",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 2.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1956",
      "tag": "img",
      "rect": {
        "x": 760,
        "y": 10721,
        "width": 596,
        "height": 559
      },
      "role": null,
      "label": "block w-full transition-opacity duration-500",
      "media": {
        "alt": "Meeting memory feature showing chat interface",
        "src": "https://saybriefly.com/meeting-img-1.png",
        "naturalWidth": 859,
        "naturalHeight": 806
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1957",
      "tag": "img",
      "rect": {
        "x": 760,
        "y": 10721,
        "width": 596,
        "height": 558
      },
      "role": null,
      "label": "block w-full absolute top-0 left-0 opacity-0 transition-opacity duration-500",
      "media": {
        "alt": "Action items feature showing task board",
        "src": "https://saybriefly.com/meeting-img-2.png",
        "naturalWidth": 861,
        "naturalHeight": 806
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1958",
      "tag": "img",
      "rect": {
        "x": 760,
        "y": 10721,
        "width": 596,
        "height": 558
      },
      "role": null,
      "label": "block w-full absolute top-0 left-0 opacity-0 transition-opacity duration-500",
      "media": {
        "alt": "Meeting summary feature showing summary panel",
        "src": "https://saybriefly.com/meeting-img-3.png",
        "naturalWidth": 861,
        "naturalHeight": 806
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1959",
      "tag": "img",
      "rect": {
        "x": 760,
        "y": 10721,
        "width": 596,
        "height": 558
      },
      "role": null,
      "label": "block w-full absolute top-0 left-0 opacity-0 transition-opacity duration-500",
      "media": {
        "alt": "Meeting intelligence feature showing scoring",
        "src": "https://saybriefly.com/meeting-img-4.png",
        "naturalWidth": 861,
        "naturalHeight": 806
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1914",
      "tag": "img",
      "rect": {
        "x": 0,
        "y": 9839,
        "width": 1440,
        "height": 218
      },
      "role": null,
      "label": "block w-full",
      "media": {
        "alt": "",
        "src": "https://saybriefly.com/line2.svg",
        "naturalWidth": 1920,
        "naturalHeight": 290
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 6.6,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 6398,
    "bottom": 19280,
    "pageHeight": 20673
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-1908",
      "gap": "8px",
      "tag": "a",
      "rect": {
        "x": 587,
        "y": 9713,
        "width": 266,
        "height": 62
      },
      "role": null,
      "label": "Download for Mac",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-1967",
      "gap": "normal",
      "tag": "section",
      "rect": {
        "x": 60,
        "y": 14136,
        "width": 1320,
        "height": 464
      },
      "role": null,
      "label": "It's 4pm on a Friday. The brief is locked, the client is happy, and Scribbble already sent the meeti",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-1972",
      "gap": "8px",
      "tag": "a",
      "rect": {
        "x": 587,
        "y": 14456,
        "width": 266,
        "height": 62
      },
      "role": null,
      "label": "Download for Mac",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2174",
      "gap": "8px",
      "tag": "a",
      "rect": {
        "x": 140,
        "y": 19113,
        "width": 266,
        "height": 62
      },
      "role": null,
      "label": "Download for Mac",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      8
    ],
    "representativeContentWidthsPx": [
      1320,
      1272,
      1160,
      924,
      816,
      814,
      768,
      672
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 8,
    "animations": 0,
    "elementsInSection": 187
  },
  "surfaces": {
    "radii": [
      "6px",
      "3.35544e+07px",
      "40px"
    ],
    "borders": [
      "1px solid rgb(23, 51, 0)",
      "1px solid rgb(255, 235, 91)",
      "2px solid rgb(23, 51, 0)"
    ],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-09-21T04:22:27.682Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

No timestamped authored motion is attached. Use only restrained baseline transitions.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: medium
- What transfers: Two-zone color-block banner structure; Headline+body+CTA button grouping; Illustration-as-metaphor placement pattern
- Dependencies: Custom hand-drawn SVG illustration (target/pencils) is a bespoke asset not trivially reproducible; Specific copy tied to the metaphor
- Guidance: Reuse the layout skeleton and hierarchy, but replace the illustration with an equally specific, on-brand metaphor rather than generic clip art to preserve the content-integration strength.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original cta section inspired by the design evidence titled “Target Banner CTA”.

Purpose: A full-width colorful banner calling the user to download the app, featuring an archery target illustration.

Structure: Left-aligned text and CTA button, with a right-aligned illustration on a solid colored background.. Source layout label: Left-aligned text and CTA button, with a right-aligned illustration on a solid colored background.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: Light blue background banner with 'No more failed projects.' and a stylized target with arrows.

Components: headline, body-text, cta-button, icon-illustration.

Style direction: colourful, illustrative, playful.

Observed crop: 1440×584px (2.466:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"80px","family":"Bricolage Grotesque","source":"computed","traits":"Regular","weight":"800","evidence":"font-4: computed CSS at 1440×1000; AI role: Used for the dominant opening headline, where the largest and most expressive type treatment appears.","sampleId":"font-4","confidence":0.99,"lineHeight":"84px","letterSpacing":"normal"} {"role":"heading","size":"30px","family":"Inter","source":"computed","traits":"Regular","weight":"600","evidence":"font-3: computed CSS at 1440×1000; AI role: Repeated on feature headings for meeting memory, action items, and summaries.","sampleId":"font-3","confidence":0.95,"lineHeight":"36px","letterSpacing":"normal"} {"role":"body","size":"20px","family":"Inter","source":"computed","traits":"Regular","weight":"300","evidence":"font-8: computed CSS at 1440×1000; AI role: Used for recurring explanatory paragraphs beneath feature headings.","sampleId":"font-8","confidence":0.95,"lineHeight":"32px","letterSpacing":"normal"} {"role":"mono","size":"16px","family":"Roboto Mono","source":"computed","traits":"Regular","weight":"400","evidence":"font-19: computed CSS at 1440×1000; AI role: Used for the desktop navigation labels and echoed by the site's utility-label aesthetic.","sampleId":"font-19","confidence":0.97,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#FCFAF5","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(252, 250, 245); AI role: Measured as the body background and visible as the warm cream page field.","sampleId":"color-3","confidence":0.99} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-14: computed rgb(255, 255, 255); AI role: Measured on light interface surfaces within product demonstrations.","sampleId":"color-14","confidence":0.82} {"hex":"#173300","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(23, 51, 0); AI role: Measured on navigation text and matches the dominant deep-green typography and line work.","sampleId":"color-2","confidence":0.99} {"hex":"#525252","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed oklch(0.439 0 0); AI role: Measured on subdued integration notes beneath feature descriptions.","sampleId":"color-10","confidence":0.96} {"hex":"#B6B6B6","name":"border","role":"border","source":"computed","evidence":"color-18: computed rgb(182, 182, 182); AI role: Measured on the navigation border and supports the restrained outlined system.","sampleId":"color-18","confidence":0.93} {"hex":"#0A3400","name":"primary action","role":"primary-action","source":"computed","evidence":"color-4: computed rgb(10, 52, 0); AI role: Measured as a deep-green section background consistent with the filled action treatment.","sampleId":"color-4","confidence":0.93} {"hex":"#FFEB5B","name":"accent","role":"accent","source":"computed","evidence":"color-7: computed rgb(255, 235, 91); AI role: Measured on the download label and recurring bright-yellow branding, highlights, chips, and frames.","sampleId":"color-7","confidence":0.99} {"hex":"#DD6C3E","name":"accent","role":"accent","source":"computed","evidence":"color-12: computed rgb(221, 108, 62); AI role: Measured on integration borders and dividers; orange also highlights warnings and key numerical claims.","sampleId":"color-12","confidence":0.98}

Typography measured inside this section: {"id":"font-2","size":"20px","count":9,"family":"Inter","traits":"Regular","weight":"600","contexts":[{"tag":"span","top":576,"text":"Download for Mac","property":"font"},{"tag":"a","top":6448,"text":"Learn More","property":"font"},{"tag":"a","top":8923,"text":"Learn more","property":"font"}],"fontStack":"Inter, sans-serif","lineHeight":"28px","letterSpacing":"normal"} {"id":"font-3","size":"30px","count":4,"family":"Inter","traits":"Regular","weight":"600","contexts":[{"tag":"h4","top":11030,"text":"Ask anything. Months later.","property":"font"},{"tag":"h4","top":11594,"text":"From \"we should do that\" to done.","property":"font"},{"tag":"h4","top":12158,"text":"The whole meeting. In 60 seconds.","property":"font"}],"fontStack":"Inter, sans-serif","lineHeight":"36px","letterSpacing":"normal"} {"id":"font-5","size":"60px","count":1,"family":"Bricolage Grotesque","traits":"Regular","weight":"800","contexts":[{"tag":"h4","top":18857,"text":"No more failed projects. No more wasted time.","property":"font"}],"fontStack":"\"Bricolage Grotesque\", sans-serif","lineHeight":"64px","letterSpacing":"6px"} {"id":"font-6","size":"15px","count":12,"family":"Roboto Mono","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":16300,"text":"Mac app only","property":"font"},{"tag":"p","top":16445,"text":"when you ask","property":"font"},{"tag":"p","top":16445,"text":"when you ask","property":"font"}],"fontStack":"\"Roboto Mono\", monospace","lineHeight":"22px","letterSpacing":"normal"} {"id":"font-7","size":"22px","count":10,"family":"Inter","traits":"Regular","weight":"600","contexts":[{"tag":"p","top":16277,"text":"Takes the notes, so you can be in the call","property":"font"},{"tag":"p","top":16422,"text":"Finds the emails that actually need you","property":"font"},{"tag":"p","top":16567,"text":"Remembers what the client agreed to","property":"font"}],"fontStack":"Inter, sans-serif","lineHeight":"34px","letterSpacing":"normal"} {"id":"font-8","size":"20px","count":4,"family":"Inter","traits":"Regular","weight":"300","contexts":[{"tag":"p","top":11090,"text":"What was decided. Who said what. What changed. Scribbble remembers it all.","property":"font"},{"tag":"p","top":11654,"text":"Every next step detected, assigned, and on your board. No follow-up. No action item lost.","property":"font"},{"tag":"p","top":12218,"text":"TL;DR, decisions, open questions, sentiment. Ready when the call ends. Know what was resolved and wh","property":"font"}],"fontStack":"Inter, sans-serif","lineHeight":"32px","letterSpacing":"normal"} {"id":"font-11","size":"16px","count":3,"family":"Inter","traits":"Regular","weight":"300","contexts":[{"tag":"p","top":15680,"text":"Speak Portuguese, Spanish, French or English. It writes back what you actually said, not an English ","property":"font"},{"tag":"p","top":15680,"text":"Email, Slack, a doc, the terminal. If a cursor is blinking in it, you can talk into it.","property":"font"},{"tag":"p","top":15680,"text":"Filler and false starts come out. Your phrasing stays in. Nothing gets rewritten into corporate voic","property":"font"}],"fontStack":"Inter, sans-serif","lineHeight":"24px","letterSpacing":"normal"} {"id":"font-12","size":"16px","count":3,"family":"Inter","traits":"Regular","weight":"600","contexts":[{"tag":"p","top":18224,"text":"Emma Joel, Creative Director","property":"font"},{"tag":"p","top":18169,"text":"Marcus Chen, Product Manager","property":"font"},{"tag":"p","top":18169,"text":"Sarah Williams, Head of Design","property":"font"}],"fontStack":"Inter, sans-serif","lineHeight":"22.4px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-3","hex":"#FCFAF5","alpha":1,"count":4,"contexts":[{"tag":"body","top":0,"text":"ProductProject ManagementNotes and BriefsCalendarEmailFeaturesScope Creep DetectionThe AgentScribbbl","property":"background"},{"tag":"nav","top":16,"text":"ProductProject ManagementNotes and BriefsCalendarEmailFeaturesScope Creep DetectionThe AgentScribbbl","property":"background"},{"tag":"a","top":6448,"text":"Learn More","property":"control-background"}],"cssValue":"rgb(252, 250, 245)"} {"id":"color-9","hex":"#D5F5C2","alpha":1,"count":1,"contexts":[{"tag":"div","top":8603,"text":"Project boards & task management","property":"background"}],"cssValue":"rgb(213, 245, 194)"} {"id":"color-11","hex":"#FFFAD4","alpha":1,"count":4,"contexts":[{"tag":"span","top":10976,"text":"Meeting memory.","property":"background"}],"cssValue":"rgb(255, 250, 212)"} {"id":"color-13","hex":"#CFCBDC","alpha":1,"count":3,"contexts":[{"tag":"div","top":18218,"text":"","property":"background"}],"cssValue":"rgb(207, 203, 220)"} {"id":"color-14","hex":"#FFFFFF","alpha":1,"count":2,"contexts":[{"tag":"span","top":15494,"text":"","property":"background"},{"tag":"div","top":16118,"text":"","property":"background"}],"cssValue":"rgb(255, 255, 255)"} {"id":"color-15","hex":"#B6C15C","alpha":1,"count":1,"contexts":[{"tag":"div","top":16118,"text":"","property":"background"}],"cssValue":"rgb(182, 193, 92)"} {"id":"color-16","hex":"#1F1E1A","alpha":1,"count":1,"contexts":[{"tag":"div","top":16118,"text":"","property":"background"}],"cssValue":"rgb(31, 30, 26)"} {"id":"color-17","hex":"#FCEB5B","alpha":1,"count":1,"contexts":[{"tag":"div","top":16118,"text":"","property":"background"}],"cssValue":"rgb(252, 235, 91)"}

Exact section measurements from the saved element map: root {"rect":{"x":60,"y":10721,"width":1320,"height":2820},"padding":{"top":"0px","left":"24px","right":"24px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8],"representativeContentWidthsPx":[1320,1272,1160,924,816,814,768,672]}; surfaces {"radii":["6px","3.35544e+07px","40px"],"borders":["1px solid rgb(23, 51, 0)","1px solid rgb(255, 235, 91)","2px solid rgb(23, 51, 0)"],"shadows":[]}; media [{"tag":"img","rect":{"x":0,"y":13406,"width":1440,"height":866},"aspectRatio":1.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":0,"y":6409,"width":1440,"height":651},"aspectRatio":2.2,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"canvas","rect":{"x":84,"y":15008,"width":1272,"height":480},"aspectRatio":2.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":760,"y":10721,"width":596,"height":559},"aspectRatio":1.1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Two-zone color-block banner structure; Headline+body+CTA button grouping; Illustration-as-metaphor placement pattern.

Dependencies: Custom hand-drawn SVG illustration (target/pencils) is a bespoke asset not trivially reproducible; Specific copy tied to the metaphor.

Adaptation guidance: Reuse the layout skeleton and hierarchy, but replace the illustration with an equally specific, on-brand metaphor rather than generic clip art to preserve the content-integration strength.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.