# Cloud Transition Feature

Schema: Design Details SECTION.md v3.2
Website: Ghost AI
Source: https://ghost.ai/
Source section IDs: gap-86b30928-5560-7160
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A full-bleed sky photo with a short, right-aligned text block gives the eye one clear place to land and plenty of calm space around it.
- The heading and paragraph differ clearly in size and weight, so the message reads in seconds against the soft clouds.
- Putting a bright, airy image between darker sections makes a clean visual pause, and the sky ties directly to the cloud-versus-local idea.

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

Borrow: Use one full-bleed, on-theme photograph with a very short text block as a breathing pause between denser sections.
Leave alone: Don't copy the literal stock-cloud pun, the Archivo type with its tight tracking, or the dark canvas, blue and orange-red palette; choose your own image idea and a free grotesque alternative.

## Classification

- Type: features
- Layout: Full-bleed background image with right-aligned text block.
- Styles: photographic, minimal
- Confidence: 90%

## Purpose and structure

A transitional full-bleed feature section displaying realistic clouds in a blue sky, conveying themes of local vs. cloud intelligence with minimal text.

Visual signature: Bright blue sky with fluffy white clouds serving as a backdrop for a short text block.

## Components

- full-bleed background image
- heading
- descriptive paragraph

## Typography

- Display: Archivo — 112px 200
- Heading: Archivo — 64.8px 400
- Body: Archivo — 22px 400
- Mono: Archivo Narrow — 16px 400

## Functional palette

- Canvas: canvas #00050A
- Text: text #FFFFFF
- Primary-Action: primary action #006DDF
- Surface: surface #EAE9E7
- Accent: accent #FF4000

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 58 — Clean Archivo heading and body pairing with reasonable hierarchy (heading vs paragraph size/weight contrast), but nothing distinctive here beyond standard web conventions; tight letter-spacing is a site-wide token, not a section-specific choice. Next tier: No typographic device (scale, rhythm, treatment) unique to this section beyond generic heading+paragraph stacking.
- Composition: 56 — Right-aligned text block over a full-bleed photographic sky is a simple, legible layout, but the repeated identical cloud crop and text block (visible twice in this tall capture) suggests a long static/looping passage with minimal compositional variation or tension. Next tier: Layout is a single conventional text-over-image placement without added structure, layering, or interplay between text and image content to create depth or visual interest.
- Motion: inconclusive — No timestamped motion evidence supplied; motion_moments is empty, so nothing can be scored about transition behavior implied by the 'transition' framing. Next tier: Needs explicit timestamped description of how the cloud imagery or text animates/transitions to assess motion quality.
- Content: 55 — Message ('Intelligence stays yours on Core') is clear and thematically tied to the cloud/local-data metaphor, but copy is generic reassurance text with no supporting visual proof point tying literally to the image beyond metaphor. Next tier: Content relies on a surface-level metaphor (clouds = cloud computing) without deeper integration of visual and verbal content, e.g. no diagram, iconography, or data visualization reinforcing the local-vs-cloud claim.
- Originality: 54 — Using literal sky clouds to signal 'cloud computing' is a familiar, somewhat on-the-nose visual pun; stock-photo-style clouds don't introduce a distinctive art direction or bespoke visual language. Next tier: The core idea (literal clouds for 'cloud') is a common metaphor rather than a surprising or hard-to-substitute visual concept.
- Adaptability: 60 — Structure is simple and clearly separable: full-bleed background image, heading, paragraph, and a small CTA icon button, all deterministically positioned independent of specific asset. Next tier: Lacks distinct structural components (e.g., layered elements, custom motion rig) that would demonstrate deeper separability beyond basic background+text pattern.

Strengths:
- Clear, legible right-aligned text block with good contrast against the sky background
- Thematic coherence between literal cloud imagery and 'local vs cloud' messaging
- Restrained, single-message copy avoids clutter

Weaknesses:
- Visual metaphor (real clouds = cloud computing) is overly literal and common
- No distinguishing compositional or typographic treatment beyond standard patterns
- Motion/transition behavior implied by naming cannot be verified from static evidence
- Repeated identical crop across the capture suggests limited visual progression for a long scroll span

