# Expandable FAQ list

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: caf81be4-443f-4f37-8c3c-1bf063911ed1
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A centered oversized bold heading sits above a single-column list, so the hierarchy is obvious at a glance.
- Evenly spaced rows with thin light-grey borders and right-aligned plus icons give a calm, consistent rhythm and an obvious cue to click.
- Black text on a white canvas with muted grey accents keeps the questions easy to scan, and the plain wording lets the content carry the section.

What a screenshot can't show:
- The recording only shows the section scrolling into view (about 33–37s); no accordion expand or collapse timing was captured.
- Measured spacing shows 16px gaps between rows and 60px section padding top and bottom; content widths range from 902 to 1152px.

Borrow: Pair one very large headline with a quiet, evenly spaced list of hairline-bordered rows so the page has a clear entry point and an effortless scan.
Leave alone: Don't copy Krea's Suisse Intl-style typeface or its exact black, white and blue palette; use a free neutral grotesque such as Inter or Instrument Sans with your own colours.

## Classification

- Type: faq
- Layout: Centered header above a single-column list of accordion items with right-aligned plus icons.
- Styles: minimal, bold
- Confidence: 100%

## Purpose and structure

A clean, minimal frequently asked questions section using simple expandable accordion rows.

Visual signature: Stacked list of questions bordered by thin lines with small plus signs on the right.

## Components

- accordion
- heading
- plus icon

## Typography

- Display: Krea 3 Suisse Intl — 132px 500
- Heading: Krea 3 Suisse Intl — 100px 500
- Body: Suisse Intl — 20px 500

## Functional palette

- Canvas: canvas #FFFFFF
- Text: text #000000
- Primary-Action: primary action #2E6CF6
- Surface: surface #111111
- Muted-Text: muted text #737373
- Border: border #E5E5E5

## Motion evidence

- 33.0–37.0s — Scrolling down to an expanding FAQ section. (88% confidence)

## Section quality

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

- Typography: 58 — Large bold display heading at 100px Krea 3 Suisse Intl paired with modest 20px-scale body-weight question text creates clear hierarchy, but the pairing is a standard oversized-headline-over-list pattern with no distinctive type craft beyond scale and tracking. Next tier: No secondary typographic treatment (e.g., answer text styling, numeral treatment) is visible to elevate beyond a competent heading/list contrast.
- Composition: 56 — Centered heading over a single-column list of evenly spaced bordered rows with right-aligned plus icons is a clean, legible, conventional FAQ layout with consistent rhythm (64px row height, 16px gaps) but no spatial tension or distinguishing structural idea. Next tier: Layout is a generic centered-list template; needs an asymmetric, reflowed, or unexpected structural choice to read as memorable rather than just tidy.
- Motion: inconclusive — Gemini only notes a generic scroll-into-view moment for the section; no timestamped accordion expand/collapse interaction detail is supplied, so expansion motion quality cannot be judged. Next tier: Need specific timestamped evidence of the accordion open/close animation (easing, icon rotation, height transition) to score motion.
- Content: 55 — Questions are clearly written and relevant to the product, integrated into a plain functional list with no visual content elements beyond text and icons. Next tier: Content presentation is purely textual with no supporting visual or layout device that ties content meaning to the section's form.
- Originality: 38 — This is one of the most common accordion-FAQ patterns on the web (bordered rows, right plus icon, centered title) with no distinguishing visual signature. Next tier: Lacks any invented interaction, layout twist, or typographic idea that isn't interchangeable with countless other FAQ sections.
- Adaptability: 62 — Structure (heading + stacked bordered rows + icon toggle) is simple and deterministically specified (padding, gaps, row heights, border/radius tokens), making it straightforward to reskin or restructure for other content. Next tier: Lack of documented accordion expand-state styling (open row treatment, answer typography) limits full behavioral portability.

Strengths:
- Clear, consistent visual rhythm across all accordion rows with uniform height and spacing
- Strong, legible heading-to-list size hierarchy anchors the section immediately
- Clean minimal borders and icon placement keep the list easy to scan

