# AI training UI preview

Schema: Design Details SECTION.md v3.2
Website: Fernand
Source: https://getfernand.com/
Source section IDs: gap-470480f1-4385-5815
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A realistic email thread with billing details and an inline AI reply field shows the feature in a believable setting, so the copy needs little explaining.
- The large mockup floats on a soft painted backdrop with gentle shadows, which gives depth while the page stays calm and minimal.
- A centered heading and muted subhead lead into a row of compact icon cards that anchor the mockup and keep the hierarchy clear.

What a screenshot can't show:
- The recording showed no motion, so any hover or scroll behaviour is unknown.
- No font sizes, spacing or padding were measured, so exact scale and rhythm can't be confirmed.

Borrow: Show the product doing a real task in a believable mockup, then anchor it with a tidy row of short supporting cards.
Leave alone: Don't copy the cherry-blossom painted background, the specific billing email content or the icon style; use your own imagery and subject matter.

## Classification

- Type: feature-grid
- Layout: Centered heading, large central browser mockup, followed by a four-column grid of compact feature cards.
- Styles: minimal, soft
- Confidence: 95%

## Purpose and structure

A large UI mockup of an email thread interface above a four-column grid of small feature cards.

Visual signature: A detailed email composition mockup with soft shadows, resting over a subtle painted background, anchored by simple text cards.

## Components

- browser mockup
- email interface
- icon cards
- heading

## Typography

- Display: Inter — 38px 400
- Heading: Inter — 30px 400
- Body: Inter — 16px 400

## Functional palette

- Text: text #1A2035
- Canvas: canvas #FFFFFF
- Muted-Text: muted text #717583
- Primary-Action: primary action #00A0FF
- Surface: surface #F7FAFC
- Surface: surface #151618

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 62.88/100 (Good)
Scored coverage: 85%

- Typography: 62 — Clean Inter hierarchy with a clear display headline, muted subhead, and consistent small labels inside the mockup; legible but standard SaaS sizing/weight choices with no distinctive type treatment. Next tier: No custom type pairing, scale contrast, or expressive treatment beyond default SaaS heading/subhead/body sizing.
- Composition: 68 — Strong layered composition: centered heading over a large detailed browser mockup set against a soft painted background, grounded by a clean five-column card grid below; good whitespace and visual anchoring. Next tier: The mockup-over-grid pattern is a common SaaS layout; no unexpected spatial relationship or asymmetry to push it into memorable territory.
- Motion: not_assessed — No timestamped motion evidence was supplied for this section. Next tier: Need specific timestamped visible motion changes to assess this axis.
- Content: 65 — The realistic email-thread mockup with billing/payment details and an inline AI-generate reply field effectively demonstrates the feature's real context, tightly integrated with the explanatory copy and supporting feature cards. Next tier: Content is illustrative of generic AI-support tooling rather than a distinctive product narrative; cards are generic icon+text pattern.
- Originality: 58 — The soft cherry-blossom background behind a crisp UI panel is a mildly distinctive touch, but the overall structure (headline, hero mockup, feature-card row) is a well-worn SaaS template. Next tier: Lacks a structural or interaction idea unique to this product; relies on a familiar mockup-plus-grid convention with only a decorative background twist.
- Adaptability: 60 — Hierarchy (heading, hero visual, card row) is clearly separable from skin (painted background, specific mockup content, icon style), making reskinning straightforward. Next tier: Reliance on a bespoke detailed product mockup as the centerpiece limits how cleanly the visual can be swapped without rebuilding that asset.

Strengths:
- Clear three-tier visual hierarchy: label, headline, subhead, hero visual, supporting cards
- Realistic, detailed UI mockup grounds the abstract feature claim in a concrete scenario
- Soft decorative background adds a touch of warmth without competing with the UI content
- Consistent icon-label-description pattern across the five feature cards aids scanability

Weaknesses:
- Headline/subhead/card-grid arrangement is a common SaaS feature-section template
- Five feature cards use generic icon-above-text styling with no differentiation beyond labels
- No motion evidence available to assess whether the section has any dynamic behavior
- Decorative background pattern feels disconnected from the product's AI/support subject matter

Why it does not reach the next tier: The section is well-executed and polished but follows a highly conventional SaaS composition (headline + hero mockup + feature grid) without a structural idea, interaction, or typographic choice that feels specific or hard to substitute; it reads as competent craft rather than a memorable design decision.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the heading-hero-grid skeleton and card pattern; replace the mockup with another product screenshot and swap the background illustration to match a different brand mood.

What transfers:
- Centered heading + large hero mockup + multi-column feature card grid structure
- Card pattern of icon, title, description, and link

Dependencies:
- The bespoke email-thread/billing mockup content is product-specific and must be rebuilt for another context
- Painted background graphic is a decorative asset tied to this brand's aesthetic

## 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 not assessed due to lack of timestamped evidence
- Exact spacing, radius, and shadow values not verifiable from the crop alone

## 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: feature-grid
- Structure: centered single-column
- Layout: Centered heading, large central browser mockup, followed by a four-column grid of compact feature cards.
- Styles: minimal, soft
- Components: browser mockup, email interface, icon cards, heading
- Purpose: A large UI mockup of an email thread interface above a four-column grid of small feature cards.
- Visual signature: A detailed email composition mockup with soft shadows, resting over a subtle painted background, anchored by simple text cards.
- Place on the page: 7 of 16, after Testimonials (`14c69455-86d5-4fd2-b364-672eea0bfb33`), before Feature collection (`92cdce90-363b-4591-98a6-fd4d5f0dc58d`)

