# Resource Grid with Illustrations

Schema: Design Details SECTION.md v3.2
Website: Amby
Source: https://www.amby.com/
Source section IDs: fa24ed57-7bd1-4eb1-bc89-540e60b5cee5
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Each card pairs a pastel illustration with a short title and excerpt, and the drawing relates to its topic (a robot for AI costs, binoculars for career pages), so cards are easy to scan.
- The 3x2 grid of equal cards, each with a 16px radius, sits under a plain eyebrow, headline and a single 'View all' button, so the order is clear.
- Warm cream canvas, dark green-black text and a different pastel per card keep the grid colourful without feeling noisy.

What a screenshot can't show:
- The recording showed no motion or hover behaviour, so card interactions are unknown.
- Measured spacing uses 8, 24 and 64px gaps, 160px vertical section padding and 40px side padding, with content about 1360px wide and cards about 411px wide. The eyebrow is 14px bold with 0.6px letter spacing.

Borrow: Give every card in a repeating grid the same frame and structure, then let a unique colour and a topic-specific illustration make each one distinct.
Leave alone: Don't copy the Lastik serif headline, the Switzer body font, the lavender and lime palette or the sparkle-accented illustration style; use a free serif such as Fraunces and your own drawings.

## Classification

- Type: editorial
- Layout: Three-column, two-row grid of horizontal cards with a 'View all' button below.
- Styles: colourful, illustrative, editorial
- Confidence: 100%

## Purpose and structure

A grid of six article or resource cards, each featuring a pastel background and an illustration.

Visual signature: A cohesive set of colorful, illustrated editorial cards displaying blog content.

## Components

- Section Eyebrow
- Headline
- Article Cards
- Illustrations
- View All Button

## Typography

- Display: Lastik Regular — 72px 400
- Heading: Lastik Regular — 48px 400
- Body: Switzer — 18px 400

## Functional palette

- Canvas: canvas #F7F2EB
- Text: text #131E0D
- Surface: surface #FFFFFF
- Accent: accent #C7C7FF
- Primary-Action: primary action #F0FF80

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 62 — Serif display headline (Lastik) paired with sans body text creates clear editorial hierarchy; consistent heading/excerpt pattern across all six cards with underline accents on key terms, but the type treatment itself is standard editorial convention rather than distinctive. Next tier: Typography follows a competent, safe editorial pattern; no unusual scale contrast, custom ligatures, or expressive type handling that would push it into memorable territory.
- Composition: 68 — Clean, consistent 3x2 grid with uniform card proportions (1.8 aspect ratio), generous gaps, and a clear eyebrow-headline-grid-CTA vertical structure. The pastel illustration headers unify the grid visually while differentiating each card by color and icon, giving strong scannability. Next tier: The grid is a conventional blog/resource layout; nothing in the spatial arrangement (equal cards, centered CTA) breaks from the standard template to create a distinctive compositional idea.
- Motion: not_assessed — No motion moments or timestamped evidence were supplied for this section. Next tier: Requires timestamped visible motion evidence (hover states, reveal animations) to assess.
- Content: 65 — Each card integrates a custom pastel illustration thematically tied to its article topic (robot for AI costs, binoculars for career pages, coins for feriepenger), with consistent title/excerpt copy pairing. The illustrations are specific and non-generic, directly supporting the content rather than decorative stock imagery. Next tier: Illustrations, while charming, are decorative supplements rather than deeply integrated with layout or typography; content and visual system remain in parallel tracks rather than fused.
- Originality: 66 — The custom illustrated icon system per card (sparkle accents, distinct color backgrounds, whimsical line-art subjects) is a specific and recognizable design choice that elevates an otherwise generic blog grid beyond template defaults. Next tier: The underlying structure (eyebrow, headline, 3-col card grid, view-all button) is a ubiquitous resource-section pattern; the illustration style, while nice, is an asset layer rather than a structural innovation.
- Adaptability: 60 — Structure is cleanly modular: fixed-size image/illustration slot, title, excerpt, repeating per card, with deterministic radius (16px) and spacing values supplied, making the skin easily swappable. Next tier: Illustrations are custom pastel artwork tied tightly to brand aesthetic, so while layout transfers easily, achieving equivalent visual charm requires bespoke illustration assets not generic imagery.

