# Isometric Timeline Scroll

Schema: Design Details SECTION.md v3.2
Website: Agiloft
Source: https://agiloft.com/
Source section IDs: gap-ef7079d1-7753-12159
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A single central wireframe line runs through the isometric cubes and gives the eye one clear path down the page, while text blocks alternate left and right around it.
- Each panel pairs a short title with a brief supporting line, so four ideas read quickly against generous negative space on a light gray ground.
- A serif display headline over simple sans body text sets a clear hierarchy, and a single CTA stays visible without crowding the diagram.

What a screenshot can't show:
- In the recording, text panels appear and lock into place beside the central graphic as you scroll (about 28–37s); exact easing and duration weren't captured.
- No font sizes, letter spacing or section padding were measured, so treat the proportions as unconfirmed.

Borrow: Anchor a long scroll story to one continuous line and let each content block lock in beside it, so progress feels guided.
Leave alone: Don't copy the Agiloft isometric cube illustrations, the Teodor serif headline (a free high-contrast serif would do), or the orange accent and dark-and-white palette.

## Classification

- Type: process
- Layout: Central vertical timeline connecting graphical elements with text blocks alternating left and right.
- Styles: illustrative, geometric, minimal
- Confidence: 95%

## Purpose and structure

A long scrolling storytelling section where text panels appear on alternating sides of a central vertical line connecting geometric isometric cubes.

Visual signature: A continuous vertical wireframe line passing through 3D isometric cubes on a light gray background.

## Components

- headline
- cta-button
- isometric-cubes
- timeline-line
- text-blocks

## Typography

- Display: Teodor — 88px 200
- Heading: Teodor — 64px 200
- Body: Messinasansweb — 16px 400

## Functional palette

- Canvas: canvas #0D0D0D
- Text: text #FFFFFF
- Primary-Action: primary action #EE7501
- Canvas: canvas #FFFFFF
- Text: text #000000
- Accent: accent #EB9647
- Border: border #DEDEDE

## Motion evidence

- 28.0–37.0s — As the user scrolls through the 'A trifecta of data, workflows, and AI' section, text panels describing 'Trustworthy Business Intelligence', 'AI on the inside', 'Autonomous Action', and 'Data Liberation' appear and lock into place alongside a central wireframe graphic. (95% confidence)

## Section quality

Overall: 61.30/100 (Good)
Scored coverage: 100%

- Typography: 62 — Serif display headline (Teodor) paired with simple sans body text gives clean hierarchy, but the section relies on the same two heading/body treatments throughout with little typographic variation or deliberate pairing nuance beyond the site's standard system. Next tier: Needs more distinctive type scale shifts or treatment (e.g., numerals, labels, varied weights) tied to the timeline concept rather than reused global heading/body styles.
- Composition: 66 — Central vertical line with alternating left/right text blocks around isometric cube clusters creates a clear, legible reading path and generous negative space, giving the section an orderly technical feel. Next tier: The repeated identical cube motif at every stop reduces visual progression; composition reads as a static template repeated four times rather than an evolving diagram, capping it below strong/memorable.
- Motion: 58 — Gemini's timestamped evidence (28-37s) confirms panels lock into place alongside the wireframe graphic as the user scrolls, a straightforward scroll-triggered reveal/pin pattern with no further mechanical detail provided. Next tier: No evidence of staggering, easing character, cube rotation/transformation, or line-drawing animation tied to scroll position that would elevate this beyond a basic reveal-on-scroll pattern.
- Content: 60 — Headline, subhead, CTA, and four short feature blurbs are integrated logically around the diagram, each panel pairing a concise title with supporting copy in a readable rhythm. Next tier: The diagram itself carries no unique informational mapping to each panel's content (same cube cluster repeats for all four messages), so content and visual are not tightly fused.
- Originality: 55 — Isometric wireframe cubes on a timeline line is a recognizable SaaS-diagram motif; execution is tidy but the idea of alternating text beside a vertical connector is a common longform pattern. Next tier: Would need a distinguishing structural or illustrative idea unique to this brand's content (e.g., cubes that build/transform per stage) rather than one static cluster duplicated across stops.
- Adaptability: 65 — Clear separable parts: timeline line, repeatable cube graphic, alternating text block pattern, and CTA are structurally modular and could be reskinned or reused with different copy/graphics. Next tier: Lack of stage-specific visual variation reduces confidence that the structure demonstrably supports differentiated content per step without added design work.

Strengths:
- Clear alternating left/right rhythm anchored by a continuous vertical line gives strong directional guidance down a long scroll
- Generous whitespace and consistent panel sizing keep a long section legible and uncluttered
- Isometric wireframe illustration style lends a technical, orderly tone consistent with a data/AI platform narrative

