# Prompt box hero

Schema: Design Details SECTION.md v3.2
Website: Ardor
Source: https://ardor.cloud/
Source section IDs: e317a36a-99f2-46f5-8589-e39797ab6696
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A centered stack of headline, subhead and input leaves generous whitespace, so the prompt box is clearly the one action on the page.
- The dot-matrix headline is set at a compact 32px in heavy weight against small, plain sans text, which gives clear hierarchy through contrast of character rather than size.
- A pale neutral canvas with a white input surface and soft blurred corner shapes adds atmosphere without competing with the copy.

What a screenshot can't show:
- The placeholder prompt cycles through phrases, each fading in from a 6px blur with an 11.7px upward shift over about 3.4s using ease-in-out.
- Supporting text is very small: 13px for suggestions, 10px for the approval toggle label, and 19px for the section label, all with default letter spacing.

Borrow: Make the input the hero and let a rotating placeholder show example uses, so the product explains itself before anyone types.
Leave alone: Do not copy the Doto dot-matrix headline, the pale grey-green canvas or the blurred corner blobs; use a different distinctive display face, such as a free pixel or mono style, with your own palette.

## Classification

- Type: hero
- Layout: Centered headline, centered input field.
- Styles: minimal, soft, typographic
- Confidence: 95%

## Purpose and structure

A minimalist hero section centered around a text prompt input box, surrounded by soft, abstract floating shapes.

Visual signature: Centered typewriter-style headline above a modern search/prompt input box.

## Components

- headline
- text input
- abstract background shapes

## Typography

- Display: Doto — 32px 900
- Heading: Roboto Flex — 19px 400
- Body: Roboto Flex — 13px 400

## Functional palette

- Canvas: canvas #F2F3F1
- Text: text #000000
- Surface: surface #FFFFFF

## Motion evidence

- 0.0–3.0s — The page begins at the top, showing the hero section with the headline and search bar. (95% confidence)

## Section quality

Overall: 59.25/100 (Competent)
Scored coverage: 100%

- Typography: 62 — Doto pixel/dot-matrix display font for the headline is a deliberate, distinctive choice contrasted against a clean sans body and subhead, giving clear hierarchy. However the pairing is simple and the sizes/weights are fairly conventional beyond the one typeface choice. Next tier: Needs more typographic craft (varied scale, rhythm, or secondary type details) beyond swapping one display font for personality.
- Composition: 58 — Classic centered hero stack (headline, subhead, input) with ample whitespace and soft blurred color blobs in the corners for atmosphere; balanced but a very familiar pattern with no unusual spatial tension or asymmetry. Next tier: Layout is a standard centered hero template; would need an unexpected structural move to exceed competent/good territory.
- Motion: 55 — One deterministic animation is supplied: a cycling headline/placeholder phrase with blur+translateY+opacity fade over 3.4s, a reasonably crafted micro-detail for prompt placeholder rotation, but it is a single, isolated effect. Next tier: Only one timestamped motion moment is evidenced; broader choreography (shape movement, input focus states, staggered reveals) is not confirmed.
- Content: 60 — Copy is tight and on-brand ('One agent. Every app. Any task.'), and the input box with model selector/approval toggle makes the product's function immediately legible through the content itself. Next tier: Content is functional and clear but not doing anything distinctive beyond stating the product proposition plainly.
- Originality: 55 — The prompt-box hero is now a well-worn AI-product pattern; the dot-matrix headline font and soft gradient blobs add some flavor but the overall composition closely matches many competitor AI landing pages. Next tier: Needs a structural or interaction idea that isn't shared by numerous other AI-tool hero sections to be seen as distinctive.
- Adaptability: 65 — Centered hero with input, headline, subhead, and background shapes is a highly portable structural pattern; deterministic tokens (radius, colors, font) are explicit and swappable, decoupling skin from structure cleanly. Next tier: 

Strengths:
- Distinctive dot-matrix display typeface gives the headline a unique identity despite a generic layout
- Clear functional hierarchy: tagline, subhead, input, and model/approval controls are instantly legible
- Cycling placeholder text animation adds a small layer of liveliness to an otherwise static hero
- Soft gradient blob background gives gentle atmosphere without competing with content

Weaknesses:
- Composition is a very standard centered-hero-with-search-bar pattern seen across many AI product sites
- Only a single motion moment is evidenced, limiting judgment of overall motion craft
- Background shapes are decorative but not integrated with content in any novel way
- Originality is constrained by close resemblance to common AI-chat landing hero conventions