### 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": "38px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: 38px Inter used for the main hero headline 'The free customer support platform...'.",
      "sampleId": "font-5",
      "confidence": 0.95,
      "lineHeight": "48px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "30px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 30px Inter used for section headings like 'Consolidate all your support channels...'.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "38px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Inter used for standard paragraph text describing features.",
      "sampleId": "font-7",
      "confidence": 0.9,
      "lineHeight": "26px",
      "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": "#1A2035",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-5: computed rgb(26, 32, 53); AI role: #1A2035 used for primary headings and high-contrast text.",
      "sampleId": "color-5",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: White used extensively for page backgrounds and card backgrounds.",
      "sampleId": "color-1",
      "confidence": 0.9
    },
    {
      "hex": "#717583",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-6: computed rgb(113, 117, 131); AI role: #717583 used for secondary text and descriptions.",
      "sampleId": "color-6",
      "confidence": 0.9
    },
    {
      "hex": "#00A0FF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-24: computed rgb(0, 160, 255); AI role: #00A0FF used for primary buttons ('Start for free').",
      "sampleId": "color-24",
      "confidence": 0.9
    },
    {
      "hex": "#F7FAFC",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-2: computed rgb(247, 250, 252); AI role: #F7FAFC used as a subtle off-white background for specific sections to differentiate them from the main canvas.",
      "sampleId": "color-2",
      "confidence": 0.85
    },
    {
      "hex": "#151618",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-7: computed rgb(21, 22, 24); AI role: #151618 used for the dark footer background.",
      "sampleId": "color-7",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Large radii on UI mockups and smaller, but noticeable, radii on buttons and smaller cards.",
  "density": "Low density; the design prioritizes whitespace and clear separation of elements over packing information tightly.",
  "evidence": "Observation of layout structure in screenshots, consistent application of border-radius in UI elements, and distinct button variations.",
  "borderStyle": "Subtle, light borders (e.g., color-8, color-35) used to define cards and form elements without adding visual noise.",
  "buttonStyle": "Solid fill for primary actions, outline or subtle backgrounds for secondary actions, often with rounded corners.",
  "cornerStyle": "Consistent use of rounded corners on buttons, cards, and product UI mockups.",
  "contentWidth": "Centered content with a constrained maximum width to ensure readability, though background images/gradients often bleed to the edges.",
  "spacingRhythm": "Generous spacing with significant whitespace between major sections, contributing to the 'calm' aesthetic."
}
```

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

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: 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: medium
- What transfers: Centered heading + large hero mockup + multi-column feature card grid structure; Card pattern of icon, title, description, and link
- Dependencies: The bespoke email-thread/billing mockup content is product-specific and must be rebuilt for another context; Painted background graphic is a decorative asset tied to this brand's aesthetic
- Guidance: Reuse the heading-hero-grid skeleton and card pattern; replace the mockup with another product screenshot and swap the background illustration to match a different brand mood.

### 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; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “AI training UI preview”.

Purpose: A large UI mockup of an email thread interface above a four-column grid of small feature cards.

Structure: centered single-column. Source layout label: Centered heading, large central browser mockup, followed by a four-column grid of compact feature cards.. 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 detailed email composition mockup with soft shadows, resting over a subtle painted background, anchored by simple text cards.

Components: browser mockup, email interface, icon cards, heading.

Style direction: minimal, soft.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"38px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 38px Inter used for the main hero headline 'The free customer support platform...'.","sampleId":"font-5","confidence":0.95,"lineHeight":"48px","letterSpacing":"normal"} {"role":"heading","size":"30px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 30px Inter used for section headings like 'Consolidate all your support channels...'.","sampleId":"font-3","confidence":0.9,"lineHeight":"38px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Inter used for standard paragraph text describing features.","sampleId":"font-7","confidence":0.9,"lineHeight":"26px","letterSpacing":"normal"}

Color evidence: {"hex":"#1A2035","name":"text","role":"text","source":"computed","evidence":"color-5: computed rgb(26, 32, 53); AI role: #1A2035 used for primary headings and high-contrast text.","sampleId":"color-5","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White used extensively for page backgrounds and card backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#717583","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(113, 117, 131); AI role: #717583 used for secondary text and descriptions.","sampleId":"color-6","confidence":0.9} {"hex":"#00A0FF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-24: computed rgb(0, 160, 255); AI role: #00A0FF used for primary buttons ('Start for free').","sampleId":"color-24","confidence":0.9} {"hex":"#F7FAFC","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(247, 250, 252); AI role: #F7FAFC used as a subtle off-white background for specific sections to differentiate them from the main canvas.","sampleId":"color-2","confidence":0.85} {"hex":"#151618","name":"surface","role":"surface","source":"computed","evidence":"color-7: computed rgb(21, 22, 24); AI role: #151618 used for the dark footer background.","sampleId":"color-7","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.

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

Transfer these principles: Centered heading + large hero mockup + multi-column feature card grid structure; Card pattern of icon, title, description, and link.

Dependencies: The bespoke email-thread/billing mockup content is product-specific and must be rebuilt for another context; Painted background graphic is a decorative asset tied to this brand's aesthetic.

Adaptation guidance: Reuse the heading-hero-grid skeleton and card pattern; replace the mockup with another product screenshot and swap the background illustration to match a different brand mood.

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