# Two-Column Service Cards
Schema: Design Details SECTION.md v3.2
Website: Amby
Source: https://www.amby.com/
Source section IDs: deeb60ac-fc4a-4e2c-9acc-830f7c4c3719
Status: AI analysed; vocabulary promotion is automated
## Builder's note
What makes it work:
- Two equal white cards sit under a centered headline, and each one repeats the same order of illustration, title, body and button, so the choice between services is easy to scan.
- Generous space (160px top and bottom, 64px between blocks) lets the line-art spot illustrations breathe against the warm cream canvas and keeps the page calm.
- Copy is short and benefit-led, with a small bold eyebrow label above a 30px bold headline, which sets a clear three-step hierarchy.
What a screenshot can't show:
- The recording showed no motion, so hover and scroll behavior is unknown.
- Measured type uses tight tracking on large text (-1.2px at 30px, -0.4px at 20px), while the 14px eyebrow is opened up to +0.6px.
Borrow: Give each parallel offering its own simple, meaningful spot illustration inside an identical card structure, so the content differs while the layout stays consistent.
Leave alone: Don't copy the cream, lavender and lime palette, the Switzer and Lastik type pairing, or the key and orbiting-planet illustrations; use your own concept art and a free grotesque like Inter or a free serif instead.
## Classification
- Type: feature-card
- Layout: Two-column grid of large cards below a centered headline.
- Styles: minimal, illustrative
- Confidence: 100%
## Purpose and structure
Two large service cards featuring line-art illustrations, headings, and descriptions.
Visual signature: Spacious white cards with playful, colorful line-art spot illustrations.
## Components
- Headline
- Subtitle
- Service Cards
- Illustrations
- Outline Buttons
## 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: 58.41/100 (Competent)
Scored coverage: 85%
- Typography: 62 — Clear serif display heading (Lastik) paired with sans body/card titles creates reasonable contrast and hierarchy; sizes and spacing are generous and legible, but the pairing and treatment (centered intro, bold card titles) is a common pattern without distinctive typographic craft. Next tier: No unusual scale jumps, custom ligatures, or type-driven moments beyond a standard serif/sans pairing.
- Composition: 58 — Simple, balanced two-column card grid with centered intro copy; generous whitespace and consistent alignment of illustration, title, body, and button within each card, but the layout is a very conventional symmetrical two-card pattern with no unexpected spatial tension or asymmetry. Next tier: Needs a more distinctive grid relationship or asymmetry between the two cards to move past a standard centered two-column template.
- Motion: not_assessed — No motion_moments or animation data were supplied for this section; deterministic evidence confirms zero animations captured. Next tier: Timestamped visible motion evidence is required before motion can be scored.
- Content: 60 — Illustrations are tightly matched to each service's conceptual meaning (key for recruitment/finding fit, orbiting planet for flexible HR systems), and copy is concise and benefit-led, integrating well with the card structure. Next tier: Content integration is clean but formulaic (icon + title + paragraph + button); no interplay between text and image beyond simple pairing.
- Originality: 56 — The custom line-art spot illustrations with a playful accent color (orange key, lavender planet) give some personality, but the overall card format, copy structure, and button style are widely used patterns in SaaS/service marketing sites. Next tier: Would need a structural or interaction idea unique to this section, not just custom illustration style, to read as memorable rather than familiar.
- Adaptability: 55 — Structure (headline, subtitle, two cards each with icon/title/body/button) is clearly modular and tokens (radius, spacing, colors) are defined, making it straightforward to reskin, though the illustrations are bespoke assets tightly coupled to the brand's concept. Next tier: Bespoke SVG illustrations are a hard dependency that limits true skin/content separation without new artwork.
Strengths:
- Custom line-art illustrations metaphorically tied to each service's meaning
- Clean legible hierarchy from eyebrow label to display headline to card content
- Generous whitespace and consistent card padding create a calm, readable section
Weaknesses:
- Highly conventional two-card grid pattern seen across many marketing sites
- No motion evidence provided to assess any dynamic behavior
- Illustration-title-body-button structure is formulaic with little content/layout interplay
- Originality rests almost entirely on illustration style rather than structural idea
Why it does not reach the next tier: The section is well-executed and pleasant but relies on a generic two-column feature-card template; nothing in the layout, typography pairing, or interaction model is distinctive enough to feel hard to substitute, and no motion evidence exists to credit any dynamic sophistication.
## Adaptation guidance
- Effort: Low
- Guidance: Swap illustrations and copy while keeping the card anatomy, spacing tokens, and heading/body type roles; the grid and card structure are simple enough to drop into most feature-section templates with minimal rework.
What transfers:
- Two-column card grid structure with centered intro
- Icon + title + body + outline button card anatomy
- Spacing rhythm and card padding tokens
Dependencies:
- Custom bespoke line-art SVG illustrations
- Specific serif/sans font pairing (Lastik + Switzer)
- Palette tokens (canvas, pastel accent, dark text)
## 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 any animation quality is unassessed
- Exact font rendering, illustration production quality, and color accuracy limited to computed tokens, not pixel inspection
- Single desktop viewport evidence only; responsive behavior unknown
## 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: two-column
- Layout: Two-column grid of large cards below a centered headline.
- Styles: minimal, illustrative
- Components: Headline, Subtitle, Service Cards, Illustrations, Outline Buttons
- Purpose: Two large service cards featuring line-art illustrations, headings, and descriptions.
- Visual signature: Spacious white cards with playful, colorful line-art spot illustrations.
- Place on the page: 4 of 10, after Logo strip (`amby-com:C03`), before Feature collection (`amby-com:C05`)
### Crop and composition
- Crop: 1440×1547px; aspect ratio 0.931:1
- Page bounds: 1393–2940px of 9687px
- Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.
### Exact typography evidence
The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.
```json
{
"sectionScale": [
{
"role": "card/subheading",
"family": "Switzer",
"stack": "Switzer, \"Switzer Placeholder\", sans-serif",
"size": "30px",
"weight": "700",
"lineHeight": "34.5px",
"letterSpacing": "-1.2px",
"sample": "Find the right fit.",
"element": "h4",
"occurrences": 2,
"sourceId": "font-4"
},
{
"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": "16px",
"weight": "600",
"lineHeight": "16px",
"letterSpacing": "-0.3px",
"sample": "Learn more",
"element": "p",
"occurrences": 5,
"sourceId": "font-9"
}
],
"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": "#FC7D45",
"cssValue": "rgb(252, 125, 69)",
"alpha": 1,
"appliedAs": [
"svg-stroke",
"svg-fill"
],
"occurrences": 3,
"sourceId": "color-10"
},
{
"value": "#F0FF80",
"cssValue": "rgb(240, 255, 128)",
"alpha": 1,
"appliedAs": [
"background",
"svg-fill"
],
"occurrences": 11,
"sourceId": "color-13"
},
{
"value": "#DCD5CB",
"cssValue": "rgb(220, 213, 203)",
"alpha": 1,
"appliedAs": [
"background"
],
"occurrences": 3,
"sourceId": "color-15"
}
],
"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×1547px; flex; padding {"top":"160px","left":"40px","right":"40px","bottom":"160px"}; gap 64px; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 8, 64px.
- Representative content widths: 800, 640, 540, 400, 256px.
- Layout containers: 1; cards/surfaces: 0; media elements: 3; browser animations: 0.
#### Container, grid, and spacing
```json
{
"viewport": {
"width": 1440,
"captureBounds": {
"top": 1393,
"bottom": 2940,
"pageHeight": 9687
}
},
"container": {
"size": "1440×1547px",
"position": "x 0px, y 1393px",
"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,
64
],
"representativeContentWidthsPx": [
800,
640,
540,
400,
256
]
},
"columns": [
{
"element": "section · Our ServicesWe help you find and keep the best talent. Really.We offer tailored recruitment and HR s",
"size": "1440×1547px",
"position": "x 0px, y 1393px",
"display": "flex",
"template": "not captured",
"direction": "column",
"gap": "64px"
}
]
}
```
#### Cards and surfaces
```json
{
"cards": [],
"surfaces": {
"radii": [
"6px",
"40px"
],
"borders": [],
"shadows": []
}
}
```
#### Media treatment
```json
[
{
"element": "img · framer-ScETH framer-1fef5ul",
"size": "400×400px",
"position": "x 174px, y 2072px",
"aspectRatio": 1,
"objectFit": "fill",
"objectPosition": "50% 50%",
"radius": "0px",
"overflow": "clip",
"source": "data:image/svg+xml,"
},
{
"element": "img · framer-IlLRT framer-1m010zj",
"size": "400×400px",
"position": "x 866px, y 2072px",
"aspectRatio": 1,
"objectFit": "fill",
"objectPosition": "50% 50%",
"radius": "0px",
"overflow": "clip",
"source": "data:image/svg+xml,"
},
{
"element": "svg · svg",
"size": "256×166px",
"position": "x 0px, y 1343px",
"aspectRatio": 1.5,
"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-419",
"gap": "64px",
"tag": "section",
"rect": {
"x": 0,
"y": 1393,
"width": 1440,
"height": 1547
},
"role": null,
"label": "Our ServicesWe help you find and keep the best talent. Really.We offer tailored recruitment and HR s",
"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": [],
"media": [
{
"id": "ld-436",
"tag": "img",
"rect": {
"x": 174,
"y": 2072,
"width": 400,
"height": 400
},
"role": null,
"label": "framer-ScETH framer-1fef5ul",
"media": {
"alt": "",
"src": "data:image/svg+xml,",
"naturalWidth": 150,
"naturalHeight": 150
},
"radius": "0px",
"overflow": "clip",
"objectFit": "fill",
"aspectRatio": 1,
"objectPosition": "50% 50%"
},
{
"id": "ld-457",
"tag": "img",
"rect": {
"x": 866,
"y": 2072,
"width": 400,
"height": 400
},
"role": null,
"label": "framer-IlLRT framer-1m010zj",
"media": {
"alt": "",
"src": "data:image/svg+xml,",
"naturalWidth": 150,
"naturalHeight": 150
},
"radius": "0px",
"overflow": "clip",
"objectFit": "fill",
"aspectRatio": 1,
"objectPosition": "50% 50%"
},
{
"id": "ld-976",
"tag": "svg",
"rect": {
"x": 0,
"y": 1343,
"width": 256,
"height": 166
},
"role": null,
"label": "svg",
"media": null,
"radius": "0px",
"overflow": "hidden",
"objectFit": "fill",
"aspectRatio": 1.5,
"objectPosition": "50% 50%"
}
],
"bounds": {
"top": 1393,
"bottom": 2940,
"pageHeight": 9687
},
"schema": "little-details-section-measurements-v1",
"source": "saved DOM/CSS element and animation maps",
"columns": [
{
"id": "ld-419",
"gap": "64px",
"tag": "section",
"rect": {
"x": 0,
"y": 1393,
"width": 1440,
"height": 1547
},
"role": null,
"label": "Our ServicesWe help you find and keep the best talent. Really.We offer tailored recruitment and HR s",
"columns": null,
"display": "flex",
"direction": "column"
}
],
"spacing": {
"gapsPx": [
8,
64
],
"representativeContentWidthsPx": [
800,
640,
540,
400,
256
]
},
"coverage": {
"cards": 0,
"media": 3,
"animations": 0,
"elementsInSection": 22
},
"surfaces": {
"radii": [
"6px",
"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: Two-column card grid structure with centered intro; Icon + title + body + outline button card anatomy; Spacing rhythm and card padding tokens
- Dependencies: Custom bespoke line-art SVG illustrations; Specific serif/sans font pairing (Lastik + Switzer); Palette tokens (canvas, pastel accent, dark text)
- Guidance: Swap illustrations and copy while keeping the card anatomy, spacing tokens, and heading/body type roles; the grid and card structure are simple enough to drop into most feature-section templates with minimal rework.
### 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 “Two-Column Service Cards”.
Purpose: Two large service cards featuring line-art illustrations, headings, and descriptions.
Structure: two-column. Source layout label: Two-column grid of large cards below a centered headline.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.
Visual signature to preserve at the pattern level: Spacious white cards with playful, colorful line-art spot illustrations.
Components: Headline, Subtitle, Service Cards, Illustrations, Outline Buttons.
Style direction: minimal, illustrative.
Observed crop: 1440×1547px (0.931: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-4","size":"30px","count":2,"family":"Switzer","traits":"Regular","weight":"700","contexts":[{"tag":"h4","top":2536,"text":"Find the right fit.","property":"font"},{"tag":"h4","top":2536,"text":"Keep HR flexible.","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"34.5px","letterSpacing":"-1.2px"} {"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-9","size":"16px","count":5,"family":"Switzer","traits":"Regular","weight":"600","contexts":[{"tag":"p","top":2688,"text":"Learn more","property":"font"},{"tag":"p","top":2688,"text":"Learn more","property":"font"},{"tag":"p","top":5925,"text":"Learn more","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"16px","letterSpacing":"-0.3px"}
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-10","hex":"#FC7D45","alpha":1,"count":3,"contexts":[{"tag":"path","top":1358,"text":"","property":"svg-stroke"},{"tag":"path","top":1727,"text":"","property":"svg-fill"}],"cssValue":"rgb(252, 125, 69)"} {"id":"color-13","hex":"#F0FF80","alpha":1,"count":11,"contexts":[{"tag":"div","top":44,"text":"","property":"background"},{"tag":"path","top":1886,"text":"","property":"svg-fill"}],"cssValue":"rgb(240, 255, 128)"} {"id":"color-15","hex":"#DCD5CB","alpha":1,"count":3,"contexts":[{"tag":"div","top":1553,"text":"Our Services","property":"background"}],"cssValue":"rgb(220, 213, 203)"}
Exact section measurements from the saved element map: root {"rect":{"x":0,"y":1393,"width":1440,"height":1547},"padding":{"top":"160px","left":"40px","right":"40px","bottom":"160px"},"gap":"64px","columns":null,"overflow":"hidden"}; spacing {"gapsPx":[8,64],"representativeContentWidthsPx":[800,640,540,400,256]}; surfaces {"radii":["6px","40px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":174,"y":2072,"width":400,"height":400},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":866,"y":2072,"width":400,"height":400},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":0,"y":1343,"width":256,"height":166},"aspectRatio":1.5,"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: Two-column card grid structure with centered intro; Icon + title + body + outline button card anatomy; Spacing rhythm and card padding tokens.
Dependencies: Custom bespoke line-art SVG illustrations; Specific serif/sans font pairing (Lastik + Switzer); Palette tokens (canvas, pastel accent, dark text).
Adaptation guidance: Swap illustrations and copy while keeping the card anatomy, spacing tokens, and heading/body type roles; the grid and card structure are simple enough to drop into most feature-section templates with minimal rework.
Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.