Strengths:
- Cohesive pastel illustration system gives each card a distinct, memorable identity tied to its topic
- Clean, consistent grid with uniform card dimensions and generous spacing aids scannability
- Clear three-tier hierarchy: eyebrow, serif headline, card grid, CTA

Weaknesses:
- Underlying grid/card pattern is a conventional blog layout with no structural innovation
- No supplied motion evidence despite cards being likely interactive (hover states unconfirmed)
- Illustrations function as decorative headers rather than being integrated into typographic or layout structure

Why it does not reach the next tier: The section is well-executed and visually pleasant through its illustration system, but the layout itself is a standard three-column resource grid with no compositional or interactive idea that would make it feel singular rather than a polished template application.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the grid skeleton and spacing tokens directly; replace illustrations with photography or icons matching brand identity, and swap the serif headline for an equivalent display font while preserving the eyebrow-headline-grid-CTA sequence.

What transfers:
- Three-column card grid structure with fixed image/title/excerpt slots
- 16px card image radius and consistent gap rhythm
- Eyebrow + serif headline + grid + CTA section pattern

Dependencies:
- Custom pastel illustration assets per card topic
- Serif display font (Lastik) for headline hierarchy

## 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 data supplied, so hover/transition behavior on cards is unassessed
- Cannot verify exact illustration rendering technique or whether illustrations are static images or SVG/animated

## 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: editorial
- Source type: editorial
- Structure: grid
- Layout: Three-column, two-row grid of horizontal cards with a 'View all' button below.
- Styles: colourful, illustrative, editorial
- Components: Section Eyebrow, Headline, Article Cards, Illustrations, View All Button
- Purpose: A grid of six article or resource cards, each featuring a pastel background and an illustration.
- Visual signature: A cohesive set of colorful, illustrated editorial cards displaying blog content.
- Place on the page: 8 of 10, after Testimonials (`amby-com:C07`), before Form (`amby-com:C09`)

### Crop and composition

- Crop: 1440×1643px; aspect ratio 0.876:1
- Page bounds: 6065–7708px of 9687px
- Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

### 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": [
    {
      "role": "card/subheading",
      "family": "Switzer",
      "stack": "Switzer, \"Switzer Placeholder\", sans-serif",
      "size": "20px",
      "weight": "400",
      "lineHeight": "25px",
      "letterSpacing": "-0.4px",
      "sample": "We offer tailored recruitment and HR services for all your needs. So you can focus on the right tale",
      "element": "p",
      "occurrences": 8,
      "sourceId": "font-7"
    },
    {
      "role": "body/supporting copy",
      "family": "Switzer",
      "stack": "Switzer, \"Switzer Placeholder\", sans-serif",
      "size": "14px",
      "weight": "700",
      "lineHeight": "16.1px",
      "letterSpacing": "0.6px",
      "sample": "Our Services",
      "element": "p",
      "occurrences": 7,
      "sourceId": "font-8"
    },
    {
      "role": "body/supporting copy",
      "family": "Switzer",
      "stack": "Switzer, \"Switzer Placeholder\", sans-serif",
      "size": "18px",
      "weight": "700",
      "lineHeight": "18px",
      "letterSpacing": "-0.4px",
      "sample": "Book a call",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-10"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "72px",
      "family": "Lastik Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Lastik Regular at 72px, used for the main hero headline 'Finding your people'.",
      "sampleId": "font-2",
      "confidence": 1,
      "lineHeight": "79.2px",
      "letterSpacing": "-2.9px"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "Lastik Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Lastik Regular at 48px, used for major section headings like 'What our clients have to say'.",
      "sampleId": "font-3",
      "confidence": 1,
      "lineHeight": "52.8px",
      "letterSpacing": "-1.9px"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "Switzer",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Switzer at 18px, used for general paragraph text and navigation links.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "24.3px",
      "letterSpacing": "-0.4px"
    }
  ]
}
```

### 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": "#F7F2EB",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(247, 242, 235); AI role: The warm off-white (#F7F2EB) used as the primary background color for the entire page.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#131E0D",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(19, 30, 13); AI role: The dark green/black (#131E0D) used for almost all typography and illustration outlines.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-7: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for the navigation bar background and some card backgrounds.",
      "sampleId": "color-7",
      "confidence": 0.9
    },
    {
      "hex": "#C7C7FF",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-4: computed rgb(199, 199, 255); AI role: Pastel purple (#C7C7FF) used as a background color for stat and resource cards.",
      "sampleId": "color-4",
      "confidence": 0.85
    },
    {
      "hex": "#F0FF80",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-13: computed rgb(240, 255, 128); AI role: Bright yellow (#F0FF80) used for the primary 'Book a call' button in the navigation.",
      "sampleId": "color-13",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Large border radii on cards and images (appearing to be around 16-24px), and fully rounded pill shapes for buttons and the navigation bar.",
  "density": "Low density. The layout is spacious, allowing typography and illustrations room to breathe.",
  "evidence": "Observed from the generous whitespace around the hero text, the rounded corners on the 'Numbers don't lie' cards, and the pill-shaped 'Book a call' buttons.",
  "borderStyle": "Mostly borderless design, relying on background color contrast to define surfaces. Illustrations use solid black strokes.",
  "buttonStyle": "Pill-shaped with solid background colors (black or yellow) and no borders.",
  "cornerStyle": "Consistently rounded corners across all container elements.",
  "contentWidth": "Content is constrained to a central column with wide margins on desktop, maintaining readability.",
  "spacingRhythm": "Generous vertical spacing between major sections, creating a relaxed pacing. Grids use consistent, moderate gaps between cards."
}
```