Why it does not reach the next tier: The section reads as competent but unremarkable: the pun-based background, standard type pairing, and simple right-aligned composition lack a bespoke structural or visual idea that would make it feel singular or hard to substitute, and no verified motion detail elevates the 'transition' framing.

## Adaptation guidance

- Effort: Low
- Guidance: Reusable as a generic full-bleed image + right-aligned text feature block; swap imagery and text while keeping hierarchy and placement, but transition/motion rigging (if any) must be separately specified since it's unproven here.

What transfers:
- Full-bleed photographic background with overlaid right-aligned text block
- Heading + paragraph hierarchy pattern
- Small CTA icon button placement

Dependencies:
- Specific cloud photography asset and its exact tonal/contrast treatment for text legibility
- Any scroll-linked transition behavior between this and adjacent sections, which is unverified

## 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 motion evidence available to assess the implied 'transition' animation
- Static crop shows a repeated/looped section, limiting judgment of actual scroll behavior or variation
- Cannot verify exact spacing, color contrast ratios, or asset dimensions beyond what's visible

## 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: full-bleed
- Layout: Full-bleed background image with right-aligned text block.
- Styles: photographic, minimal
- Components: full-bleed background image, heading, descriptive paragraph
- Purpose: A transitional full-bleed feature section displaying realistic clouds in a blue sky, conveying themes of local vs. cloud intelligence with minimal text.
- Visual signature: Bright blue sky with fluffy white clouds serving as a backdrop for a short text block.
- Place on the page: 5 of 11, after Feature collection (`ghost-ai:Exploded_Device_Teardown_C02`), before Feature collection (`ghost-ai:Room_Context_Feature_C03`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays.

### 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": "112px",
      "family": "Archivo",
      "source": "computed",
      "traits": "uppercase",
      "weight": "200",
      "evidence": "font-13: computed CSS at 1440×1000; AI role: Large 112px Archivo used for the main 'CORE' title.",
      "sampleId": "font-13",
      "confidence": 0.9,
      "lineHeight": "122px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "64.8px",
      "family": "Archivo",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: 64.8px Archivo for primary section headings.",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "66.1px",
      "letterSpacing": "-3.6px"
    },
    {
      "role": "body",
      "size": "22px",
      "family": "Archivo",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: 22px Archivo for standard paragraph text.",
      "sampleId": "font-4",
      "confidence": 0.85,
      "lineHeight": "33px",
      "letterSpacing": "-0.9px"
    },
    {
      "role": "mono",
      "size": "16px",
      "family": "Archivo Narrow",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-14: computed CSS at 1440×1000; AI role: Archivo Narrow, uppercase, used for technical labels and UI elements, functioning like a monospaced font in this context.",
      "sampleId": "font-14",
      "confidence": 0.8,
      "lineHeight": "24px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

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

```json
{
  "sectionUsage": [],
  "functionalPalette": [
    {
      "hex": "#00050A",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 5, 10); AI role: Dark #00050A used as the primary background for many sections.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-9: computed rgb(255, 255, 255); AI role: White text used extensively on dark backgrounds.",
      "sampleId": "color-9",
      "confidence": 0.9
    },
    {
      "hex": "#006DDF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-8: computed rgb(0, 109, 223); AI role: Bright blue #006DDF used for primary buttons and interactive elements.",
      "sampleId": "color-8",
      "confidence": 0.9
    },
    {
      "hex": "#EAE9E7",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(234, 233, 231); AI role: Light gray #EAE9E7 used as the background for the initial hero section.",
      "sampleId": "color-5",
      "confidence": 0.8
    },
    {
      "hex": "#FF4000",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-22: computed rgb(255, 64, 0); AI role: Orange #FF4000 used for alerts like 'Sold Out'.",
      "sampleId": "color-22",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px or minimal radius on interactive elements, maintaining a crisp, technical look.",
  "density": "Low density overall, maximizing negative space to focus attention on the 3D models and large typography.",
  "evidence": "Visual inspection of layout structure, button treatments (color-8, color-23), and border applications.",
  "borderStyle": "Thin, 1px solid borders (often translucent white or light blue) used to frame features, specs, and create 'blueprint' grid patterns.",
  "buttonStyle": "Solid color fills (blue) for primary CTAs, with thin outlines for secondary actions or informative labels. Text is typically uppercase Archivo Narrow.",
  "cornerStyle": "Sharp, square corners for structural elements and UI outlines, reflecting the industrial design of the hardware.",
  "contentWidth": "Variable; mixes centered single-column layouts for narrative with full-width immersive scenes and complex multi-column layouts for technical specs.",
  "spacingRhythm": "Generous vertical spacing driven by scroll-linked animation pacing rather than fixed CSS margins. Sections are often full-viewport height."
}
```

### 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: low
- What transfers: Full-bleed photographic background with overlaid right-aligned text block; Heading + paragraph hierarchy pattern; Small CTA icon button placement
- Dependencies: Specific cloud photography asset and its exact tonal/contrast treatment for text legibility; Any scroll-linked transition behavior between this and adjacent sections, which is unverified
- Guidance: Reusable as a generic full-bleed image + right-aligned text feature block; swap imagery and text while keeping hierarchy and placement, but transition/motion rigging (if any) must be separately specified since it's unproven here.

### 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 “Cloud Transition Feature”.

Purpose: A transitional full-bleed feature section displaying realistic clouds in a blue sky, conveying themes of local vs. cloud intelligence with minimal text.

Structure: full-bleed. Source layout label: Full-bleed background image with right-aligned text block.. Let the primary media establish the section boundary and protect legibility with controlled overlays.

Visual signature to preserve at the pattern level: Bright blue sky with fluffy white clouds serving as a backdrop for a short text block.

Components: full-bleed background image, heading, descriptive paragraph.

Style direction: photographic, minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"112px","family":"Archivo","source":"computed","traits":"uppercase","weight":"200","evidence":"font-13: computed CSS at 1440×1000; AI role: Large 112px Archivo used for the main 'CORE' title.","sampleId":"font-13","confidence":0.9,"lineHeight":"122px","letterSpacing":"normal"} {"role":"heading","size":"64.8px","family":"Archivo","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: 64.8px Archivo for primary section headings.","sampleId":"font-1","confidence":0.9,"lineHeight":"66.1px","letterSpacing":"-3.6px"} {"role":"body","size":"22px","family":"Archivo","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: 22px Archivo for standard paragraph text.","sampleId":"font-4","confidence":0.85,"lineHeight":"33px","letterSpacing":"-0.9px"} {"role":"mono","size":"16px","family":"Archivo Narrow","source":"computed","traits":"uppercase","weight":"400","evidence":"font-14: computed CSS at 1440×1000; AI role: Archivo Narrow, uppercase, used for technical labels and UI elements, functioning like a monospaced font in this context.","sampleId":"font-14","confidence":0.8,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#00050A","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(0, 5, 10); AI role: Dark #00050A used as the primary background for many sections.","sampleId":"color-2","confidence":0.9} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-9: computed rgb(255, 255, 255); AI role: White text used extensively on dark backgrounds.","sampleId":"color-9","confidence":0.9} {"hex":"#006DDF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-8: computed rgb(0, 109, 223); AI role: Bright blue #006DDF used for primary buttons and interactive elements.","sampleId":"color-8","confidence":0.9} {"hex":"#EAE9E7","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(234, 233, 231); AI role: Light gray #EAE9E7 used as the background for the initial hero section.","sampleId":"color-5","confidence":0.8} {"hex":"#FF4000","name":"accent","role":"accent","source":"computed","evidence":"color-22: computed rgb(255, 64, 0); AI role: Orange #FF4000 used for alerts like 'Sold Out'.","sampleId":"color-22","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: Full-bleed photographic background with overlaid right-aligned text block; Heading + paragraph hierarchy pattern; Small CTA icon button placement.

Dependencies: Specific cloud photography asset and its exact tonal/contrast treatment for text legibility; Any scroll-linked transition behavior between this and adjacent sections, which is unverified.

Adaptation guidance: Reusable as a generic full-bleed image + right-aligned text feature block; swap imagery and text while keeping hierarchy and placement, but transition/motion rigging (if any) must be separately specified since it's unproven here.

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