Weaknesses:
- Same cube cluster graphic repeats unchanged across all four stops, undermining the sense of progression implied by a timeline
- Motion evidence only confirms a basic lock-into-place scroll reveal with no distinguishing animation detail
- Typography is directly inherited from the site's global heading/body system with no section-specific adaptation
- Concept (vertical connector + alternating text) is a common technique in SaaS process sections, limiting distinctiveness

Why it does not reach the next tier: To reach strong/memorable the section would need the central diagram to visibly evolve or differentiate per stage, and motion would need confirmed detail beyond a simple reveal, both currently unsupported by evidence or visibly absent.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the vertical-line alternating-panel skeleton and swap in content-specific diagrams per stage with a different visual motif or color system; retiming scroll-trigger behavior to vary per panel would also need re-implementation.

What transfers:
- Central vertical timeline/connector layout
- Alternating left-right text block pattern
- Modular panel structure pairing a title, short paragraph, and icon/graphic

Dependencies:
- Specific isometric cube illustration asset
- Teodor serif display font and Messinasansweb body font
- Orange accent line/cube color scheme

## 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 scored only from a single timestamped Gemini observation; finer animation parameters (easing, stagger, cube transform) are unconfirmed
- Cannot verify whether cube graphic changes subtly at each stop beyond what screenshots show
- Deterministic site facts are site-wide, not confirmed specific to this section's exact type sizes or colors used within it

