# Split Contact Form Panel

Schema: Design Details SECTION.md v3.2
Website: Amby
Source: https://www.amby.com/
Source section IDs: ba6c375a-dd6d-445c-b644-ca250ed0f1bd
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- One lilac panel holds the whole form and illustration, so a transactional task reads as a single friendly object against the warm cream page.
- White inputs sit on the lilac surface with clear labels, and a two-column field grid keeps a long form compact and easy to scan.
- A large serif headline over clean sans labels sets a clear hierarchy, and the hand-drawn card illustration on the right adds warmth without crowding the fields.

What a screenshot can't show:
- The recording showed no motion, so hover, focus and submit behaviour are unknown.
- Measured spacing shows 40px padding and a 40px gap, with content blocks about 626, 560 and 400px wide; no font sizes were captured.

Borrow: Wrap a form and a spot illustration in one tinted, padded container so the task feels like a single inviting object.
Leave alone: Don't copy the lilac and lime palette, the Lastik serif headline or the 'hello' card drawing; use your own brand colours, a free display serif and your own illustration.

## Classification

- Type: forms
- Layout: Contained split-panel layout within a wider section.
- Styles: colourful, illustrative, soft
- Confidence: 100%

## Purpose and structure

A large lilac-colored panel containing a multi-field contact form on the left and a hand-drawn illustration on the right.

Visual signature: A soft lilac container box contrasting with white form inputs and a playful spot illustration.

## Components

- Headline
- Form Fields
- Dropdowns
- Submit Button
- Illustration

## 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: 60.18/100 (Good)
Scored coverage: 85%

