# Four-Column Value Cards
Schema: Design Details SECTION.md v3.2
Website: Amby
Source: https://www.amby.com/
Source section IDs: 5ce3641a-34be-4b49-9096-22849791b237
Status: AI analysed; vocabulary promotion is automated
## Builder's note
What makes it work:
- Four equal vertical cards sit under a centered headline, so the eye moves from eyebrow to headline to cards in one clear pass.
- Each card has its own pastel fill and a line-art spot illustration that echoes its message, which adds personality without clutter.
- One neutral white card breaks the colour rhythm, and generous 160px vertical padding keeps the grid calm.
What a screenshot can't show:
- The recording showed no motion or hover behaviour, so the cards appear static.
- Measured type: the serif headline is 48px with -1.9px tracking and 52.8px line height, card titles are 24px semibold, and the eyebrow is 14px bold with 0.6px tracking. Gaps are 8, 24 and 64px.
Borrow: Give each repeated card its own soft colour and a matching illustration, and make one card neutral so the set feels designed rather than templated.
Leave alone: Don't copy the Lastik serif, the pastel lilac and lime palette, or the Scandi-themed illustrations such as the viking helmet; a free high-contrast serif and your own illustration set would work.
## Classification
- Type: feature-grid
- Layout: Four-column grid of vertical cards below a centered headline.
- Styles: colourful, illustrative, playful
- Confidence: 100%
## Purpose and structure
A row of four vertically-oriented cards, each with a distinct pastel background and line-art illustration.
Visual signature: Pastel-colored vertical cards with cohesive, playful spot illustrations.
## Components
- Section Eyebrow
- Headline
- Value Cards
- Illustrations
## 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: 61.29/100 (Good)
Scored coverage: 85%
- Typography: 62 — Clear pairing of a serif display headline (Lastik) against bold sans card titles and small Switzer body copy gives good hierarchy and contrast; eyebrow label is a nicely restrained pill. Type is purely functional though, with no distinctive treatment beyond consistent sizing. Next tier: Needs a more deliberate type-driven moment (e.g. varied scale, kerning, numerals) rather than standard heading/body pairing to push past polished-familiar.
- Composition: 65 — A clean four-column grid with consistent card proportions, generous padding, and one deliberately differentiated card (white/beige, no colored fill) breaks the symmetry just enough to add interest. Illustration-to-text ratio is consistent and the whitespace above is generous, giving confident hierarchy from eyebrow to headline to cards. Next tier: The grid is a fairly standard SaaS card layout; needs an unexpected structural choice (asymmetric sizing, overlap, unconventional alignment) to feel more than well-executed convention.
- Motion: not_assessed — No motion_moments or animation data supplied for this section; deterministic evidence shows animations: [] and empty animationIds. Next tier: Timestamped visible motion evidence is required before motion can be scored.
- Content: 60 — Each card pairs a short punchy headline with a one-sentence benefit and a custom line-art illustration that visually echoes its message (diamond/blocks for quality, puzzle pieces for fit, calculator for data, viking helmet for Scandi identity), giving reasonable integration between image and copy. Next tier: Illustrations are decorative rather than information-bearing; content doesn't go beyond generic value-prop statements to feel bespoke to this brand's specific offering.
- Originality: 58 — Pastel multi-color card backgrounds plus custom spot illustrations give a distinct, playful personality versus a generic icon grid, and the one neutral/white card as a visual break is a mildly original touch. Next tier: The underlying pattern (four pastel cards, one illustration each, headline+paragraph) is a common SaaS/startup template; without a more unexpected layout or interaction it reads as tasteful execution of a familiar format rather than a distinctive idea.
- Adaptability: 60 — Structure is a clean repeatable card component (fixed-size image block, title, paragraph) with deterministic padding/gap/shadow values, making the skin (background color, illustration asset) easily swappable from the layout and rhythm. Next tier: Dependence on bespoke custom SVG illustrations per card is a meaningful asset-production cost that limits trivial reuse without equivalent illustration investment.
Strengths:
- Consistent, well-proportioned four-card grid with clear visual hierarchy from eyebrow to headline to cards
- Custom line-art illustrations that thematically match each card's message, adding personality beyond stock icons
- One card breaks the pastel pattern (neutral/white) creating a subtle visual pause in the rhythm
- Generous padding and consistent card shadow/radius give the cards a tactile, considered surface treatment
Weaknesses:
- Overall format (pastel card grid with icon+headline+paragraph) is a common SaaS pattern
- No motion evidence provided, so any dynamism is unverifiable
- Illustrations are purely decorative, not tied to real content or data
- Typography, while competent, doesn't introduce a distinguishing voice beyond expected heading/body contrast
Why it does not reach the next tier: The section is well-executed and pleasant but relies on a familiar card-grid template with decorative illustrations; it lacks an unexpected structural, typographic, or interactive idea that would make it feel irreplaceable or surprising, and motion cannot be verified to add further distinction.
## Adaptation guidance
- Effort: Medium
- Guidance: Reuse the grid rhythm, padding, and card shadow/radius tokens directly; swap palette and illustrations to match new brand assets, but budget for custom illustration work to preserve the cohesive spot-illustration feel rather than substituting generic icons.
What transfers:
- Four-column card grid structure with consistent padding/gap rhythm
- Eyebrow + centered headline + card row composition pattern
- Pastel color-block card treatment with one neutral variant for visual break
- Card shadow/radius styling for soft-surface feel
Dependencies:
- Custom bespoke SVG line-art illustrations per card (hard to replicate without equivalent asset production)
- Specific pastel palette tokens (#C7C7FF, pink, green) tied to brand identity
- Display serif font (Lastik) for headline character
## 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 could not be assessed due to lack of timestamped animation evidence
- Exact font rendering and illustration production cost not independently verified beyond supplied SVG markup
- Palette and typography facts are derived from full-site tokens, not confirmed to be exclusive to this crop
## 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-grid
- Structure: centered single-column
- Layout: Four-column grid of vertical cards below a centered headline.
- Styles: colourful, illustrative, playful
- Components: Section Eyebrow, Headline, Value Cards, Illustrations
- Purpose: A row of four vertically-oriented cards, each with a distinct pastel background and line-art illustration.
- Visual signature: Pastel-colored vertical cards with cohesive, playful spot illustrations.
- Place on the page: 5 of 10, after Feature collection (`amby-com:C04`), before Stats (`amby-com:C06`)
### Crop and composition
- Crop: 1440×1025px; aspect ratio 1.405:1
- Page bounds: 2940–3965px of 9687px
- 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": [
{
"role": "card/subheading",
"family": "Switzer",
"stack": "Switzer, \"Switzer Placeholder\", sans-serif",
"size": "24px",
"weight": "600",
"lineHeight": "27.6px",
"letterSpacing": "-0.7px",
"sample": "Trusted by the best.",
"element": "h5",
"occurrences": 18,
"sourceId": "font-1"
},
{
"role": "section heading",
"family": "Lastik Regular",
"stack": "\"Lastik Regular\", sans-serif",
"size": "48px",
"weight": "400",
"lineHeight": "52.8px",
"letterSpacing": "-1.9px",
"sample": "Not your average talent partner (promise).",
"element": "h3",
"occurrences": 2,
"sourceId": "font-3"
},
{
"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"
}
],
"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": [
{
"value": "#C7C7FF",
"cssValue": "rgb(199, 199, 255)",
"alpha": 1,
"appliedAs": [
"background",
"svg-fill"
],
"occurrences": 23,
"sourceId": "color-4"
},
{
"value": "#FFFFFF",
"cssValue": "rgb(255, 255, 255)",
"alpha": 1,
"appliedAs": [
"background"
],
"occurrences": 2,
"sourceId": "color-7"
},
{
"value": "#FFC7F2",
"cssValue": "rgb(255, 199, 242)",
"alpha": 1,
"appliedAs": [
"background"
],
"occurrences": 2,
"sourceId": "color-8"
},
{
"value": "#C5EAB2",
"cssValue": "rgb(197, 234, 178)",
"alpha": 1,
"appliedAs": [
"background"
],
"occurrences": 2,
"sourceId": "color-9"
},
{
"value": "#FFE5F9",
"cssValue": "rgb(255, 229, 249)",
"alpha": 1,
"appliedAs": [
"background"
],
"occurrences": 1,
"sourceId": "color-11"
},
{
"value": "#E1F4D7",
"cssValue": "rgb(225, 244, 215)",
"alpha": 1,
"appliedAs": [
"background"
],
"occurrences": 1,
"sourceId": "color-12"
},
{
"value": "#EBEBFF",
"cssValue": "rgb(235, 235, 255)",
"alpha": 1,
"appliedAs": [
"background"
],
"occurrences": 1,
"sourceId": "color-14"
}
],
"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×1025px; 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: 800, 322, 274px.
- Layout containers: 5; cards/surfaces: 4; media elements: 4; browser animations: 0.
#### Container, grid, and spacing
```json
{
"viewport": {
"width": 1440,
"captureBounds": {
"top": 2940,
"bottom": 3965,
"pageHeight": 9687
}
},
"container": {
"size": "1440×1025px",
"position": "x 0px, y 2940px",
"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": [
800,
322,
274
]
},
"columns": [
{
"element": "section · How we do itNot your average talent partner (promise).Only the best.We only hire the best. Our consu",
"size": "1440×1025px",
"position": "x 0px, y 2940px",
"display": "flex",
"template": "not captured",
"direction": "column",
"gap": "64px"
},
{
"element": "a · Only the best.We only hire the best. Our consultants are driven, focused, and hands-on, which means",
"size": "322×524px",
"position": "x 40px, y 3281px",
"display": "flex",
"template": "not captured",
"direction": "column",
"gap": "24px"
},
{
"element": "a · Made for you.Talent services designed for you, that grow with you. Whether you need sourcing support",
"size": "322×524px",
"position": "x 386px, y 3281px",
"display": "flex",
"template": "not captured",
"direction": "column",
"gap": "24px"
},
{
"element": "a · Real data. Smarter decisions.Our decision-making is always rooted in data, so we can make smarter hi",
"size": "322×524px",
"position": "x 732px, y 3281px",
"display": "flex",
"template": "not captured",
"direction": "column",
"gap": "24px"
},
{
"element": "a · Yep. Ja. We’re Scandi.We understand the Nordic tech scene better than anyone, and we have a deep net",
"size": "322×524px",
"position": "x 1078px, y 3281px",
"display": "flex",
"template": "not captured",
"direction": "column",
"gap": "24px"
}
]
}
```
#### Cards and surfaces
```json
{
"cards": [
{
"element": "a · Only the best.We only hire the best. Our consultants are driven, focused, and hands-on, which means",
"size": "322×524px",
"position": "x 40px, y 3281px",
"padding": [
"24px",
"24px",
"24px",
"24px"
],
"radius": "0px",
"border": "0px none rgb(0, 0, 0)",
"shadow": "rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px",
"background": "rgba(0, 0, 0, 0)"
},
{
"element": "a · Made for you.Talent services designed for you, that grow with you. Whether you need sourcing support",
"size": "322×524px",
"position": "x 386px, y 3281px",
"padding": [
"24px",
"24px",
"24px",
"24px"
],
"radius": "0px",
"border": "0px none rgb(0, 0, 0)",
"shadow": "rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px",
"background": "rgba(0, 0, 0, 0)"
},
{
"element": "a · Real data. Smarter decisions.Our decision-making is always rooted in data, so we can make smarter hi",
"size": "322×524px",
"position": "x 732px, y 3281px",
"padding": [
"24px",
"24px",
"24px",
"24px"
],
"radius": "0px",
"border": "0px none rgb(0, 0, 0)",
"shadow": "rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px",
"background": "rgba(0, 0, 0, 0)"
},
{
"element": "a · Yep. Ja. We’re Scandi.We understand the Nordic tech scene better than anyone, and we have a deep net",
"size": "322×524px",
"position": "x 1078px, y 3281px",
"padding": [
"24px",
"24px",
"24px",
"24px"
],
"radius": "0px",
"border": "0px none rgb(0, 0, 0)",
"shadow": "rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px",
"background": "rgba(0, 0, 0, 0)"
}
],
"surfaces": {
"radii": [
"6px"
],
"borders": [],
"shadows": [
"rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px"
]
}
}
```
#### Media treatment
```json
[
{
"element": "img · framer-45CzB framer-1bczxpf",
"size": "219×219px",
"position": "x 91px, y 3335px",
"aspectRatio": 1,
"objectFit": "fill",
"objectPosition": "50% 50%",
"radius": "0px",
"overflow": "clip",
"source": "data:image/svg+xml,"
},
{
"element": "img · framer-g7hAp framer-1bczxpf",
"size": "219×219px",
"position": "x 437px, y 3335px",
"aspectRatio": 1,
"objectFit": "fill",
"objectPosition": "50% 50%",
"radius": "0px",
"overflow": "clip",
"source": "data:image/svg+xml,"
},
{
"element": "img · framer-X84Ji framer-1bczxpf",
"size": "219×219px",
"position": "x 783px, y 3335px",
"aspectRatio": 1,
"objectFit": "fill",
"objectPosition": "50% 50%",
"radius": "0px",
"overflow": "clip",
"source": "data:image/svg+xml,"
},
{
"element": "img · framer-xDbFc framer-1bczxpf",
"size": "219×219px",
"position": "x 1129px, y 3335px",
"aspectRatio": 1,
"objectFit": "fill",
"objectPosition": "50% 50%",
"radius": "0px",
"overflow": "clip",
"source": "data:image/svg+xml,"
}
]
```
#### 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-472",
"gap": "64px",
"tag": "section",
"rect": {
"x": 0,
"y": 2940,
"width": 1440,
"height": 1025
},
"role": null,
"label": "How we do itNot your average talent partner (promise).Only the best.We only hire the best. Our consu",
"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-483",
"tag": "a",
"rect": {
"x": 40,
"y": 3281,
"width": 322,
"height": 524
},
"role": null,
"label": "Only the best.We only hire the best. Our consultants are driven, focused, and hands-on, which means ",
"border": "0px none rgb(0, 0, 0)",
"radius": "0px",
"shadow": "rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px",
"padding": [
"24px",
"24px",
"24px",
"24px"
],
"background": "rgba(0, 0, 0, 0)"
},
{
"id": "ld-494",
"tag": "a",
"rect": {
"x": 386,
"y": 3281,
"width": 322,
"height": 524
},
"role": null,
"label": "Made for you.Talent services designed for you, that grow with you. Whether you need sourcing support",
"border": "0px none rgb(0, 0, 0)",
"radius": "0px",
"shadow": "rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px",
"padding": [
"24px",
"24px",
"24px",
"24px"
],
"background": "rgba(0, 0, 0, 0)"
},
{
"id": "ld-505",
"tag": "a",
"rect": {
"x": 732,
"y": 3281,
"width": 322,
"height": 524
},
"role": null,
"label": "Real data. Smarter decisions.Our decision-making is always rooted in data, so we can make smarter hi",
"border": "0px none rgb(0, 0, 0)",
"radius": "0px",
"shadow": "rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px",
"padding": [
"24px",
"24px",
"24px",
"24px"
],
"background": "rgba(0, 0, 0, 0)"
},
{
"id": "ld-516",
"tag": "a",
"rect": {
"x": 1078,
"y": 3281,
"width": 322,
"height": 524
},
"role": null,
"label": "Yep. Ja. We’re Scandi.We understand the Nordic tech scene better than anyone, and we have a deep net",
"border": "0px none rgb(0, 0, 0)",
"radius": "0px",
"shadow": "rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px",
"padding": [
"24px",
"24px",
"24px",
"24px"
],
"background": "rgba(0, 0, 0, 0)"
}
],
"media": [
{
"id": "ld-485",
"tag": "img",
"rect": {
"x": 91,
"y": 3335,
"width": 219,
"height": 219
},
"role": null,
"label": "framer-45CzB framer-1bczxpf",
"media": {
"alt": "",
"src": "data:image/svg+xml,",
"naturalWidth": 150,
"naturalHeight": 150
},
"radius": "0px",
"overflow": "clip",
"objectFit": "fill",
"aspectRatio": 1,
"objectPosition": "50% 50%"
},
{
"id": "ld-496",
"tag": "img",
"rect": {
"x": 437,
"y": 3335,
"width": 219,
"height": 219
},
"role": null,
"label": "framer-g7hAp framer-1bczxpf",
"media": {
"alt": "",
"src": "data:image/svg+xml,",
"naturalWidth": 150,
"naturalHeight": 150
},
"radius": "0px",
"overflow": "clip",
"objectFit": "fill",
"aspectRatio": 1,
"objectPosition": "50% 50%"
},
{
"id": "ld-507",
"tag": "img",
"rect": {
"x": 783,
"y": 3335,
"width": 219,
"height": 219
},
"role": null,
"label": "framer-X84Ji framer-1bczxpf",
"media": {
"alt": "",
"src": "data:image/svg+xml,",
"naturalWidth": 150,
"naturalHeight": 150
},
"radius": "0px",
"overflow": "clip",
"objectFit": "fill",
"aspectRatio": 1,
"objectPosition": "50% 50%"
},
{
"id": "ld-518",
"tag": "img",
"rect": {
"x": 1129,
"y": 3335,
"width": 219,
"height": 219
},
"role": null,
"label": "framer-xDbFc framer-1bczxpf",
"media": {
"alt": "",
"src": "data:image/svg+xml,",
"naturalWidth": 150,
"naturalHeight": 150
},
"radius": "0px",
"overflow": "clip",
"objectFit": "fill",
"aspectRatio": 1,
"objectPosition": "50% 50%"
}
],
"bounds": {
"top": 2940,
"bottom": 3965,
"pageHeight": 9687
},
"schema": "little-details-section-measurements-v1",
"source": "saved DOM/CSS element and animation maps",
"columns": [
{
"id": "ld-472",
"gap": "64px",
"tag": "section",
"rect": {
"x": 0,
"y": 2940,
"width": 1440,
"height": 1025
},
"role": null,
"label": "How we do itNot your average talent partner (promise).Only the best.We only hire the best. Our consu",
"columns": null,
"display": "flex",
"direction": "column"
},
{
"id": "ld-483",
"gap": "24px",
"tag": "a",
"rect": {
"x": 40,
"y": 3281,
"width": 322,
"height": 524
},
"role": null,
"label": "Only the best.We only hire the best. Our consultants are driven, focused, and hands-on, which means ",
"columns": null,
"display": "flex",
"direction": "column"
},
{
"id": "ld-494",
"gap": "24px",
"tag": "a",
"rect": {
"x": 386,
"y": 3281,
"width": 322,
"height": 524
},
"role": null,
"label": "Made for you.Talent services designed for you, that grow with you. Whether you need sourcing support",
"columns": null,
"display": "flex",
"direction": "column"
},
{
"id": "ld-505",
"gap": "24px",
"tag": "a",
"rect": {
"x": 732,
"y": 3281,
"width": 322,
"height": 524
},
"role": null,
"label": "Real data. Smarter decisions.Our decision-making is always rooted in data, so we can make smarter hi",
"columns": null,
"display": "flex",
"direction": "column"
},
{
"id": "ld-516",
"gap": "24px",
"tag": "a",
"rect": {
"x": 1078,
"y": 3281,
"width": 322,
"height": 524
},
"role": null,
"label": "Yep. Ja. We’re Scandi.We understand the Nordic tech scene better than anyone, and we have a deep net",
"columns": null,
"display": "flex",
"direction": "column"
}
],
"spacing": {
"gapsPx": [
8,
24,
64
],
"representativeContentWidthsPx": [
800,
322,
274
]
},
"coverage": {
"cards": 4,
"media": 4,
"animations": 0,
"elementsInSection": 20
},
"surfaces": {
"radii": [
"6px"
],
"borders": [],
"shadows": [
"rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px"
]
},
"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: medium
- What transfers: Four-column card grid structure with consistent padding/gap rhythm; Eyebrow + centered headline + card row composition pattern; Pastel color-block card treatment with one neutral variant for visual break; Card shadow/radius styling for soft-surface feel
- Dependencies: Custom bespoke SVG line-art illustrations per card (hard to replicate without equivalent asset production); Specific pastel palette tokens (#C7C7FF, pink, green) tied to brand identity; Display serif font (Lastik) for headline character
- Guidance: Reuse the grid rhythm, padding, and card shadow/radius tokens directly; swap palette and illustrations to match new brand assets, but budget for custom illustration work to preserve the cohesive spot-illustration feel rather than substituting generic icons.
### 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 “Four-Column Value Cards”.
Purpose: A row of four vertically-oriented cards, each with a distinct pastel background and line-art illustration.
Structure: centered single-column. Source layout label: Four-column grid of vertical cards below a centered headline.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.
Visual signature to preserve at the pattern level: Pastel-colored vertical cards with cohesive, playful spot illustrations.
Components: Section Eyebrow, Headline, Value Cards, Illustrations.
Style direction: colourful, illustrative, playful.
Observed crop: 1440×1025px (1.405: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-1","size":"24px","count":18,"family":"Switzer","traits":"Regular","weight":"600","contexts":[{"tag":"h5","top":1040,"text":"Trusted by the best.","property":"font"},{"tag":"h5","top":3603,"text":"Only the best.","property":"font"},{"tag":"h5","top":3603,"text":"Made for you.","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"27.6px","letterSpacing":"-0.7px"} {"id":"font-3","size":"48px","count":2,"family":"Lastik Regular","traits":"Regular","weight":"400","contexts":[{"tag":"h3","top":3164,"text":"Not your average talent partner (promise).","property":"font"},{"tag":"h3","top":5068,"text":"What our clients have to say.","property":"font"}],"fontStack":"\"Lastik Regular\", sans-serif","lineHeight":"52.8px","letterSpacing":"-1.9px"} {"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"}
Colors measured inside this section: {"id":"color-4","hex":"#C7C7FF","alpha":1,"count":23,"contexts":[{"tag":"div","top":3281,"text":"","property":"background"},{"tag":"path","top":2210,"text":"","property":"svg-fill"}],"cssValue":"rgb(199, 199, 255)"} {"id":"color-7","hex":"#FFFFFF","alpha":1,"count":2,"contexts":[{"tag":"nav","top":24,"text":"ServicesClient StoriesResourcesAboutBook a call","property":"background"},{"tag":"div","top":3281,"text":"","property":"background"}],"cssValue":"rgb(255, 255, 255)"} {"id":"color-8","hex":"#FFC7F2","alpha":1,"count":2,"contexts":[{"tag":"div","top":3305,"text":"","property":"background"}],"cssValue":"rgb(255, 199, 242)"} {"id":"color-9","hex":"#C5EAB2","alpha":1,"count":2,"contexts":[{"tag":"div","top":3305,"text":"","property":"background"}],"cssValue":"rgb(197, 234, 178)"} {"id":"color-11","hex":"#FFE5F9","alpha":1,"count":1,"contexts":[{"tag":"div","top":3281,"text":"","property":"background"}],"cssValue":"rgb(255, 229, 249)"} {"id":"color-12","hex":"#E1F4D7","alpha":1,"count":1,"contexts":[{"tag":"div","top":3281,"text":"","property":"background"}],"cssValue":"rgb(225, 244, 215)"} {"id":"color-14","hex":"#EBEBFF","alpha":1,"count":1,"contexts":[{"tag":"div","top":3305,"text":"","property":"background"}],"cssValue":"rgb(235, 235, 255)"}
Exact section measurements from the saved element map: root {"rect":{"x":0,"y":2940,"width":1440,"height":1025},"padding":{"top":"160px","left":"40px","right":"40px","bottom":"160px"},"gap":"64px","columns":null,"overflow":"hidden"}; spacing {"gapsPx":[8,24,64],"representativeContentWidthsPx":[800,322,274]}; surfaces {"radii":["6px"],"borders":[],"shadows":["rgba(0, 0, 0, 0.21) 0px 0.48175px 0.48175px -1.5px, rgba(0, 0, 0, 0.18) 0px 1.83083px 1.83083px -3px, rgba(0, 0, 0, 0.02) 0px 8px 8px -4.5px"]}; media [{"tag":"img","rect":{"x":91,"y":3335,"width":219,"height":219},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":437,"y":3335,"width":219,"height":219},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":783,"y":3335,"width":219,"height":219},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1129,"y":3335,"width":219,"height":219},"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: Four-column card grid structure with consistent padding/gap rhythm; Eyebrow + centered headline + card row composition pattern; Pastel color-block card treatment with one neutral variant for visual break; Card shadow/radius styling for soft-surface feel.
Dependencies: Custom bespoke SVG line-art illustrations per card (hard to replicate without equivalent asset production); Specific pastel palette tokens (#C7C7FF, pink, green) tied to brand identity; Display serif font (Lastik) for headline character.
Adaptation guidance: Reuse the grid rhythm, padding, and card shadow/radius tokens directly; swap palette and illustrations to match new brand assets, but budget for custom illustration work to preserve the cohesive spot-illustration feel rather than substituting generic icons.
Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.