Weaknesses:
- Generic, interchangeable FAQ accordion pattern with no distinguishing idea
- No visible content for the expanded/answer state to assess quality or treatment
- Motion behavior (accordion open/close) not described with enough detail to evaluate
- Plus icons and row treatment are purely functional with no unique visual signature

Why it does not reach the next tier: The section executes the standard accordion-list pattern cleanly but introduces no structural, typographic, or interaction idea that would distinguish it from thousands of similar FAQ sections; to reach strong/memorable it would need a distinctive layout, reveal behavior, or visual device tied to content.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the row structure, spacing tokens, and heading hierarchy directly; supply your own typeface and icon style, and define an expand/collapse transition since none is documented here.

What transfers:
- Centered heading over single-column bordered accordion list structure
- Right-aligned plus-icon toggle convention
- Consistent row height and spacing rhythm

Dependencies:
- Specific accordion open/close animation and easing (not documented)
- Brand typeface (Krea 3 Suisse Intl) for heading impact
- Answer-state content styling, currently unknown

## 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 timestamped detail on the accordion expand/collapse interaction
- No visible answer/expanded-state content or styling to assess
- Deterministic facts cover only collapsed-state layout, not open-state behavior

## 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: faq
- Source type: faq
- Structure: centered single-column
- Layout: Centered header above a single-column list of accordion items with right-aligned plus icons.
- Styles: minimal, bold
- Components: accordion, heading, plus icon
- Purpose: A clean, minimal frequently asked questions section using simple expandable accordion rows.
- Visual signature: Stacked list of questions bordered by thin lines with small plus signs on the right.
- Place on the page: 21 of 22, after Call to action (`krea-ai:C20`), before Other (`krea-ai:C22`)

### Crop and composition

