# Engineering Terminal Features

Schema: Design Details SECTION.md v3.2
Website: AVTL
Source: https://www.aegisvopak.com/
Source section IDs: f2c4c9b7-3d27-4529-820a-3ab37a575777
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The white card floats on a pale grey canvas with a soft shadow, so the content stands apart from the page without heavy borders.
- A two-column split puts the text on one side and the graphic on the other, each about 560px wide, and the row of tabs above makes it clear where you are.
- Dark teal-black text on white stays legible, and the green accent is kept for small signals, which keeps the whole card calm.

What a screenshot can't show:
- The recording showed no motion, so tab-switch and graphic transitions are unknown.
- Measured type sizes weren't captured; only gaps of 8px and 12px and section padding of 100px top and bottom and 124px left and right were.

Borrow: Put a tabbed feature story inside one elevated card, with a text column and a swappable graphic column, so each tab changes the content without changing the layout.
Leave alone: Don't copy the exact off-white canvas, the green accent or the concentric-circle graphic; use your own palette and a diagram that relates to your content.

## Classification

- Type: feature-card
- Layout: Centered floating card with a side-by-side text and graphic layout, topped by tab navigation.
- Styles: minimal, geometric
- Confidence: 90%

## Purpose and structure

A focused feature card with a graphic animation block and explanatory text.

Visual signature: A distinct, elevated white card on a light grey background with minimal geometric elements.

## Components

- Tabbed navigation
- Text block
- Graphic animation container

## Typography

- Display: lateralStandard — 68px 500
- Heading: lateralStandard — 28px 500
- Body: lateralStandard — 16px 400
- Mono: ibmPlexMono — 12px 400

## Functional palette

- Canvas: canvas #F1F0EB
- Text: text #16262D
- Primary-Action: primary action #4FBD67
- Muted-Text: muted text #7D7979

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 58 — Clean, legible pairing of large body-weight sans headline text with a mono/pill tab label; hierarchy is functional but unremarkable—no distinctive type pairing, scale contrast, or optical refinement beyond standard site defaults. Next tier: Needs a more considered scale relationship or a typographic detail (e.g. numeral treatment, tab label styling) that feels authored rather than default body/heading tokens reused.
- Composition: 63 — Balanced two-column split with a floating card, generous padding, and a soft shadow gives clear separation between explanatory text and graphic panel; tab row and step counter add wayfinding. Layout is competent and orderly but a fairly conventional feature-card template. Next tier: Grid is symmetrical/predictable; no tension, overlap, or asymmetry that would push it into memorable territory—reads as a solid but generic split-panel card.
- Motion: not_assessed — No timestamped visible motion evidence supplied (motion_moments and animations arrays are empty), so tab-switching or graphic transitions cannot be verified. Next tier: Requires specific timestamped description of transition behavior between tabs/graphics to assess.
- Content: 55 — Text and graphic are topically linked (facility description paired with an abstract diagram), and tab labels map to content sections, but the diagram itself (concentric circles) is generic and not clearly tied to the specific facility content shown. Next tier: The graphic needs a tighter, more literal or systemically clear relationship to its paired text to feel integrated rather than decorative filler.
- Originality: 48 — The floating rounded card with tab navigation, step counter, and abstract circle graphic is a common enterprise/SaaS feature-slider pattern; nothing here is distinctive or hard to substitute. Next tier: Needs a distinguishing visual or interaction idea beyond the standard card+tabs+abstract-icon convention to differentiate from countless similar sliders.
- Adaptability: 60 — Deterministic evidence gives clear card radius, shadow, padding, tab structure, and swappable SVG graphic container, making structure/skin separation feasible; the five-tab pattern and card shell transfer cleanly to other content sets. Next tier: Full separation is capped by unclear animation/transition behavior between tab states, which would be needed to fully decouple motion from skin.

Strengths:
- Clear content hierarchy: numbered progress, tab labels, body copy, and CTA are well organized within a single card
- Consistent soft-elevation card treatment (radius, shadow, border) gives a polished, clean surface
- Side-by-side text/graphic split makes scanning straightforward