Why it does not reach the next tier: The section executes a familiar prompt-box hero competently with one distinctive typographic choice, but lacks a structural or interaction idea uncommon enough, or density of refined motion/compositional detail, to be memorable beyond a polished template.

## Adaptation guidance

- Effort: Low
- Guidance: Swap the display font and gradient blob palette while retaining the structural skeleton (centered headline, subhead, pill input with toggles, cycling placeholder animation) for other prompt-driven product heroes.

What transfers:
- Centered headline + subhead + input hero structure
- Cycling placeholder text animation pattern
- Pill-shaped input with icon row and model-selector affordance
- Soft background color blob treatment

Dependencies:
- Specific dot-matrix 'Doto' font for headline distinctiveness
- Exact gradient blob colors/positions
- Underlying AI agent product framing for copy

## 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%)
- Motion judged from only one timestamped animation; broader interactive or scroll behavior unconfirmed
- No visible evidence of hover/focus states on the input or buttons
- Exact font rendering and blob animation behavior not fully verifiable from static crop

## 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: hero
- Source type: hero
- Structure: centered single-column
- Layout: Centered headline, centered input field.
- Styles: minimal, soft, typographic
- Components: headline, text input, abstract background shapes
- Purpose: A minimalist hero section centered around a text prompt input box, surrounded by soft, abstract floating shapes.
- Visual signature: Centered typewriter-style headline above a modern search/prompt input box.
- Place on the page: 2 of 9, after Navigation (`ardor-cloud:C01`), before Gallery (`ardor-cloud:C03`)

### Crop and composition