## 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: steps
- Source type: process
- Structure: Central vertical timeline connecting graphical elements with text blocks alternating left and right.
- Layout: Central vertical timeline connecting graphical elements with text blocks alternating left and right.
- Styles: illustrative, geometric, minimal
- Components: headline, cta-button, isometric-cubes, timeline-line, text-blocks
- Purpose: A long scrolling storytelling section where text panels appear on alternating sides of a central vertical line connecting geometric isometric cubes.
- Visual signature: A continuous vertical wireframe line passing through 3D isometric cubes on a light gray background.
- Place on the page: 10 of 14, after Feature collection (`agiloft-com:C06`), before Gallery (`agiloft-com:C07`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### 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": "88px",
      "family": "Teodor",
      "source": "computed",
      "traits": "capitalize",
      "weight": "200",
      "evidence": "font-10: computed CSS at 1440×1000; AI role: Largest heading on the page (88px Teodor), used for the primary H1.",
      "sampleId": "font-10",
      "confidence": 0.95,
      "lineHeight": "92.4px",
      "letterSpacing": "-0.9px"
    },
    {
      "role": "heading",
      "size": "64px",
      "family": "Teodor",
      "source": "computed",
      "traits": "Regular",
      "weight": "200",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: Large 64px Teodor serif used for major section headings.",
      "sampleId": "font-7",
      "confidence": 0.9,
      "lineHeight": "70.4px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Messinasansweb",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-18: computed CSS at 1440×1000; AI role: 16px Messinasansweb used frequently for descriptive text and UI labels.",
      "sampleId": "font-18",
      "confidence": 0.85,
      "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": "#0D0D0D",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-7: computed rgb(13, 13, 13); AI role: Deep black (#0D0D0D) used extensively as the primary background color for top and bottom sections.",
      "sampleId": "color-7",
      "confidence": 0.9
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for primary typography against dark backgrounds.",
      "sampleId": "color-1",
      "confidence": 0.9
    },
    {
      "hex": "#EE7501",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-16: computed rgb(238, 117, 1); AI role: Vibrant orange (#EE7501) used for the top announcement bar and active interactive states.",
      "sampleId": "color-16",
      "confidence": 0.9
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used as the background for mid-page content sections.",
      "sampleId": "color-1",
      "confidence": 0.85
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 0, 0); AI role: Black (#000000) used for typography against light backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.85
    },
    {
      "hex": "#EB9647",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-12: computed rgb(235, 150, 71); AI role: Lighter orange (#EB9647) used for decorative lines, diagrams, and text links.",
      "sampleId": "color-12",
      "confidence": 0.8
    },
    {
      "hex": "#DEDEDE",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-13: computed rgb(222, 222, 222); AI role: Light grey (#DEDEDE) used for borders separating editorial cards.",
      "sampleId": "color-13",
      "confidence": 0.7
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px or functionally non-existent across prominent UI elements.",
  "density": "Comfortable to sparse. High reliance on negative space to create focus around key statements and diagrams. Information is chunked into distinct, easily scannable sections.",
  "evidence": "Measured DOM values, visual observation of padding/margins, sharp corners on DOM elements, thin 1px borders in CSS, distinct container constraints on desktop.",
  "borderStyle": "Thin, crisp solid lines. Used frequently for structural definition, such as separating list items, outlining UI representations, and dividing footer columns.",
  "buttonStyle": "Solid fill rectangles with sharp corners. Typically high contrast (white on black or black on white), relying on typographic clarity rather than borders or shadows.",
  "cornerStyle": "Strictly sharp, orthogonal corners. Very little to no rounding on buttons, input fields, or container elements, reinforcing a precise, technical aesthetic.",
  "contentWidth": "Wide max-width container, likely around 1200px-1440px, allowing for expansive multi-column layouts and large typographic displays while maintaining margins.",
  "spacingRhythm": "Generous and clearly defined. Large vertical padding separates major sections, while tighter, consistent margins are used within components like editorial cards and feature lists."
}
```

### 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. **scroll** — As the user scrolls through the 'A trifecta of data, workflows, and AI' section, text panels describing 'Trustworthy Business Intelligence', 'AI on the inside', 'Autonomous Action', and 'Data Liberation' appear and lock into place alongside a central wireframe graphic. (28s–37s; 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: 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: Central vertical timeline/connector layout; Alternating left-right text block pattern; Modular panel structure pairing a title, short paragraph, and icon/graphic
- Dependencies: Specific isometric cube illustration asset; Teodor serif display font and Messinasansweb body font; Orange accent line/cube color scheme
- Guidance: Reuse the vertical-line alternating-panel skeleton and swap in content-specific diagrams per stage with a different visual motif or color system; retiming scroll-trigger behavior to vary per panel would also need re-implementation.

### 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 steps section inspired by the design evidence titled “Isometric Timeline Scroll”.

Purpose: A long scrolling storytelling section where text panels appear on alternating sides of a central vertical line connecting geometric isometric cubes.

Structure: Central vertical timeline connecting graphical elements with text blocks alternating left and right.. Source layout label: Central vertical timeline connecting graphical elements with text blocks alternating left and right.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: A continuous vertical wireframe line passing through 3D isometric cubes on a light gray background.

Components: headline, cta-button, isometric-cubes, timeline-line, text-blocks.

Style direction: illustrative, geometric, minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"88px","family":"Teodor","source":"computed","traits":"capitalize","weight":"200","evidence":"font-10: computed CSS at 1440×1000; AI role: Largest heading on the page (88px Teodor), used for the primary H1.","sampleId":"font-10","confidence":0.95,"lineHeight":"92.4px","letterSpacing":"-0.9px"} {"role":"heading","size":"64px","family":"Teodor","source":"computed","traits":"Regular","weight":"200","evidence":"font-7: computed CSS at 1440×1000; AI role: Large 64px Teodor serif used for major section headings.","sampleId":"font-7","confidence":0.9,"lineHeight":"70.4px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Messinasansweb","source":"computed","traits":"Regular","weight":"400","evidence":"font-18: computed CSS at 1440×1000; AI role: 16px Messinasansweb used frequently for descriptive text and UI labels.","sampleId":"font-18","confidence":0.85,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#0D0D0D","name":"canvas","role":"canvas","source":"computed","evidence":"color-7: computed rgb(13, 13, 13); AI role: Deep black (#0D0D0D) used extensively as the primary background color for top and bottom sections.","sampleId":"color-7","confidence":0.9} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for primary typography against dark backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#EE7501","name":"primary action","role":"primary-action","source":"computed","evidence":"color-16: computed rgb(238, 117, 1); AI role: Vibrant orange (#EE7501) used for the top announcement bar and active interactive states.","sampleId":"color-16","confidence":0.9} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used as the background for mid-page content sections.","sampleId":"color-1","confidence":0.85} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: Black (#000000) used for typography against light backgrounds.","sampleId":"color-2","confidence":0.85} {"hex":"#EB9647","name":"accent","role":"accent","source":"computed","evidence":"color-12: computed rgb(235, 150, 71); AI role: Lighter orange (#EB9647) used for decorative lines, diagrams, and text links.","sampleId":"color-12","confidence":0.8} {"hex":"#DEDEDE","name":"border","role":"border","source":"computed","evidence":"color-13: computed rgb(222, 222, 222); AI role: Light grey (#DEDEDE) used for borders separating editorial cards.","sampleId":"color-13","confidence":0.7}

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: scroll: As the user scrolls through the 'A trifecta of data, workflows, and AI' section, text panels describing 'Trustworthy Business Intelligence', 'AI on the inside', 'Autonomous Action', and 'Data Liberation' appear and lock into place alongside a central wireframe graphic. (95% confidence)

Transfer these principles: Central vertical timeline/connector layout; Alternating left-right text block pattern; Modular panel structure pairing a title, short paragraph, and icon/graphic.

Dependencies: Specific isometric cube illustration asset; Teodor serif display font and Messinasansweb body font; Orange accent line/cube color scheme.

Adaptation guidance: Reuse the vertical-line alternating-panel skeleton and swap in content-specific diagrams per stage with a different visual motif or color system; retiming scroll-trigger behavior to vary per panel would also need re-implementation.

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