Weaknesses:
- Abstract circle graphic feels generic and disconnected from the specific facility copy
- Tab row and pill CTA use conventional patterns seen across many SaaS/corporate sites
- No motion evidence provided to confirm any transition polish between tab states
- Typography relies on default heading/body tokens without a distinguishing detail

Why it does not reach the next tier: The section is orderly and cleanly built but relies entirely on conventional feature-slider conventions (tabs, step counter, floating card, abstract icon) without a distinguishing composition risk, content-specific graphic, or typographic flourish that would make it memorable or hard to substitute.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the card+tab+counter shell and text/graphic split as a template; swap the SVG panel content and copy per use case, and restyle accent color/radius tokens to match a new brand while preserving the layout skeleton.

What transfers:
- Card shell (radius, border, shadow, padding) as a reusable elevated surface
- Tab navigation plus step counter pattern for multi-item feature reveal
- Two-column text/graphic split layout

Dependencies:
- Custom SVG graphic assets per tab (currently abstract/generic, easily swappable)
- Brand color tokens (green accent, dark text, muted canvas) tied to this specific site's palette

## 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 motion timestamps supplied, so tab-transition and graphic animation quality could not be assessed
- Cannot verify exact font rendering or subtle spacing nuances beyond the supplied computed values
- Screenshot is a single static state; slider behavior across all 5 tabs is inferred rather than observed

## 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-card
- Structure: centered single-column
- Layout: Centered floating card with a side-by-side text and graphic layout, topped by tab navigation.
- Styles: minimal, geometric
- Components: Tabbed navigation, Text block, Graphic animation container
- Purpose: A focused feature card with a graphic animation block and explanatory text.
- Visual signature: A distinct, elevated white card on a light grey background with minimal geometric elements.
- Place on the page: 8 of 14, after Feature collection (`aegisvopak-com:feature-3d-systems`), before Gallery (`aegisvopak-com:other-map-coast`)

### Crop and composition

