# Sticky Accordion Feature Explorer

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

## Builder's note

What makes it work:
- A clear split layout puts a short accordion list on the left and a sticky mockup on the right, so the reader always sees which label matches which visual.
- The orange accent marks the active list item and the matching highlighted area in the UI mockup, linking text and image with one colour on a near-black canvas.
- The mockup shows specific product content, such as an NDA clause and a contract type selector, so each feature looks real rather than generic.

What a screenshot can't show:
- In the recording, scrolling moves through the items over about 4 seconds (13–17s). Each item expands and highlights while the right-hand mockup swaps to match.
- No font sizes, spacing values or easing were measured, so the exact type scale and transition timing are unknown.

Borrow: Tie a scroll-driven list to one sticky visual, and use a single accent colour to show which label controls which part of the image.
Leave alone: Don't copy Agiloft's orange-on-black palette, its Teodor serif and Messina Sans pairing, or its contract-specific mockup content; use a free serif and a neutral sans in their style instead.

## Classification

- Type: features
- Layout: Split layout with left vertical accordion list and right sticky dynamic media.
- Styles: minimal
- Confidence: 95%

## Purpose and structure

Dark section featuring a vertically stacked accordion menu on the left that changes a UI mockup on the right as the user scrolls.

Visual signature: Dark background with an interactive expanding accordion list on the left driving visual changes on the right.

## Components

- headline
- accordion-menu
- cta-button
- dynamic-ui-mockup

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

- 13.0–17.0s — As the user scrolls down through the 'Features' section, an accordion menu on the left highlights different items ('Contract creation', 'Reviews and approvals', etc.), while the corresponding visual on the right changes. (90% confidence)

## Section quality

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

- Typography: 58 — Teodor serif headline against Messinasansweb body creates reasonable contrast and hierarchy, but within this crop type treatment is standard: single serif display word, uniform list labels, sans body copy. No distinctive scale play or refinement beyond site-wide system. Next tier: Needs more deliberate typographic differentiation between active/inactive accordion states or a more considered scale relationship to earn higher marks.
- Composition: 62 — Clear split layout with left list driving right sticky visual; good use of negative space and alignment, orange accent ties active item to highlighted UI region. Layout is legible and purposeful but a well-worn SaaS pattern without a distinguishing compositional twist. Next tier: Lacks a unique spatial idea beyond the standard accordion-plus-sticky-media template; would need asymmetry, scale shifts, or layered depth to be memorable.
- Motion: 55 — Gemini confirms timestamped scroll-linked behavior: accordion items expand/highlight while right panel mockup swaps corresponding to the active item (13-17s). This is a functional, expected interaction pattern rather than a crafted motion moment. Next tier: No evidence of transition quality, easing, or layered motion detail beyond a basic content swap; would need demonstrated finesse (crossfade, parallax, staggered reveal) to score higher.
- Content: 60 — Mockup content (NDA clause, contract type selector) is specific and integrates well with the described feature, giving the section real product context rather than generic placeholder imagery. Next tier: Content supports claims directly but doesn't push further into contextual storytelling or data specificity that would elevate it above a competent product demo.
- Originality: 50 — This is a common accordion-driven feature-explorer pattern seen across many SaaS marketing sites; nothing here reinterprets or subverts the convention. Next tier: Needs a novel mechanic, unexpected visual treatment, or structural inversion to move beyond the familiar template.
- Adaptability: 62 — Structure (list-drives-media) is clearly separable from skin: dark canvas, orange accent, and sharp corners could be swapped for other palettes/typefaces while preserving the accordion-to-mockup behavior. Next tier: Mockup is tightly coupled to a specific product UI, limiting pure skin-only reuse without rebuilding bespoke illustrative content.

Strengths:
- Clear content-to-visual mapping between accordion and media panel
- Good contrast and legible hierarchy on dark background
- Orange accent consistently ties active state to visual highlight

Weaknesses:
- Highly conventional accordion-explorer pattern with no distinguishing twist
- Typography treatment is standard, not scale-differentiated for state changes
- Motion is a basic content swap without demonstrated transition craft

Why it does not reach the next tier: The section executes a familiar SaaS pattern competently but doesn't introduce a distinctive compositional, typographic, or motion idea that would make it memorable beyond its category.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the accordion-driven sticky-panel structure and interaction logic; swap in new palette, typography, and custom mockup imagery relevant to new product/content.

What transfers:
- Left list / right sticky media split layout
- Accordion expand-to-reveal interaction model
- Accent color tied to active list item

Dependencies:
- Specific product UI mockup imagery (NDA contract example)
- Dark canvas and orange accent palette tokens
- Teodor serif headline and Messinasansweb body pairing

## 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 single timestamped description without transition detail
- No direct video access to assess easing or micro-interaction quality
- Deterministic facts cover sitewide tokens, not section-specific overrides

## 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: two-column
- Layout: Split layout with left vertical accordion list and right sticky dynamic media.
- Styles: minimal
- Components: headline, accordion-menu, cta-button, dynamic-ui-mockup
- Purpose: Dark section featuring a vertically stacked accordion menu on the left that changes a UI mockup on the right as the user scrolls.
- Visual signature: Dark background with an interactive expanding accordion list on the left driving visual changes on the right.
- Place on the page: 4 of 14, after Logo strip (`agiloft-com:C02`), before Product UI (`26d1cc3a-0120-4489-a9b9-99c54b9b3531`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

### 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 down through the 'Features' section, an accordion menu on the left highlights different items ('Contract creation', 'Reviews and approvals', etc.), while the corresponding visual on the right changes. (13s–17s; 90% 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: Left list / right sticky media split layout; Accordion expand-to-reveal interaction model; Accent color tied to active list item
- Dependencies: Specific product UI mockup imagery (NDA contract example); Dark canvas and orange accent palette tokens; Teodor serif headline and Messinasansweb body pairing
- Guidance: Reuse the accordion-driven sticky-panel structure and interaction logic; swap in new palette, typography, and custom mockup imagery relevant to new product/content.

### 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 “Sticky Accordion Feature Explorer”.

Purpose: Dark section featuring a vertically stacked accordion menu on the left that changes a UI mockup on the right as the user scrolls.

Structure: two-column. Source layout label: Split layout with left vertical accordion list and right sticky dynamic media.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

Visual signature to preserve at the pattern level: Dark background with an interactive expanding accordion list on the left driving visual changes on the right.

Components: headline, accordion-menu, cta-button, dynamic-ui-mockup.

Style direction: 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 down through the 'Features' section, an accordion menu on the left highlights different items ('Contract creation', 'Reviews and approvals', etc.), while the corresponding visual on the right changes. (90% confidence)

Transfer these principles: Left list / right sticky media split layout; Accordion expand-to-reveal interaction model; Accent color tied to active list item.

Dependencies: Specific product UI mockup imagery (NDA contract example); Dark canvas and orange accent palette tokens; Teodor serif headline and Messinasansweb body pairing.

Adaptation guidance: Reuse the accordion-driven sticky-panel structure and interaction logic; swap in new palette, typography, and custom mockup imagery relevant to new product/content.

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