- Typography: 62 — Large Lastik serif display headline ('Ready? Let's do it.') contrasts nicely with clean sans-serif body/labels, consistent with site system; clear hierarchy between heading, subcopy, and form labels. Next tier: Type treatment is consistent with brand but does not do anything distinctive beyond the established hero/heading pairing seen elsewhere on the site.
- Composition: 64 — Clean split layout: form fields in a two-column grid on the left, illustration anchored right, all contained within a single lilac panel that reads as one unified object against the page canvas. Next tier: The split is a standard form-plus-illustration pattern with even whitespace; no unexpected scale shifts, overlaps, or asymmetry that would push composition into memorable territory.
- Motion: not_assessed — No motion moments or animation data were supplied for this crop. Next tier: Timestamped visible motion evidence is required to score this axis.
- Content: 60 — Form fields, labels, dropdowns, and CTA are logically grouped and paired with a friendly illustration that softens an otherwise transactional form; copy is short and purposeful. Next tier: Content integration is functional but conventional; the illustration decorates rather than reinforcing information architecture or guiding form completion in a novel way.
- Originality: 55 — Hand-drawn 'hello' card illustration adds personality, but the pastel-panel-plus-form format is a widely used contact-section pattern. Next tier: Needs a structural or interactive idea unique to this section (e.g., illustration reacting to field focus, dynamic card content) rather than a static decorative graphic to be considered more original.
- Adaptability: 58 — Flex column layout, defined padding/gap tokens, and clearly separable form vs. illustration elements make the structure straightforward to retheme or resize. Next tier: Lack of responsive breakpoint data and card/surface token detail limits confidence in how cleanly the split adapts at narrower viewports.

Strengths:
- Clear two-column form with visible required-field markers and sensible grouping
- Friendly, on-brand illustration balances the utilitarian form
- Strong color contrast between lilac panel, white inputs, and dark CTA button creates clean visual hierarchy

Weaknesses:
- Illustration is purely decorative with no functional tie to form state or completion
- Pattern (colored panel + form + spot illustration) is a common contact-section template
- No motion evidence provided to assess interactivity or transitions on field focus/submit

Why it does not reach the next tier: The section executes a familiar contact-form layout cleanly and with pleasant typography/illustration, but lacks a distinguishing structural or interactive idea, and no motion detail is available to credit dynamic behavior, keeping it at a solid but unremarkable level.

## Adaptation guidance

- Effort: Low
- Guidance: Swap the illustration and accent color while keeping the two-column form grid, label/placeholder pattern, and pill button; headline typography can be replaced with any display serif/sans pairing that maintains size contrast against body copy.

What transfers:
- Split layout structure (form left, illustration right) within a single colored panel
- Two-column field grid pattern with labeled inputs and dropdowns
- Pill-shaped dark CTA button paired against pastel panel background

Dependencies:
- Hand-drawn illustration asset specific to brand voice
- Lastik display typeface for headline impact
- Lilac accent color consistent with site's broader pastel palette

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No animation or interaction timestamps were provided, so motion could not be scored
- Responsive/mobile behavior is not evidenced, limiting adaptability confidence
- Exact illustration vector details and hover/focus states on form fields are not specified

## 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: forms
- Source type: forms
- Structure: two-column
- Layout: Contained split-panel layout within a wider section.
- Styles: colourful, illustrative, soft
- Components: Headline, Form Fields, Dropdowns, Submit Button, Illustration
- Purpose: A large lilac-colored panel containing a multi-field contact form on the left and a hand-drawn illustration on the right.
- Visual signature: A soft lilac container box contrasting with white form inputs and a playful spot illustration.
- Place on the page: 9 of 10, after Editorial (`amby-com:C08`), before Footer (`amby-com:C10`)

### Crop and composition

- Crop: 1440×747px; aspect ratio 1.928:1
- Page bounds: 7708–8455px 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": [],
  "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×747px; flex; padding {"top":"40px","left":"40px","right":"40px","bottom":"40px"}; gap 40px; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 40px.
- Representative content widths: 626, 560, 400px.
- Layout containers: 1; cards/surfaces: 0; media elements: 1; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 7708,
      "bottom": 8455,
      "pageHeight": 9687
    }
  },
  "container": {
    "size": "1440×747px",
    "position": "x 0px, y 7708px",
    "display": "flex",
    "positionMode": "relative",
    "padding": {
      "top": "40px",
      "left": "40px",
      "right": "40px",
      "bottom": "40px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "40px",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "hidden"
  },
  "spacing": {
    "observedGapsPx": [
      40
    ],
    "representativeContentWidthsPx": [
      626,
      560,
      400
    ]
  },
  "columns": [
    {
      "element": "section · Ready? Let’s do it.Get in touch to learn more about how we can help solve your talent needs.",
      "size": "1440×747px",
      "position": "x 0px, y 7708px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "40px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "400×400px",
    "position": "x 890px, y 7983px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": {
    "id": "ld-747",
    "gap": "40px",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 7708,
      "width": 1440,
      "height": 747
    },
    "role": null,
    "label": "Ready? Let’s do it.Get in touch to learn more about how we can help solve your talent needs.",
    "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": "40px",
      "left": "40px",
      "right": "40px",
      "bottom": "40px"
    },
    "overflow": "hidden",
    "position": "relative",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-765",
      "tag": "svg",
      "rect": {
        "x": 890,
        "y": 7983,
        "width": 400,
        "height": 400
      },
      "role": "presentation",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 7708,
    "bottom": 8455,
    "pageHeight": 9687
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-747",
      "gap": "40px",
      "tag": "section",
      "rect": {
        "x": 0,
        "y": 7708,
        "width": 1440,
        "height": 747
      },
      "role": null,
      "label": "Ready? Let’s do it.Get in touch to learn more about how we can help solve your talent needs.",
      "columns": null,
      "display": "flex",
      "direction": "column"
    }
  ],
  "spacing": {
    "gapsPx": [
      40
    ],
    "representativeContentWidthsPx": [
      626,
      560,
      400
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 1,
    "animations": 0,
    "elementsInSection": 4
  },
  "surfaces": {
    "radii": [],
    "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: Split layout structure (form left, illustration right) within a single colored panel; Two-column field grid pattern with labeled inputs and dropdowns; Pill-shaped dark CTA button paired against pastel panel background
- Dependencies: Hand-drawn illustration asset specific to brand voice; Lastik display typeface for headline impact; Lilac accent color consistent with site's broader pastel palette
- Guidance: Swap the illustration and accent color while keeping the two-column form grid, label/placeholder pattern, and pill button; headline typography can be replaced with any display serif/sans pairing that maintains size contrast against body copy.

### Evidence readiness

- Coverage: 6/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; timestamped authored motion.

### Agent implementation prompt

Create an original forms section inspired by the design evidence titled “Split Contact Form Panel”.

Purpose: A large lilac-colored panel containing a multi-field contact form on the left and a hand-drawn illustration on the right.

Structure: two-column. Source layout label: Contained split-panel layout within a wider section.. 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: A soft lilac container box contrasting with white form inputs and a playful spot illustration.

Components: Headline, Form Fields, Dropdowns, Submit Button, Illustration.

Style direction: colourful, illustrative, soft.

Observed crop: 1440×747px (1.928: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}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":7708,"width":1440,"height":747},"padding":{"top":"40px","left":"40px","right":"40px","bottom":"40px"},"gap":"40px","columns":null,"overflow":"hidden"}; spacing {"gapsPx":[40],"representativeContentWidthsPx":[626,560,400]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":890,"y":7983,"width":400,"height":400},"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: Split layout structure (form left, illustration right) within a single colored panel; Two-column field grid pattern with labeled inputs and dropdowns; Pill-shaped dark CTA button paired against pastel panel background.

Dependencies: Hand-drawn illustration asset specific to brand voice; Lastik display typeface for headline impact; Lilac accent color consistent with site's broader pastel palette.

Adaptation guidance: Swap the illustration and accent color while keeping the two-column form grid, label/placeholder pattern, and pill button; headline typography can be replaced with any display serif/sans pairing that maintains size contrast against body copy.

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