- Crop: 1200×731px; aspect ratio 1.642:1
- Page bounds: 5625–6502px of 10620px
- 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": "68px",
      "family": "lateralStandard",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 68px lateralStandard used for large primary headlines like 'Storing energy.'.",
      "sampleId": "font-2",
      "confidence": 1,
      "lineHeight": "68px",
      "letterSpacing": "-0.7px"
    },
    {
      "role": "heading",
      "size": "28px",
      "family": "lateralStandard",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: 28px lateralStandard used for subheadings and lead paragraphs.",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "30.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "lateralStandard",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: 16px lateralStandard used for general paragraph reading text.",
      "sampleId": "font-6",
      "confidence": 1,
      "lineHeight": "19.2px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "12px",
      "family": "ibmPlexMono",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: 12px ibmPlexMono used for labels, tags, and small technical details.",
      "sampleId": "font-5",
      "confidence": 0.95,
      "lineHeight": "15.6px",
      "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": [
    {
      "value": "#000000",
      "cssValue": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 94,
      "sourceId": "color-1"
    },
    {
      "value": "#CBC7C3",
      "cssValue": "rgb(203, 199, 195)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "svg-stroke"
      ],
      "occurrences": 7,
      "sourceId": "color-2"
    },
    {
      "value": "#C3CBC5",
      "cssValue": "rgb(195, 203, 197)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 11,
      "sourceId": "color-5"
    },
    {
      "value": "#524F4B",
      "cssValue": "rgb(82, 79, 75)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-stroke"
      ],
      "occurrences": 54,
      "sourceId": "color-9"
    },
    {
      "value": "#6C767A",
      "cssValue": "rgb(108, 118, 122)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "background"
      ],
      "occurrences": 16,
      "sourceId": "color-12"
    },
    {
      "value": "#50BE69",
      "cssValue": "rgba(79, 189, 103, 0.2)",
      "alpha": 0.2,
      "appliedAs": [
        "svg-stroke"
      ],
      "occurrences": 1,
      "sourceId": "color-14"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#F1F0EB",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(241, 240, 235); AI role: #F1F0EB provides the main off-white background for the page.",
      "sampleId": "color-3",
      "confidence": 1
    },
    {
      "hex": "#16262D",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-6: computed rgb(22, 38, 45); AI role: #16262D used for primary high-contrast headings and navigation links.",
      "sampleId": "color-6",
      "confidence": 1
    },
    {
      "hex": "#4FBD67",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-10: computed rgb(79, 189, 103); AI role: #4FBD67 (green) is the primary color for the main CTA button and interaction highlights.",
      "sampleId": "color-10",
      "confidence": 1
    },
    {
      "hex": "#7D7979",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-8: computed rgb(125, 121, 121); AI role: #7D7979 used for secondary text like the 'Powering progress.' portion of the hero.",
      "sampleId": "color-8",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Large border-radius values (likely 16px-24px) for structural containers and images, with pill-shapes (fully rounded) for primary buttons and small interactive tags.",
  "density": "Low density; the design prioritizes large typography and imagery over cramming information, resulting in a spacious layout.",
  "evidence": "Observed from the overall page structure, button styles in the nav and content, and CSS properties for border-radius and spacing.",
  "borderStyle": "Minimal use of solid borders; relies primarily on transparent borders (rgba(0,0,0,0.1)) or background color contrasts to define surfaces.",
  "buttonStyle": "Primary CTAs are solid green pills; secondary actions ('Learn more') are text with a small green icon button next to them.",
  "cornerStyle": "Distinctively soft; almost all structural elements, images, and buttons feature pronounced rounded corners.",
  "contentWidth": "Wide max-width container with consistent left and right outer margins to frame the content.",
  "spacingRhythm": "Generous spacing with large vertical margins separating major sections. Padding within cards is ample, allowing content to breathe."
}
```

### Reconstruction specification

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

- Root: 1440×877px; flex; padding {"top":"100px","left":"124px","right":"124px","bottom":"100px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 8, 12px.
- Representative content widths: 1192, 1190, 1142, 1134, 571, 559px.
- Layout containers: 7; cards/surfaces: 1; media elements: 12; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 5625,
      "bottom": 6502,
      "pageHeight": 10620
    }
  },
  "container": {
    "size": "1440×877px",
    "position": "x 0px, y 5625px",
    "display": "flex",
    "positionMode": "static",
    "padding": {
      "top": "100px",
      "left": "124px",
      "right": "124px",
      "bottom": "100px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(22, 38, 45)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      8,
      12
    ],
    "representativeContentWidthsPx": [
      1192,
      1190,
      1142,
      1134,
      571,
      559
    ]
  },
  "columns": [
    {
      "element": "section · Specialized FacilitiesPrecise LogisticsDiverse ExpertiseResponsive Customer ServiceTrusted By Client",
      "size": "1440×877px",
      "position": "x 0px, y 5625px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "ul · Specialized FacilitiesPrecise LogisticsDiverse ExpertiseResponsive Customer ServiceTrusted By Client",
      "size": "1134×26px",
      "position": "x 153px, y 5754px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "article · 1 / 5We engineer every terminal to meet the specific needs of high-volume, high-integrity products,",
      "size": "1190×569px",
      "position": "x 125px, y 5808px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "12px"
    },
    {
      "element": "article · 2 / 5To keep products flowing efficiently, we integrate each site with road, rail, pipeline, and jet",
      "size": "1190×569px",
      "position": "x 125px, y 5808px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "12px"
    },
    {
      "element": "article · 3 / 5Across India’s coastal gateways, AVTL stores, handles, and moves over 40 critical products, inc",
      "size": "1190×569px",
      "position": "x 125px, y 5808px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "12px"
    },
    {
      "element": "article · 4 / 5Your priorities are ours. We’re committed to getting your products where they need to be—safely",
      "size": "1190×569px",
      "position": "x 125px, y 5808px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "12px"
    },
    {
      "element": "article · 5 / 5We serve local and international customers across private, public, and retail sectors, adhering",
      "size": "1190×569px",
      "position": "x 125px, y 5808px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "12px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "section · Specialized FacilitiesPrecise LogisticsDiverse ExpertiseResponsive Customer ServiceTrusted By Client",
      "size": "1192×677px",
      "position": "x 124px, y 5725px",
      "padding": [
        "24px",
        "0px",
        "24px",
        "0px"
      ],
      "radius": "24px",
      "border": "1px solid rgba(0, 0, 0, 0.1)",
      "shadow": "rgba(3, 33, 107, 0.05) 0px 5px 7px 0px, rgba(3, 33, 107, 0.14) 0px 1.39082px 2.78165px 0px, rgba(0, 0, 0, 0.03) 0px 36.2471px 48.3294px 0px, rgba(255, 255, 255, 0.36) 0px 2px 4px 0px inset",
      "background": "rgba(255, 255, 255, 0.85)"
    }
  ],
  "surfaces": {
    "radii": [
      "24px",
      "12px",
      "8px"
    ],
    "borders": [
      "1px solid rgba(0, 0, 0, 0.1)"
    ],
    "shadows": [
      "rgba(3, 33, 107, 0.05) 0px 5px 7px 0px, rgba(3, 33, 107, 0.14) 0px 1.39082px 2.78165px 0px, rgba(0, 0, 0, 0.03) 0px 36.2471px 48.3294px 0px, rgba(255, 255, 255, 0.36) 0px 2px 4px 0px inset",
      "rgba(0, 0, 0, 0.08) 0px 1px 3px 0px inset",
      "rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 3px 0px, rgba(0, 0, 0, 0.02) 0px 7px 4px 0px, rgba(0, 0, 0, 0.01) 0px 13px 5px 0px, rgba(0, 0, 0, 0) 0px 20px 6px 0px",
      "rgba(0, 0, 0, 0.04) 0px 0.58px 1.73px 0px, rgba(0, 0, 0, 0.04) 0px 2.89px 2.89px 0px, rgba(0, 0, 0, 0.02) 0px 6.94px 4.05px 0px, rgba(0, 0, 0, 0.01) 0px 12.72px 5.2px 0px, rgba(0, 0, 0, 0) 0px 19.65px 5.78px 0px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "559×569px",
    "position": "x 732px, y 5808px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "559×569px",
    "position": "x 732px, y 5808px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "559×569px",
    "position": "x 732px, y 5808px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "559×569px",
    "position": "x 732px, y 5808px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "559×569px",
    "position": "x 732px, y 5808px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 149px, y 5808px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 1239px, y 5759px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 1267px, y 5759px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 243px, y 6350px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 243px, y 6350px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 243px, y 6350px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 240px, y 6350px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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
{
  "root": {
    "id": "ld-316",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 5625,
      "width": 1440,
      "height": 877
    },
    "role": null,
    "label": "Specialized FacilitiesPrecise LogisticsDiverse ExpertiseResponsive Customer ServiceTrusted By Client",
    "border": "0px none rgb(22, 38, 45)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "flex",
    "padding": {
      "top": "100px",
      "left": "124px",
      "right": "124px",
      "bottom": "100px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [
    {
      "id": "ld-317",
      "tag": "section",
      "rect": {
        "x": 124,
        "y": 5725,
        "width": 1192,
        "height": 677
      },
      "role": null,
      "label": "Specialized FacilitiesPrecise LogisticsDiverse ExpertiseResponsive Customer ServiceTrusted By Client",
      "border": "1px solid rgba(0, 0, 0, 0.1)",
      "radius": "24px",
      "shadow": "rgba(3, 33, 107, 0.05) 0px 5px 7px 0px, rgba(3, 33, 107, 0.14) 0px 1.39082px 2.78165px 0px, rgba(0, 0, 0, 0.03) 0px 36.2471px 48.3294px 0px, rgba(255, 255, 255, 0.36) 0px 2px 4px 0px inset",
      "padding": [
        "24px",
        "0px",
        "24px",
        "0px"
      ],
      "background": "rgba(255, 255, 255, 0.85)"
    }
  ],
  "media": [
    {
      "id": "ld-362",
      "tag": "svg",
      "rect": {
        "x": 732,
        "y": 5808,
        "width": 559,
        "height": 569
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-405",
      "tag": "svg",
      "rect": {
        "x": 732,
        "y": 5808,
        "width": 559,
        "height": 569
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-509",
      "tag": "svg",
      "rect": {
        "x": 732,
        "y": 5808,
        "width": 559,
        "height": 569
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-592",
      "tag": "svg",
      "rect": {
        "x": 732,
        "y": 5808,
        "width": 559,
        "height": 569
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-646",
      "tag": "svg",
      "rect": {
        "x": 732,
        "y": 5808,
        "width": 559,
        "height": 569
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-346",
      "tag": "svg",
      "rect": {
        "x": 149,
        "y": 5808,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-334",
      "tag": "svg",
      "rect": {
        "x": 1239,
        "y": 5759,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-338",
      "tag": "svg",
      "rect": {
        "x": 1267,
        "y": 5759,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-356",
      "tag": "svg",
      "rect": {
        "x": 243,
        "y": 6350,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-399",
      "tag": "svg",
      "rect": {
        "x": 243,
        "y": 6350,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-503",
      "tag": "svg",
      "rect": {
        "x": 243,
        "y": 6350,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-586",
      "tag": "svg",
      "rect": {
        "x": 240,
        "y": 6350,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 5625,
    "bottom": 6502,
    "pageHeight": 10620
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-316",
      "gap": "normal",
      "tag": "section",
      "rect": {
        "x": 0,
        "y": 5625,
        "width": 1440,
        "height": 877
      },
      "role": null,
      "label": "Specialized FacilitiesPrecise LogisticsDiverse ExpertiseResponsive Customer ServiceTrusted By Client",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-321",
      "gap": "normal",
      "tag": "ul",
      "rect": {
        "x": 153,
        "y": 5754,
        "width": 1134,
        "height": 26
      },
      "role": null,
      "label": "Specialized FacilitiesPrecise LogisticsDiverse ExpertiseResponsive Customer ServiceTrusted By Client",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-343",
      "gap": "12px",
      "tag": "article",
      "rect": {
        "x": 125,
        "y": 5808,
        "width": 1190,
        "height": 569
      },
      "role": null,
      "label": "1 / 5We engineer every terminal to meet the specific needs of high-volume, high-integrity products, ",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-389",
      "gap": "12px",
      "tag": "article",
      "rect": {
        "x": 125,
        "y": 5808,
        "width": 1190,
        "height": 569
      },
      "role": null,
      "label": "2 / 5To keep products flowing efficiently, we integrate each site with road, rail, pipeline, and jet",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-493",
      "gap": "12px",
      "tag": "article",
      "rect": {
        "x": 125,
        "y": 5808,
        "width": 1190,
        "height": 569
      },
      "role": null,
      "label": "3 / 5Across India’s coastal gateways, AVTL stores, handles, and moves over 40 critical products, inc",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-576",
      "gap": "12px",
      "tag": "article",
      "rect": {
        "x": 125,
        "y": 5808,
        "width": 1190,
        "height": 569
      },
      "role": null,
      "label": "4 / 5Your priorities are ours. We’re committed to getting your products where they need to be—safely",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-630",
      "gap": "12px",
      "tag": "article",
      "rect": {
        "x": 125,
        "y": 5808,
        "width": 1190,
        "height": 569
      },
      "role": null,
      "label": "5 / 5We serve local and international customers across private, public, and retail sectors, adhering",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      8,
      12
    ],
    "representativeContentWidthsPx": [
      1192,
      1190,
      1142,
      1134,
      571,
      559
    ]
  },
  "coverage": {
    "cards": 1,
    "media": 12,
    "animations": 0,
    "elementsInSection": 59
  },
  "surfaces": {
    "radii": [
      "24px",
      "12px",
      "8px"
    ],
    "borders": [
      "1px solid rgba(0, 0, 0, 0.1)"
    ],
    "shadows": [
      "rgba(3, 33, 107, 0.05) 0px 5px 7px 0px, rgba(3, 33, 107, 0.14) 0px 1.39082px 2.78165px 0px, rgba(0, 0, 0, 0.03) 0px 36.2471px 48.3294px 0px, rgba(255, 255, 255, 0.36) 0px 2px 4px 0px inset",
      "rgba(0, 0, 0, 0.08) 0px 1px 3px 0px inset",
      "rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 3px 0px, rgba(0, 0, 0, 0.02) 0px 7px 4px 0px, rgba(0, 0, 0, 0.01) 0px 13px 5px 0px, rgba(0, 0, 0, 0) 0px 20px 6px 0px",
      "rgba(0, 0, 0, 0.04) 0px 0.58px 1.73px 0px, rgba(0, 0, 0, 0.04) 0px 2.89px 2.89px 0px, rgba(0, 0, 0, 0.02) 0px 6.94px 4.05px 0px, rgba(0, 0, 0, 0.01) 0px 12.72px 5.2px 0px, rgba(0, 0, 0, 0) 0px 19.65px 5.78px 0px"
    ]
  },
  "animations": [],
  "capturedAt": "2026-09-21T04:29:17.393Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### 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: 1440px 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: Card shell (radius, border, shadow, padding) as a reusable elevated surface; Tab navigation plus step counter pattern for multi-item feature reveal; Two-column text/graphic split layout
- Dependencies: Custom SVG graphic assets per tab (currently abstract/generic, easily swappable); Brand color tokens (green accent, dark text, muted canvas) tied to this specific site's palette
- Guidance: Reuse the card+tab+counter shell and text/graphic split as a template; swap the SVG panel content and copy per use case, and restyle accent color/radius tokens to match a new brand while preserving the layout skeleton.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Engineering Terminal Features”.

Purpose: A focused feature card with a graphic animation block and explanatory text.

Structure: centered single-column. Source layout label: Centered floating card with a side-by-side text and graphic layout, topped by tab navigation.. 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, elevated white card on a light grey background with minimal geometric elements.

Components: Tabbed navigation, Text block, Graphic animation container.

Style direction: minimal, geometric.

Observed crop: 1200×731px (1.642:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"68px","family":"lateralStandard","source":"computed","traits":"Regular","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: 68px lateralStandard used for large primary headlines like 'Storing energy.'.","sampleId":"font-2","confidence":1,"lineHeight":"68px","letterSpacing":"-0.7px"} {"role":"heading","size":"28px","family":"lateralStandard","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: 28px lateralStandard used for subheadings and lead paragraphs.","sampleId":"font-1","confidence":0.9,"lineHeight":"30.8px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"lateralStandard","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 16px lateralStandard used for general paragraph reading text.","sampleId":"font-6","confidence":1,"lineHeight":"19.2px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"ibmPlexMono","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 12px ibmPlexMono used for labels, tags, and small technical details.","sampleId":"font-5","confidence":0.95,"lineHeight":"15.6px","letterSpacing":"normal"}

Color evidence: {"hex":"#F1F0EB","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(241, 240, 235); AI role: #F1F0EB provides the main off-white background for the page.","sampleId":"color-3","confidence":1} {"hex":"#16262D","name":"text","role":"text","source":"computed","evidence":"color-6: computed rgb(22, 38, 45); AI role: #16262D used for primary high-contrast headings and navigation links.","sampleId":"color-6","confidence":1} {"hex":"#4FBD67","name":"primary action","role":"primary-action","source":"computed","evidence":"color-10: computed rgb(79, 189, 103); AI role: #4FBD67 (green) is the primary color for the main CTA button and interaction highlights.","sampleId":"color-10","confidence":1} {"hex":"#7D7979","name":"muted text","role":"muted-text","source":"computed","evidence":"color-8: computed rgb(125, 121, 121); AI role: #7D7979 used for secondary text like the 'Powering progress.' portion of the hero.","sampleId":"color-8","confidence":0.9}

No section-bounded typography samples were measured.

Colors measured inside this section: {"id":"color-1","hex":"#000000","alpha":1,"count":94,"contexts":[{"tag":"svg","top":5808,"text":"","property":"svg-fill"},{"tag":"g","top":5804,"text":"","property":"svg-fill"},{"tag":"path","top":6042,"text":"","property":"svg-fill"}],"cssValue":"rgb(0, 0, 0)"} {"id":"color-2","hex":"#CBC7C3","alpha":1,"count":7,"contexts":[{"tag":"div","top":483,"text":"","property":"background"},{"tag":"path","top":5761,"text":"","property":"svg-stroke"}],"cssValue":"rgb(203, 199, 195)"} {"id":"color-5","hex":"#C3CBC5","alpha":1,"count":11,"contexts":[{"tag":"path","top":5804,"text":"","property":"svg-fill"}],"cssValue":"rgb(195, 203, 197)"} {"id":"color-9","hex":"#524F4B","alpha":1,"count":54,"contexts":[{"tag":"p","top":304,"text":"Aegis Vopak Terminals Ltd.'s intelligent storage solutions enable the safe and seamless distribution","property":"text"},{"tag":"span","top":413,"text":"Learn more","property":"text"},{"tag":"path","top":6042,"text":"","property":"svg-stroke"}],"cssValue":"rgb(82, 79, 75)"} {"id":"color-12","hex":"#6C767A","alpha":1,"count":16,"contexts":[{"tag":"a","top":41,"text":"About Us","property":"text"},{"tag":"button","top":5754,"text":"Precise Logistics","property":"text"},{"tag":"span","top":7245,"text":"","property":"background"}],"cssValue":"rgb(108, 118, 122)"} {"id":"color-14","hex":"#50BE69","alpha":0.2,"count":1,"contexts":[{"tag":"circle","top":5809,"text":"","property":"svg-stroke"}],"cssValue":"rgba(79, 189, 103, 0.2)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":5625,"width":1440,"height":877},"padding":{"top":"100px","left":"124px","right":"124px","bottom":"100px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8,12],"representativeContentWidthsPx":[1192,1190,1142,1134,571,559]}; surfaces {"radii":["24px","12px","8px"],"borders":["1px solid rgba(0, 0, 0, 0.1)"],"shadows":["rgba(3, 33, 107, 0.05) 0px 5px 7px 0px, rgba(3, 33, 107, 0.14) 0px 1.39082px 2.78165px 0px, rgba(0, 0, 0, 0.03) 0px 36.2471px 48.3294px 0px, rgba(255, 255, 255, 0.36) 0px 2px 4px 0px inset","rgba(0, 0, 0, 0.08) 0px 1px 3px 0px inset","rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 3px 0px, rgba(0, 0, 0, 0.02) 0px 7px 4px 0px, rgba(0, 0, 0, 0.01) 0px 13px 5px 0px, rgba(0, 0, 0, 0) 0px 20px 6px 0px","rgba(0, 0, 0, 0.04) 0px 0.58px 1.73px 0px, rgba(0, 0, 0, 0.04) 0px 2.89px 2.89px 0px, rgba(0, 0, 0, 0.02) 0px 6.94px 4.05px 0px, rgba(0, 0, 0, 0.01) 0px 12.72px 5.2px 0px, rgba(0, 0, 0, 0) 0px 19.65px 5.78px 0px"]}; media [{"tag":"svg","rect":{"x":732,"y":5808,"width":559,"height":569},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":732,"y":5808,"width":559,"height":569},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":732,"y":5808,"width":559,"height":569},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":732,"y":5808,"width":559,"height":569},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

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

Transfer these principles: Card shell (radius, border, shadow, padding) as a reusable elevated surface; Tab navigation plus step counter pattern for multi-item feature reveal; Two-column text/graphic split layout.

Dependencies: Custom SVG graphic assets per tab (currently abstract/generic, easily swappable); Brand color tokens (green accent, dark text, muted canvas) tied to this specific site's palette.

Adaptation guidance: Reuse the card+tab+counter shell and text/graphic split as a template; swap the SVG panel content and copy per use case, and restyle accent color/radius tokens to match a new brand while preserving the layout skeleton.

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