# Chatbot interface overlay

Schema: Design Details SECTION.md v3.2
Website: Frontify
Source: https://www.frontify.com/
Source section IDs: gap-ea0cf7e3-11132-14632
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A white chat card centered over a softened brand-guidelines page keeps focus on the demo while the blurred page still shows where the feature lives.
- The sample question and answer are about a campaign headline and sit on a photography guideline page, so the AI's value is clear without any explaining.
- The card groups its parts clearly (icon, message, input), and dark text on white keeps the query and reply easy to read.

What a screenshot can't show:
- In the recording, the chat pops up and plays for about 10 seconds, moving from an empty input to a typed question to the AI's answer.
- No type sizes, spacing or animation timings were measured, so exact values are unknown.

Borrow: Show a product feature working inside the real context it serves, with a blurred backdrop to separate the demo from the page.
Leave alone: Don't copy Frontify's brand-guidelines backdrop, its serif and ABC Diatype pairing (commercial; a neutral grotesque is a free alternative), or its purple and orange accents.

## Classification

- Type: features
- Layout: A centered floating chat dialog box positioned above a blurred background interface.
- Styles: minimal, corporate
- Confidence: 96%

## Purpose and structure

An interactive chatbot window layered on top of the brand guidelines interface, demonstrating AI assistant capabilities.

Visual signature: A distinct white chat modal floating over a softened background displaying a brand document.

## Components

- chat window
- text input field
- response text
- background UI mockup

## Typography

- Display: Cranny — 80px 300
- Heading: Cranny — 60.8px 400
- Body: ABC Diatype — 18px 400

## Functional palette

- Canvas: canvas #F0F0EB
- Text: text #111110
- Canvas: canvas #000000
- Surface: surface #E1E1DB
- Accent: accent #B60AE3
- Accent: accent #FF3B00

## Motion evidence

- 34.0–44.0s — A simulated chat interface pops up, showing an AI assistant answering queries based on the background brand guidelines. (91% confidence)

## Section quality

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

- Typography: 56 — Uses the established type system (serif display headings, ABC Diatype body) legibly with reasonable contrast between query/response text and chat prompt copy, but the chat window itself shows no distinctive typographic treatment beyond default UI conventions. Next tier: No hierarchy innovation within the chat UI itself—text sizes and weights read as generic chatbot defaults rather than a considered type system.
- Composition: 58 — Centered modal-over-blurred-background is a clean, legible pattern with good figure-ground separation (blur isolates the demo from the chat), and the floating card has clear internal grouping (icon, message, input). Next tier: The layout is a standard chat-modal pattern with no distinctive spatial idea, asymmetry, or layering beyond the blur trick; nothing pushes past competent execution of a familiar UI convention.
- Motion: 52 — Gemini confirms a 10-second sequence where a simulated chat appears and the AI answers a query over the background guidelines, showing state progression (empty input → question → typed answer). Next tier: The described motion is a straightforward reveal/typing demo with no detail on easing, staggering, or transition craft that would elevate it beyond a functional product demonstration.
- Content: 55 — The chatbot content (sample Q&A about campaign headline) is tightly tied to the brand portal context, reinforcing the feature's value proposition directly through the surrounding photography guideline page. Next tier: Content is a plausible but generic assistant exchange; it doesn't demonstrate deeper integration with brand-specific assets beyond a text answer.
- Originality: 48 — A floating chat modal over a blurred dashboard is a widely-used SaaS pattern for demoing AI assistants; nothing here differentiates it from countless competitor product screenshots. Next tier: Needs a distinctive visual or interaction idea unique to this brand (e.g., unconventional chat placement, custom response visualization) rather than the standard chat-bubble-over-blur convention.
- Adaptability: 55 — Chat modal structure (icon, message list, input field) is a modular, swappable UI component separable from the blurred background skin and specific copy. Next tier: Dependence on the underlying brand-guidelines mockup as backdrop ties the demo's credibility to that specific content, limiting clean separation without that context.

Strengths:
- Clear figure-ground separation via background blur keeps focus on the chat demo
- Chat UI maintains consistent typographic and color system with rest of the product
- Narrative sequencing across frames shows a believable end-to-end query-response flow