- Crop: 1440×957px; aspect ratio 1.505:1
- Page bounds: 18427–19384px of 21224px
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### 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": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "132px",
      "family": "Krea 3 Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.",
      "sampleId": "font-34",
      "confidence": 1,
      "lineHeight": "116.2px",
      "letterSpacing": "-2.6px"
    },
    {
      "role": "heading",
      "size": "100px",
      "family": "Krea 3 Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.",
      "sampleId": "font-8",
      "confidence": 1,
      "lineHeight": "96px",
      "letterSpacing": "-3px"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.",
      "sampleId": "font-19",
      "confidence": 0.95,
      "lineHeight": "28px",
      "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": [],
  "functionalPalette": [
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.",
      "sampleId": "color-4",
      "confidence": 1
    },
    {
      "hex": "#2E6CF6",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.",
      "sampleId": "color-31",
      "confidence": 1
    },
    {
      "hex": "#111111",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).",
      "sampleId": "color-5",
      "confidence": 0.9
    },
    {
      "hex": "#737373",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.",
      "sampleId": "color-17",
      "confidence": 0.9
    },
    {
      "hex": "#E5E5E5",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.",
      "sampleId": "color-32",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Large radii (e.g., 20px-30px) for main content blocks/images, and full-round (50% or 999px) for buttons, tabs, and tags.",
  "density": "Low density. The layout prioritizes large imagery and massive text over packing in information, allowing each feature to breathe.",
  "evidence": "Observed via pill buttons, massive display fonts (font-34, font-6), large rounded media frames, and stark black/white section transitions.",
  "borderStyle": "Mostly borderless, relying on background contrast (dark/light) or subtle, thin light-gray borders (e.g., color-32) for delineating form fields or specific card boundaries.",
  "buttonStyle": "Pill-shaped. Primary actions use solid vibrant blue (color-31) or stark contrasting black/white depending on the section's canvas. Secondary actions use subtle grays or frosted glass effects (color-18, color-38).",
  "cornerStyle": "Consistent use of fully rounded (pill-shaped) elements for buttons and tags, combined with distinct rounded corners on large media cards and form containers.",
  "contentWidth": "Responsive, centering content in a wide max-width container but allowing large media elements and bold typography to bleed towards the edges.",
  "spacingRhythm": "Generous vertical spacing between major sections, utilizing massive typographic scaling to define rhythm. Elements within cards have tighter, functional padding."
}
```

### Reconstruction specification

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

- Root: 1440×957px; block; padding {"top":"60px","left":"32px","right":"32px","bottom":"60px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 16px.
- Representative content widths: 1152, 952, 902px.
- Layout containers: 8; cards/surfaces: 0; media elements: 8; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 18427,
      "bottom": 19384,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×957px",
    "position": "x 0px, y 18427px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "60px",
      "left": "32px",
      "right": "32px",
      "bottom": "60px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px solid rgb(229, 229, 229)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      16
    ],
    "representativeContentWidthsPx": [
      1152,
      952,
      902
    ]
  },
  "columns": [
    {
      "element": "section · Frequently asked questions What is Krea 3? Krea 3 is Krea's new image editing model. It is built for",
      "size": "1152×837px",
      "position": "x 144px, y 18487px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "div · What is Krea 3?",
      "size": "902×64px",
      "position": "x 269px, y 18607px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "button · What is Krea 3?",
      "size": "902×64px",
      "position": "x 269px, y 18607px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "16px"
    },
    {
      "element": "div · Is Krea 3 just a smaller model?",
      "size": "902×64px",
      "position": "x 269px, y 18699px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "button · Is Krea 3 just a smaller model?",
      "size": "902×64px",
      "position": "x 269px, y 18699px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "16px"
    },
    {
      "element": "div · How is Krea 3 so fast and inexpensive?",
      "size": "902×64px",
      "position": "x 269px, y 18791px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "button · How is Krea 3 so fast and inexpensive?",
      "size": "902×64px",
      "position": "x 269px, y 18791px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "16px"
    },
    {
      "element": "div · Are these prices temporary or subsidized?",
      "size": "902×64px",
      "position": "x 269px, y 18883px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "8px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1147px, y 18627px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1147px, y 18719px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1147px, y 18811px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1147px, y 18903px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1147px, y 18995px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1147px, y 19087px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1147px, y 19179px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1147px, y 19271px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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-2926",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 18427,
      "width": 1440,
      "height": 957
    },
    "role": null,
    "label": "Frequently asked questions What is Krea 3? Krea 3 is Krea's new image editing model. It is built for",
    "border": "0px solid rgb(229, 229, 229)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "60px",
      "left": "32px",
      "right": "32px",
      "bottom": "60px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-2937",
      "tag": "svg",
      "rect": {
        "x": 1147,
        "y": 18627,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2947",
      "tag": "svg",
      "rect": {
        "x": 1147,
        "y": 18719,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2957",
      "tag": "svg",
      "rect": {
        "x": 1147,
        "y": 18811,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2967",
      "tag": "svg",
      "rect": {
        "x": 1147,
        "y": 18903,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2977",
      "tag": "svg",
      "rect": {
        "x": 1147,
        "y": 18995,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2987",
      "tag": "svg",
      "rect": {
        "x": 1147,
        "y": 19087,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2997",
      "tag": "svg",
      "rect": {
        "x": 1147,
        "y": 19179,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3007",
      "tag": "svg",
      "rect": {
        "x": 1147,
        "y": 19271,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 18427,
    "bottom": 19384,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-2928",
      "gap": "normal",
      "tag": "section",
      "rect": {
        "x": 144,
        "y": 18487,
        "width": 1152,
        "height": 837
      },
      "role": null,
      "label": "Frequently asked questions What is Krea 3? Krea 3 is Krea's new image editing model. It is built for",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-2935",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 269,
        "y": 18607,
        "width": 902,
        "height": 64
      },
      "role": "heading",
      "label": "What is Krea 3?",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2936",
      "gap": "16px",
      "tag": "button",
      "rect": {
        "x": 269,
        "y": 18607,
        "width": 902,
        "height": 64
      },
      "role": null,
      "label": "What is Krea 3?",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2945",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 269,
        "y": 18699,
        "width": 902,
        "height": 64
      },
      "role": "heading",
      "label": "Is Krea 3 just a smaller model?",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2946",
      "gap": "16px",
      "tag": "button",
      "rect": {
        "x": 269,
        "y": 18699,
        "width": 902,
        "height": 64
      },
      "role": null,
      "label": "Is Krea 3 just a smaller model?",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2955",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 269,
        "y": 18791,
        "width": 902,
        "height": 64
      },
      "role": "heading",
      "label": "How is Krea 3 so fast and inexpensive?",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2956",
      "gap": "16px",
      "tag": "button",
      "rect": {
        "x": 269,
        "y": 18791,
        "width": 902,
        "height": 64
      },
      "role": null,
      "label": "How is Krea 3 so fast and inexpensive?",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2965",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 269,
        "y": 18883,
        "width": 902,
        "height": 64
      },
      "role": "heading",
      "label": "Are these prices temporary or subsidized?",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      16
    ],
    "representativeContentWidthsPx": [
      1152,
      952,
      902
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 8,
    "animations": 0,
    "elementsInSection": 27
  },
  "surfaces": {
    "radii": [
      "8px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-31T06:25:43.715Z",
  "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

1. **scroll** — Scrolling down to an expanding FAQ section. (33s–37s; 88% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

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: low
- What transfers: Centered heading over single-column bordered accordion list structure; Right-aligned plus-icon toggle convention; Consistent row height and spacing rhythm
- Dependencies: Specific accordion open/close animation and easing (not documented); Brand typeface (Krea 3 Suisse Intl) for heading impact; Answer-state content styling, currently unknown
- Guidance: Reuse the row structure, spacing tokens, and heading hierarchy directly; supply your own typeface and icon style, and define an expand/collapse transition since none is documented here.

### Evidence readiness

- Coverage: 6/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples.

### Agent implementation prompt

Create an original faq section inspired by the design evidence titled “Expandable FAQ list”.

Purpose: A clean, minimal frequently asked questions section using simple expandable accordion rows.

Structure: centered single-column. Source layout label: Centered header above a single-column list of accordion items with right-aligned plus icons.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Stacked list of questions bordered by thin lines with small plus signs on the right.

Components: accordion, heading, plus icon.

Style direction: minimal, bold.

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

Typography evidence: {"role":"display","size":"132px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.","sampleId":"font-34","confidence":1,"lineHeight":"116.2px","letterSpacing":"-2.6px"} {"role":"heading","size":"100px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.","sampleId":"font-8","confidence":1,"lineHeight":"96px","letterSpacing":"-3px"} {"role":"body","size":"20px","family":"Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.","sampleId":"font-19","confidence":0.95,"lineHeight":"28px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.","sampleId":"color-1","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.","sampleId":"color-4","confidence":1} {"hex":"#2E6CF6","name":"primary action","role":"primary-action","source":"computed","evidence":"color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.","sampleId":"color-31","confidence":1} {"hex":"#111111","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).","sampleId":"color-5","confidence":0.9} {"hex":"#737373","name":"muted text","role":"muted-text","source":"computed","evidence":"color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.","sampleId":"color-17","confidence":0.9} {"hex":"#E5E5E5","name":"border","role":"border","source":"computed","evidence":"color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.","sampleId":"color-32","confidence":0.8}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":18427,"width":1440,"height":957},"padding":{"top":"60px","left":"32px","right":"32px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[16],"representativeContentWidthsPx":[1152,952,902]}; surfaces {"radii":["8px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":1147,"y":18627,"width":24,"height":24},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1147,"y":18719,"width":24,"height":24},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1147,"y":18811,"width":24,"height":24},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1147,"y":18903,"width":24,"height":24},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: Scrolling down to an expanding FAQ section. (88% confidence)

Transfer these principles: Centered heading over single-column bordered accordion list structure; Right-aligned plus-icon toggle convention; Consistent row height and spacing rhythm.

Dependencies: Specific accordion open/close animation and easing (not documented); Brand typeface (Krea 3 Suisse Intl) for heading impact; Answer-state content styling, currently unknown.

Adaptation guidance: Reuse the row structure, spacing tokens, and heading hierarchy directly; supply your own typeface and icon style, and define an expand/collapse transition since none is documented here.

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