- Crop: 1440×923px; aspect ratio 1.56:1
- Page bounds: 77–1000px of 13889px
- 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": [
    {
      "role": "body/supporting copy",
      "family": "Roboto Flex",
      "stack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
      "size": "13px",
      "weight": "400",
      "lineHeight": "15.6px",
      "letterSpacing": "normal",
      "sample": "Audit a spreadsheet or dataset",
      "element": "span",
      "occurrences": 151,
      "sourceId": "font-1"
    },
    {
      "role": "UI/supporting text",
      "family": "Roboto Flex",
      "stack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
      "size": "19px",
      "weight": "400",
      "lineHeight": "22.8px",
      "letterSpacing": "normal",
      "sample": "What people build with Ardor",
      "element": "span",
      "occurrences": 34,
      "sourceId": "font-2"
    },
    {
      "role": "section heading",
      "family": "Doto",
      "stack": "Doto, \"Doto Fallback\"",
      "size": "32px",
      "weight": "900",
      "lineHeight": "32px",
      "letterSpacing": "normal",
      "sample": "One agent. Every app. Any task.",
      "element": "span",
      "occurrences": 10,
      "sourceId": "font-9"
    },
    {
      "role": "action label",
      "family": "Roboto Flex",
      "stack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
      "size": "10px",
      "weight": "400",
      "lineHeight": "9px",
      "letterSpacing": "normal",
      "sample": "Ask for approval",
      "element": "button",
      "occurrences": 4,
      "sourceId": "font-14"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "32px",
      "family": "Doto",
      "source": "computed",
      "traits": "Regular",
      "weight": "900",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: The 'Doto' pixelated font, used at 32px for large, impactful headlines like 'One agent. Every app. Any task.' and animated text.",
      "sampleId": "font-9",
      "confidence": 0.95,
      "lineHeight": "32px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "19px",
      "family": "Roboto Flex",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Roboto Flex at 19px, used for section titles like 'What people build with Ardor' and 'Made in Ardor'.",
      "sampleId": "font-2",
      "confidence": 0.85,
      "lineHeight": "22.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "13px",
      "family": "Roboto Flex",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Roboto Flex at 13px, functioning as the primary body text for descriptions and standard copy across the site.",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "15.6px",
      "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": "#000000",
      "cssValue": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "control-background",
        "background"
      ],
      "occurrences": 2471,
      "sourceId": "color-1"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.75)",
      "alpha": 0.7490196078431373,
      "appliedAs": [
        "background"
      ],
      "occurrences": 35,
      "sourceId": "color-3"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.62)",
      "alpha": 0.6196078431372549,
      "appliedAs": [
        "text",
        "svg-stroke"
      ],
      "occurrences": 97,
      "sourceId": "color-7"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.52)",
      "alpha": 0.5215686274509804,
      "appliedAs": [
        "svg-stroke",
        "text"
      ],
      "occurrences": 48,
      "sourceId": "color-10"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#F2F3F1",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-4: computed rgb(242, 243, 241); AI role: The primary background color of the body, a very light off-white (#F2F3F1).",
      "sampleId": "color-4",
      "confidence": 0.95
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000), used extensively for primary typography, icons, and solid button backgrounds.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-6: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF), used for the background of individual cards (like pricing tiers and feature cards) to lift them off the canvas.",
      "sampleId": "color-6",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Calculated radii appear substantial on larger containers (e.g., the terminal cards) and fully circular on buttons and input fields.",
  "density": "Low density. The layout is airy, relying on negative space and large typography rather than packing information tightly.",
  "evidence": "The reliance on 'color-4' for the canvas and 'color-6' for cards creates a soft structure. Pill-shaped buttons are evident in the nav ('Start Free') and tabs. The generous spacing is visible in the gaps between 'Hero', 'What people build', and 'Made in Ardor' sections.",
  "borderStyle": "Most elements lack visible solid borders, relying instead on subtle backgrounds or shadows, except for very light, subtle borders on some UI elements (like color-9, a 10% black).",
  "buttonStyle": "Primary actions are solid black pill shapes with white text. Secondary toggles/tabs are unstyled text that gains a black pill background when active.",
  "cornerStyle": "Predominantly rounded. Feature cards, pricing cards, and terminal mockups have large, smooth border radii. Buttons and the main input field are fully rounded 'pill' shapes.",
  "contentWidth": "Content is generally centered in a constrained column, with some elements like the terminal carousel breaking out slightly wider, but keeping a generous margin from the viewport edges.",
  "spacingRhythm": "Generous use of vertical whitespace between major sections to isolate content and allow the background gradient to show. Within sections like pricing or feature cards, padding is consistent and moderate."
}
```

### Reconstruction specification

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

- Root: 1440×550px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Representative content widths: 953, 546, 463px.
- Layout containers: 0; cards/surfaces: 0; media elements: 5; browser animations: 1.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 77,
      "bottom": 1000,
      "pageHeight": 13889
    }
  },
  "container": {
    "size": "1440×550px",
    "position": "x 0px, y 225px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "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(0, 0, 0)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      953,
      546,
      463
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "2.68435e+07px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "canvas · block h-full w-full bg-background",
    "size": "1440×1000px",
    "position": "x 0px, y 0px",
    "aspectRatio": 1.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "35×35px",
    "position": "x 990px, y 518px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 996px, y 579px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "18×18px",
    "position": "x 428px, y 580px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "18×18px",
    "position": "x 468px, y 580px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[
  {
    "target": "Turn these 10 spreadsheets into one automated system",
    "delayMs": 0,
    "durationMs": 3400,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "ease-in-out",
        "filter": "blur(6px)",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "transform": "translateY(11.7px)",
        "computedOffset": 0
      },
      {
        "easing": "ease-in-out",
        "filter": "blur(0px)",
        "offset": 0.12,
        "opacity": "1",
        "composite": "auto",
        "transform": "translateY(0px)",
        "computedOffset": 0.12
      },
      {
        "easing": "ease-in-out",
        "filter": "blur(0px)",
        "offset": 0.86,
        "opacity": "1",
        "composite": "auto",
        "transform": "translateY(0px)",
        "computedOffset": 0.86
      },
      {
        "easing": "ease-in-out",
        "filter": "blur(6px)",
        "offset": 1,
        "opacity": "0",
        "composite": "auto",
        "transform": "translateY(-11.7px)",
        "computedOffset": 1
      }
    ]
  }
]
```