### Reconstruction specification

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

- Root: 1440×1643px; flex; padding {"top":"160px","left":"40px","right":"40px","bottom":"160px"}; gap 64px; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 8, 24, 64px.
- Representative content widths: 1360, 411px.
- Layout containers: 7; cards/surfaces: 6; media elements: 6; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 6065,
      "bottom": 7708,
      "pageHeight": 9687
    }
  },
  "container": {
    "size": "1440×1643px",
    "position": "x 0px, y 6065px",
    "display": "flex",
    "positionMode": "relative",
    "padding": {
      "top": "160px",
      "left": "40px",
      "right": "40px",
      "bottom": "160px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "64px",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "hidden"
  },
  "spacing": {
    "observedGapsPx": [
      8,
      24,
      64
    ],
    "representativeContentWidthsPx": [
      1360,
      411
    ]
  },
  "columns": [
    {
      "element": "section · BlogLatest resources.What Does It Actually Cost to Hire AI Talent in Norway?AI talent has a reputati",
      "size": "1440×1643px",
      "position": "x 0px, y 6065px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "64px"
    },
    {
      "element": "a · framer-v4rnqf framer-1rsyx5c",
      "size": "411×231px",
      "position": "x 40px, y 6432px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "24px"
    },
    {
      "element": "a · framer-v4rnqf framer-1rsyx5c",
      "size": "411×231px",
      "position": "x 515px, y 6432px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "24px"
    },
    {
      "element": "a · framer-v4rnqf framer-1rsyx5c",
      "size": "411×231px",
      "position": "x 989px, y 6432px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "24px"
    },
    {
      "element": "a · framer-v4rnqf framer-1rsyx5c",
      "size": "411×231px",
      "position": "x 40px, y 6991px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "24px"
    },
    {
      "element": "a · framer-v4rnqf framer-1rsyx5c",
      "size": "411×231px",
      "position": "x 515px, y 6991px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "24px"
    },
    {
      "element": "a · framer-v4rnqf framer-1rsyx5c",
      "size": "411×231px",
      "position": "x 989px, y 6991px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "24px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "img · img",
      "size": "411×231px",
      "position": "x 40px, y 6432px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "16px",
      "border": "0px none rgb(0, 0, 238)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · img",
      "size": "411×231px",
      "position": "x 515px, y 6432px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "16px",
      "border": "0px none rgb(0, 0, 238)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · img",
      "size": "411×231px",
      "position": "x 989px, y 6432px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "16px",
      "border": "0px none rgb(0, 0, 238)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · img",
      "size": "411×231px",
      "position": "x 40px, y 6991px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "16px",
      "border": "0px none rgb(0, 0, 238)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · img",
      "size": "411×231px",
      "position": "x 515px, y 6991px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "16px",
      "border": "0px none rgb(0, 0, 238)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · img",
      "size": "411×231px",
      "position": "x 989px, y 6991px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "16px",
      "border": "0px none rgb(0, 0, 238)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "6px",
      "16px",
      "40px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · img",
    "size": "411×231px",
    "position": "x 40px, y 6432px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "16px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/wacyhNAepP7fVHXdWUB7WpNPM.png?scale-down-to=512&width=1920&height=1080"
  },
  {
    "element": "img · img",
    "size": "411×231px",
    "position": "x 515px, y 6432px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "16px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/gA7rvqFbjDCffBIZg44desrvf8.jpg?scale-down-to=512&width=1920&height=1080"
  },
  {
    "element": "img · img",
    "size": "411×231px",
    "position": "x 989px, y 6432px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "16px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/8E6MnMRyKxcqQf50CV4BpIfs.jpg?scale-down-to=512&width=1920&height=1080"
  },
  {
    "element": "img · img",
    "size": "411×231px",
    "position": "x 40px, y 6991px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "16px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/1oRfYSX1jU2GPML9pwVCsCzGGIE.jpg?scale-down-to=512&width=1920&height=1080"
  },
  {
    "element": "img · img",
    "size": "411×231px",
    "position": "x 515px, y 6991px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "16px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/4MFc9rhZkwlQcI3yflCbTDIXljQ.jpg?scale-down-to=512&width=1920&height=1080"
  },
  {
    "element": "img · img",
    "size": "411×231px",
    "position": "x 989px, y 6991px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "16px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/Y5xnbRKd66hYgV274jROfHBs.jpg?scale-down-to=512&width=1920&height=1080"
  }
]
```

#### 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-657",
    "gap": "64px",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 6065,
      "width": 1440,
      "height": 1643
    },
    "role": null,
    "label": "BlogLatest resources.What Does It Actually Cost to Hire AI Talent in Norway?AI talent has a reputati",
    "border": "0px none rgb(0, 0, 0)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "flex",
    "padding": {
      "top": "160px",
      "left": "40px",
      "right": "40px",
      "bottom": "160px"
    },
    "overflow": "hidden",
    "position": "relative",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [
    {
      "id": "ld-674",
      "tag": "img",
      "rect": {
        "x": 40,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "border": "0px none rgb(0, 0, 238)",
      "radius": "16px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-686",
      "tag": "img",
      "rect": {
        "x": 515,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "border": "0px none rgb(0, 0, 238)",
      "radius": "16px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-698",
      "tag": "img",
      "rect": {
        "x": 989,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "border": "0px none rgb(0, 0, 238)",
      "radius": "16px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-710",
      "tag": "img",
      "rect": {
        "x": 40,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "border": "0px none rgb(0, 0, 238)",
      "radius": "16px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-722",
      "tag": "img",
      "rect": {
        "x": 515,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "border": "0px none rgb(0, 0, 238)",
      "radius": "16px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-734",
      "tag": "img",
      "rect": {
        "x": 989,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "border": "0px none rgb(0, 0, 238)",
      "radius": "16px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-674",
      "tag": "img",
      "rect": {
        "x": 40,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/wacyhNAepP7fVHXdWUB7WpNPM.png?scale-down-to=512&width=1920&height=1080",
        "naturalWidth": 410,
        "naturalHeight": 230
      },
      "radius": "16px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-686",
      "tag": "img",
      "rect": {
        "x": 515,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/gA7rvqFbjDCffBIZg44desrvf8.jpg?scale-down-to=512&width=1920&height=1080",
        "naturalWidth": 410,
        "naturalHeight": 230
      },
      "radius": "16px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-698",
      "tag": "img",
      "rect": {
        "x": 989,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/8E6MnMRyKxcqQf50CV4BpIfs.jpg?scale-down-to=512&width=1920&height=1080",
        "naturalWidth": 410,
        "naturalHeight": 230
      },
      "radius": "16px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-710",
      "tag": "img",
      "rect": {
        "x": 40,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/1oRfYSX1jU2GPML9pwVCsCzGGIE.jpg?scale-down-to=512&width=1920&height=1080",
        "naturalWidth": 410,
        "naturalHeight": 230
      },
      "radius": "16px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-722",
      "tag": "img",
      "rect": {
        "x": 515,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/4MFc9rhZkwlQcI3yflCbTDIXljQ.jpg?scale-down-to=512&width=1920&height=1080",
        "naturalWidth": 410,
        "naturalHeight": 230
      },
      "radius": "16px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-734",
      "tag": "img",
      "rect": {
        "x": 989,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/Y5xnbRKd66hYgV274jROfHBs.jpg?scale-down-to=512&width=1920&height=1080",
        "naturalWidth": 410,
        "naturalHeight": 230
      },
      "radius": "16px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 6065,
    "bottom": 7708,
    "pageHeight": 9687
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-657",
      "gap": "64px",
      "tag": "section",
      "rect": {
        "x": 0,
        "y": 6065,
        "width": 1440,
        "height": 1643
      },
      "role": null,
      "label": "BlogLatest resources.What Does It Actually Cost to Hire AI Talent in Norway?AI talent has a reputati",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-671",
      "gap": "24px",
      "tag": "a",
      "rect": {
        "x": 40,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "framer-v4rnqf framer-1rsyx5c",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-683",
      "gap": "24px",
      "tag": "a",
      "rect": {
        "x": 515,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "framer-v4rnqf framer-1rsyx5c",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-695",
      "gap": "24px",
      "tag": "a",
      "rect": {
        "x": 989,
        "y": 6432,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "framer-v4rnqf framer-1rsyx5c",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-707",
      "gap": "24px",
      "tag": "a",
      "rect": {
        "x": 40,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "framer-v4rnqf framer-1rsyx5c",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-719",
      "gap": "24px",
      "tag": "a",
      "rect": {
        "x": 515,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "framer-v4rnqf framer-1rsyx5c",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-731",
      "gap": "24px",
      "tag": "a",
      "rect": {
        "x": 989,
        "y": 6991,
        "width": 411,
        "height": 231
      },
      "role": null,
      "label": "framer-v4rnqf framer-1rsyx5c",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      8,
      24,
      64
    ],
    "representativeContentWidthsPx": [
      1360,
      411
    ]
  },
  "coverage": {
    "cards": 6,
    "media": 6,
    "animations": 0,
    "elementsInSection": 32
  },
  "surfaces": {
    "radii": [
      "6px",
      "16px",
      "40px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-11-02T06:36:47.441Z",
  "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: Three-column card grid structure with fixed image/title/excerpt slots; 16px card image radius and consistent gap rhythm; Eyebrow + serif headline + grid + CTA section pattern
- Dependencies: Custom pastel illustration assets per card topic; Serif display font (Lastik) for headline hierarchy
- Guidance: Reuse the grid skeleton and spacing tokens directly; replace illustrations with photography or icons matching brand identity, and swap the serif headline for an equivalent display font while preserving the eyebrow-headline-grid-CTA sequence.

### 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 editorial section inspired by the design evidence titled “Resource Grid with Illustrations”.

Purpose: A grid of six article or resource cards, each featuring a pastel background and an illustration.

Structure: grid. Source layout label: Three-column, two-row grid of horizontal cards with a 'View all' button below.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

Visual signature to preserve at the pattern level: A cohesive set of colorful, illustrated editorial cards displaying blog content.

Components: Section Eyebrow, Headline, Article Cards, Illustrations, View All Button.

Style direction: colourful, illustrative, editorial.

Observed crop: 1440×1643px (0.876:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"72px","family":"Lastik Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Lastik Regular at 72px, used for the main hero headline 'Finding your people'.","sampleId":"font-2","confidence":1,"lineHeight":"79.2px","letterSpacing":"-2.9px"} {"role":"heading","size":"48px","family":"Lastik Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: Lastik Regular at 48px, used for major section headings like 'What our clients have to say'.","sampleId":"font-3","confidence":1,"lineHeight":"52.8px","letterSpacing":"-1.9px"} {"role":"body","size":"18px","family":"Switzer","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Switzer at 18px, used for general paragraph text and navigation links.","sampleId":"font-6","confidence":0.95,"lineHeight":"24.3px","letterSpacing":"-0.4px"}

Color evidence: {"hex":"#F7F2EB","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(247, 242, 235); AI role: The warm off-white (#F7F2EB) used as the primary background color for the entire page.","sampleId":"color-1","confidence":1} {"hex":"#131E0D","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(19, 30, 13); AI role: The dark green/black (#131E0D) used for almost all typography and illustration outlines.","sampleId":"color-2","confidence":1} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-7: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for the navigation bar background and some card backgrounds.","sampleId":"color-7","confidence":0.9} {"hex":"#C7C7FF","name":"accent","role":"accent","source":"computed","evidence":"color-4: computed rgb(199, 199, 255); AI role: Pastel purple (#C7C7FF) used as a background color for stat and resource cards.","sampleId":"color-4","confidence":0.85} {"hex":"#F0FF80","name":"primary action","role":"primary-action","source":"computed","evidence":"color-13: computed rgb(240, 255, 128); AI role: Bright yellow (#F0FF80) used for the primary 'Book a call' button in the navigation.","sampleId":"color-13","confidence":0.8}

Typography measured inside this section: {"id":"font-7","size":"20px","count":8,"family":"Switzer","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":1815,"text":"We offer tailored recruitment and HR services for all your needs. So you can focus on the right tale","property":"font"},{"tag":"p","top":6756,"text":"AI talent has a reputation for being expensive, but how much more does it actually cost to hire? We ","property":"font"},{"tag":"p","top":6756,"text":"AI is changing how much ground one person can cover. As a result, tech companies are putting a highe","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"25px","letterSpacing":"-0.4px"} {"id":"font-8","size":"14px","count":7,"family":"Switzer","traits":"uppercase","weight":"700","contexts":[{"tag":"p","top":1557,"text":"Our Services","property":"font"},{"tag":"p","top":3104,"text":"How we do it","property":"font"},{"tag":"p","top":6229,"text":"Blog","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"16.1px","letterSpacing":"0.6px"} {"id":"font-10","size":"18px","count":4,"family":"Switzer","traits":"Regular","weight":"700","contexts":[{"tag":"p","top":55,"text":"Book a call","property":"font"},{"tag":"p","top":846,"text":"Book a call","property":"font"},{"tag":"p","top":7514,"text":"View all","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"18px","letterSpacing":"-0.4px"}

No section-bounded color samples were measured.

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":6065,"width":1440,"height":1643},"padding":{"top":"160px","left":"40px","right":"40px","bottom":"160px"},"gap":"64px","columns":null,"overflow":"hidden"}; spacing {"gapsPx":[8,24,64],"representativeContentWidthsPx":[1360,411]}; surfaces {"radii":["6px","16px","40px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":40,"y":6432,"width":411,"height":231},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"16px"},{"tag":"img","rect":{"x":515,"y":6432,"width":411,"height":231},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"16px"},{"tag":"img","rect":{"x":989,"y":6432,"width":411,"height":231},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"16px"},{"tag":"img","rect":{"x":40,"y":6991,"width":411,"height":231},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"16px"}]

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

Transfer these principles: Three-column card grid structure with fixed image/title/excerpt slots; 16px card image radius and consistent gap rhythm; Eyebrow + serif headline + grid + CTA section pattern.

Dependencies: Custom pastel illustration assets per card topic; Serif display font (Lastik) for headline hierarchy.

Adaptation guidance: Reuse the grid skeleton and spacing tokens directly; replace illustrations with photography or icons matching brand identity, and swap the serif headline for an equivalent display font while preserving the eyebrow-headline-grid-CTA sequence.

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