Weaknesses:
- Chat modal design is a generic, widely-seen SaaS pattern with no unique visual signature
- Motion is a standard typing/reveal demo without notable craft
- Sample Q&A content is generic and doesn't showcase deep brand-specific intelligence

Why it does not reach the next tier: The section executes a familiar AI-chat-demo pattern competently but introduces no distinctive layout, motion craft, or content depth that would make it memorable or hard to substitute with a generic competitor mockup.

## Adaptation guidance

- Effort: Low
- Guidance: The chat modal structure and blur-background technique can be reused for any AI-assistant feature demo by swapping the background mockup and sample copy; no proprietary assets beyond brand type/color tokens are required.

What transfers:
- Centered floating modal with blurred background pattern
- Icon + message + input field chat structure
- Sequential Q&A narrative demo flow

Dependencies:
- Background brand-guidelines mockup to blur as context
- Specific purple accent icon treatment
- Query/response copy tailored to brand assistant feature

## 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 scoring relies solely on Gemini's timestamped description, not direct video review
- Exact spacing, radius, and shadow values for the chat modal are not deterministically confirmed
- Cannot verify animation easing or transition quality beyond state-change description

## 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: features
- Source type: features
- Structure: centered single-column
- Layout: A centered floating chat dialog box positioned above a blurred background interface.
- Styles: minimal, corporate
- Components: chat window, text input field, response text, background UI mockup
- Purpose: An interactive chatbot window layered on top of the brand guidelines interface, demonstrating AI assistant capabilities.
- Visual signature: A distinct white chat modal floating over a softened background displaying a brand document.
- Place on the page: 8 of 12, after Product UI (`d992fb6e-eeea-49ba-8270-8ffe9fbbe675`), before Feature collection (`frontify-com:features_0517ad96`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- 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": "80px",
      "family": "Cranny",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Large 80px serif (Cranny) used for the main hero headline.",
      "sampleId": "font-2",
      "confidence": 1,
      "lineHeight": "80px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "60.8px",
      "family": "Cranny",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: 60.8px serif (Cranny) used for secondary section headings.",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "66.9px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "ABC Diatype",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: 18px sans-serif (ABC Diatype) used for primary body copy.",
      "sampleId": "font-6",
      "confidence": 1,
      "lineHeight": "23.4px",
      "letterSpacing": "0.2px"
    }
  ]
}
```

### 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": "#F0F0EB",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(240, 240, 235); AI role: #F0F0EB warm off-white used as the primary background for most sections.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#111110",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(17, 17, 16); AI role: #111110 near-black used for primary text and headings.",
      "sampleId": "color-3",
      "confidence": 1
    },
    {
      "hex": "#000000",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-20: computed rgb(0, 0, 0); AI role: #000000 solid black used for the footer background.",
      "sampleId": "color-20",
      "confidence": 0.9
    },
    {
      "hex": "#E1E1DB",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-4: computed rgb(225, 225, 219); AI role: #E1E1DB slightly darker off-white used for form inputs and secondary surfaces.",
      "sampleId": "color-4",
      "confidence": 0.85
    },
    {
      "hex": "#B60AE3",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-21: computed rgb(182, 10, 227); AI role: #B60AE3 vivid purple used for small UI highlights (like the magic wand icon).",
      "sampleId": "color-21",
      "confidence": 0.8
    },
    {
      "hex": "#FF3B00",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-18: computed rgb(255, 59, 0); AI role: #FF3B00 vivid orange used for specific text highlights or small graphic elements.",
      "sampleId": "color-18",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons appear to use full capsule/pill radii; product UI mockups use ~8px to ~16px border radii.",
  "density": "Low density, utilizing significant negative space to draw focus to central interactive elements and typography.",
  "evidence": "Observation of buttons, section spacing, and border treatments across the main scrollable area.",
  "borderStyle": "Mostly borderless design relying on subtle background color shifts. Thin 1px solid borders are used sparingly on specific form elements.",
  "buttonStyle": "Pill-shaped, mostly solid dark fills for primary actions, or transparent with thin borders for secondary actions.",
  "cornerStyle": "Mix of fully rounded pill shapes for buttons/inputs and moderate border radii for product cards/images.",
  "contentWidth": "Centered content with a constrained maximum width to maintain readability, especially for text blocks.",
  "spacingRhythm": "Generous vertical rhythm with large padding between distinct sections and relaxed line heights in body text."
}
```