### 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-99",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 225,
      "width": 1440,
      "height": 550
    },
    "role": null,
    "label": "One agent. Every app. Any task.One agent. Every app. Any task.Wire it into your stack. Tools, team, ",
    "border": "0px solid rgb(0, 0, 0)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-4",
      "tag": "canvas",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1000
      },
      "role": null,
      "label": "block h-full w-full bg-background",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-118",
      "tag": "svg",
      "rect": {
        "x": 990,
        "y": 518,
        "width": 35,
        "height": 35
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-143",
      "tag": "svg",
      "rect": {
        "x": 996,
        "y": 579,
        "width": 20,
        "height": 20
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-126",
      "tag": "svg",
      "rect": {
        "x": 428,
        "y": 580,
        "width": 18,
        "height": 18
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-130",
      "tag": "svg",
      "rect": {
        "x": 468,
        "y": 580,
        "width": 18,
        "height": 18
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 77,
    "bottom": 1000,
    "pageHeight": 13889
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      953,
      546,
      463
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 5,
    "animations": 1,
    "elementsInSection": 20
  },
  "surfaces": {
    "radii": [
      "2.68435e+07px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [
    {
      "id": "animation-5",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-116",
        "tag": "span",
        "rect": {
          "x": 429,
          "y": 526,
          "width": 546,
          "height": 20
        },
        "role": null,
        "label": "Turn these 10 spreadsheets into one automated system"
      },
      "delayMs": 0,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "ease-in-out",
          "filter": "blur(6px)",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "transform": "translateY(11.7px)",
          "computedOffset": 0
        },
        {
          "easing": "ease-in-out",
          "filter": "blur(0px)",
          "offset": 0.12,
          "opacity": "1",
          "composite": "auto",
          "transform": "translateY(0px)",
          "computedOffset": 0.12
        },
        {
          "easing": "ease-in-out",
          "filter": "blur(0px)",
          "offset": 0.86,
          "opacity": "1",
          "composite": "auto",
          "transform": "translateY(0px)",
          "computedOffset": 0.86
        },
        {
          "easing": "ease-in-out",
          "filter": "blur(6px)",
          "offset": 1,
          "opacity": "0",
          "composite": "auto",
          "transform": "translateY(-11.7px)",
          "computedOffset": 1
        }
      ],
      "playState": "running",
      "durationMs": 3400,
      "iterations": 1,
      "playbackRate": 1
    }
  ],
  "capturedAt": "2026-10-13T02:23:22.344Z",
  "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. **observed sequence** — The page begins at the top, showing the hero section with the headline and search bar. (0s–3s; 95% 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 headline + subhead + input hero structure; Cycling placeholder text animation pattern; Pill-shaped input with icon row and model-selector affordance; Soft background color blob treatment
- Dependencies: Specific dot-matrix 'Doto' font for headline distinctiveness; Exact gradient blob colors/positions; Underlying AI agent product framing for copy
- Guidance: Swap the display font and gradient blob palette while retaining the structural skeleton (centered headline, subhead, pill input with toggles, cycling placeholder animation) for other prompt-driven product heroes.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original hero section inspired by the design evidence titled “Prompt box hero”.

Purpose: A minimalist hero section centered around a text prompt input box, surrounded by soft, abstract floating shapes.

Structure: centered single-column. Source layout label: Centered headline, centered input field.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Centered typewriter-style headline above a modern search/prompt input box.

Components: headline, text input, abstract background shapes.

Style direction: minimal, soft, typographic.

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

Typography evidence: {"role":"display","size":"32px","family":"Doto","source":"computed","traits":"Regular","weight":"900","evidence":"font-9: computed CSS at 1440×1000; AI role: The 'Doto' pixelated font, used at 32px for large, impactful headlines like 'One agent. Every app. Any task.' and animated text.","sampleId":"font-9","confidence":0.95,"lineHeight":"32px","letterSpacing":"normal"} {"role":"heading","size":"19px","family":"Roboto Flex","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Roboto Flex at 19px, used for section titles like 'What people build with Ardor' and 'Made in Ardor'.","sampleId":"font-2","confidence":0.85,"lineHeight":"22.8px","letterSpacing":"normal"} {"role":"body","size":"13px","family":"Roboto Flex","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Roboto Flex at 13px, functioning as the primary body text for descriptions and standard copy across the site.","sampleId":"font-1","confidence":0.9,"lineHeight":"15.6px","letterSpacing":"normal"}

Color evidence: {"hex":"#F2F3F1","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(242, 243, 241); AI role: The primary background color of the body, a very light off-white (#F2F3F1).","sampleId":"color-4","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000), used extensively for primary typography, icons, and solid button backgrounds.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF), used for the background of individual cards (like pricing tiers and feature cards) to lift them off the canvas.","sampleId":"color-6","confidence":0.9}

Typography measured inside this section: {"id":"font-1","size":"13px","count":151,"family":"Roboto Flex","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":1019,"text":"Audit a spreadsheet or dataset","property":"font"},{"tag":"p","top":458,"text":"Wire it into your stack. Tools, team, infrastructure. Then let it run.","property":"font"},{"tag":"span","top":525,"text":"Audit a spreadsheet or dataset","property":"font"}],"fontStack":"\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif","lineHeight":"15.6px","letterSpacing":"normal"} {"id":"font-2","size":"19px","count":34,"family":"Roboto Flex","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":1000,"text":"What people build with Ardor","property":"font"},{"tag":"span","top":1887,"text":"One prompt. A real app — not an MVP, not a prototype.","property":"font"},{"tag":"span","top":2741,"text":"Made in Ardor.","property":"font"}],"fontStack":"\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif","lineHeight":"22.8px","letterSpacing":"normal"} {"id":"font-9","size":"32px","count":10,"family":"Doto","traits":"Regular","weight":"900","contexts":[{"tag":"span","top":392,"text":"One agent. Every app. Any task.","property":"font"},{"tag":"span","top":393,"text":"One age.+˚ xx˚xx +x+. .˚+ xx.+.","property":"font"},{"tag":"span","top":7040,"text":"Still doing it by hand? Describe it once and let it run.","property":"font"}],"fontStack":"Doto, \"Doto Fallback\"","lineHeight":"32px","letterSpacing":"normal"} {"id":"font-14","size":"10px","count":4,"family":"Roboto Flex","traits":"Regular","weight":"400","contexts":[{"tag":"button","top":572,"text":"Ask for approval","property":"font"},{"tag":"span","top":584,"text":"GPT-5.6 Terra","property":"font"},{"tag":"button","top":9252,"text":"Ask for approval","property":"font"}],"fontStack":"\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif","lineHeight":"9px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-1","hex":"#000000","alpha":1,"count":2471,"contexts":[{"tag":"span","top":30,"text":"Pricing","property":"text"},{"tag":"a","top":25,"text":"Start FreeStart FreeStart Free","property":"control-background"},{"tag":"span","top":953,"text":"","property":"background"}],"cssValue":"rgb(0, 0, 0)"} {"id":"color-3","hex":"#FFFFFF","alpha":0.7490196078431373,"count":35,"contexts":[{"tag":"div","top":1000,"text":"Audit a spreadsheet or dataset","property":"background"},{"tag":"p","top":5606,"text":"Limited-time promo: GPT-6 Sol and Astra available on every plan, Free included — plus 10× usage.","property":"background"}],"cssValue":"rgba(255, 255, 255, 0.75)"} {"id":"color-7","hex":"#000000","alpha":0.6196078431372549,"count":97,"contexts":[{"tag":"span","top":1019,"text":"Audit a spreadsheet or dataset","property":"text"},{"tag":"p","top":458,"text":"Wire it into your stack. Tools, team, infrastructure. Then let it run.","property":"text"},{"tag":"svg","top":580,"text":"","property":"svg-stroke"}],"cssValue":"rgba(0, 0, 0, 0.62)"} {"id":"color-10","hex":"#000000","alpha":0.5215686274509804,"count":48,"contexts":[{"tag":"circle","top":580,"text":"","property":"svg-stroke"},{"tag":"span","top":2282,"text":"Ask for a change","property":"text"}],"cssValue":"rgba(0, 0, 0, 0.52)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":225,"width":1440,"height":550},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[953,546,463]}; surfaces {"radii":["2.68435e+07px"],"borders":[],"shadows":[]}; media [{"tag":"canvas","rect":{"x":0,"y":0,"width":1440,"height":1000},"aspectRatio":1.4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":990,"y":518,"width":35,"height":35},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":996,"y":579,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":428,"y":580,"width":18,"height":18},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]; animations [{"target":{"id":"ld-116","tag":"span","rect":{"x":429,"y":526,"width":546,"height":20},"role":null,"label":"Turn these 10 spreadsheets into one automated system"},"delayMs":0,"durationMs":3400,"easing":"linear","keyframes":[{"easing":"ease-in-out","filter":"blur(6px)","offset":0,"opacity":"0","composite":"auto","transform":"translateY(11.7px)","computedOffset":0},{"easing":"ease-in-out","filter":"blur(0px)","offset":0.12,"opacity":"1","composite":"auto","transform":"translateY(0px)","computedOffset":0.12},{"easing":"ease-in-out","filter":"blur(0px)","offset":0.86,"opacity":"1","composite":"auto","transform":"translateY(0px)","computedOffset":0.86},{"easing":"ease-in-out","filter":"blur(6px)","offset":1,"opacity":"0","composite":"auto","transform":"translateY(-11.7px)","computedOffset":1}]}]

Motion evidence: observed sequence: The page begins at the top, showing the hero section with the headline and search bar. (95% confidence)

Transfer these principles: Centered headline + subhead + input hero structure; Cycling placeholder text animation pattern; Pill-shaped input with icon row and model-selector affordance; Soft background color blob treatment.

Dependencies: Specific dot-matrix 'Doto' font for headline distinctiveness; Exact gradient blob colors/positions; Underlying AI agent product framing for copy.

Adaptation guidance: Swap the display font and gradient blob palette while retaining the structural skeleton (centered headline, subhead, pill input with toggles, cycling placeholder animation) for other prompt-driven product heroes.

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