### Reconstruction specification

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

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### 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
null
```

### Observed motion

1. **observed sequence** — A simulated chat interface pops up, showing an AI assistant answering queries based on the background brand guidelines. (34s–44s; 91% 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: unknownpx 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 floating modal with blurred background pattern; Icon + message + input field chat structure; Sequential Q&A narrative demo flow
- Dependencies: Background brand-guidelines mockup to blur as context; Specific purple accent icon treatment; Query/response copy tailored to brand assistant feature
- Guidance: The chat modal structure and blur-background technique can be reused for any AI-assistant feature demo by swapping the background mockup and sample copy; no proprietary assets beyond brand type/color tokens are required.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Chatbot interface overlay”.

Purpose: An interactive chatbot window layered on top of the brand guidelines interface, demonstrating AI assistant capabilities.

Structure: centered single-column. Source layout label: A centered floating chat dialog box positioned above a blurred background interface.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: A distinct white chat modal floating over a softened background displaying a brand document.

Components: chat window, text input field, response text, background UI mockup.

Style direction: minimal, corporate.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"80px","family":"Cranny","source":"computed","traits":"Regular","weight":"300","evidence":"font-2: computed CSS at 1440×1000; AI role: Large 80px serif (Cranny) used for the main hero headline.","sampleId":"font-2","confidence":1,"lineHeight":"80px","letterSpacing":"normal"} {"role":"heading","size":"60.8px","family":"Cranny","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: 60.8px serif (Cranny) used for secondary section headings.","sampleId":"font-1","confidence":0.95,"lineHeight":"66.9px","letterSpacing":"normal"} {"role":"body","size":"18px","family":"ABC Diatype","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 18px sans-serif (ABC Diatype) used for primary body copy.","sampleId":"font-6","confidence":1,"lineHeight":"23.4px","letterSpacing":"0.2px"}

Color evidence: {"hex":"#F0F0EB","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(240, 240, 235); AI role: #F0F0EB warm off-white used as the primary background for most sections.","sampleId":"color-1","confidence":1} {"hex":"#111110","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(17, 17, 16); AI role: #111110 near-black used for primary text and headings.","sampleId":"color-3","confidence":1} {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-20: computed rgb(0, 0, 0); AI role: #000000 solid black used for the footer background.","sampleId":"color-20","confidence":0.9} {"hex":"#E1E1DB","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(225, 225, 219); AI role: #E1E1DB slightly darker off-white used for form inputs and secondary surfaces.","sampleId":"color-4","confidence":0.85} {"hex":"#B60AE3","name":"accent","role":"accent","source":"computed","evidence":"color-21: computed rgb(182, 10, 227); AI role: #B60AE3 vivid purple used for small UI highlights (like the magic wand icon).","sampleId":"color-21","confidence":0.8} {"hex":"#FF3B00","name":"accent","role":"accent","source":"computed","evidence":"color-18: computed rgb(255, 59, 0); AI role: #FF3B00 vivid orange used for specific text highlights or small graphic elements.","sampleId":"color-18","confidence":0.8}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Motion evidence: observed sequence: A simulated chat interface pops up, showing an AI assistant answering queries based on the background brand guidelines. (91% confidence)

Transfer these principles: Centered floating modal with blurred background pattern; Icon + message + input field chat structure; Sequential Q&A narrative demo flow.

Dependencies: Background brand-guidelines mockup to blur as context; Specific purple accent icon treatment; Query/response copy tailored to brand assistant feature.

Adaptation guidance: The chat modal structure and blur-background technique can be reused for any AI-assistant feature demo by swapping the background mockup and sample copy; no proprietary assets beyond brand type/color tokens are required.

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