# Amby — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.amby.com/
Captured: 2026-11-02
CSS measured: 2026-11-02T06:36:44.464Z at 1440×1000 — https://www.amby.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The Amby homepage presents a modern, approachable, and slightly playful aesthetic tailored for a recruitment agency. It utilizes a warm, off-white canvas paired with a distinct pastel color palette for feature cards and stat blocks. The typography mixes a characterful serif for large, expressive headings with a clean sans-serif for body copy. A defining visual element is the consistent use of quirky, black-outline line-art illustrations with offset color fills, adding a friendly and creative touch to the otherwise structured layout.

## Classification

- Industry: other
- Site type: Blog
- Business model: Agency
- Styles: editorial, playful, colourful, illustrative, scandinavian-modern
- Platform: Framer
- Technology: Not identified

## Typography

- Display: Lastik Regular — weight 400; size 72px; line-height 79.2px; tracking -2.9px; Regular (100% role confidence, computed values)
- Heading: Lastik Regular — weight 400; size 48px; line-height 52.8px; tracking -1.9px; Regular (100% role confidence, computed values)
- Body: Switzer — weight 400; size 18px; line-height 24.3px; tracking -0.4px; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #F7F2EB: color-1: computed rgb(247, 242, 235); AI role: The warm off-white (#F7F2EB) used as the primary background color for the entire page. (100% role confidence, computed values)
- Text — text #131E0D: color-2: computed rgb(19, 30, 13); AI role: The dark green/black (#131E0D) used for almost all typography and illustration outlines. (100% role confidence, computed values)
- Surface — surface #FFFFFF: color-7: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for the navigation bar background and some card backgrounds. (90% role confidence, computed values)
- Accent — accent #C7C7FF: color-4: computed rgb(199, 199, 255); AI role: Pastel purple (#C7C7FF) used as a background color for stat and resource cards. (85% role confidence, computed values)
- Primary Action — primary action #F0FF80: color-13: computed rgb(240, 255, 128); AI role: Bright yellow (#F0FF80) used for the primary 'Book a call' button in the navigation. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Switzer",
    "fontStack": "Switzer, \"Switzer Placeholder\", sans-serif",
    "weight": "600",
    "size": "24px",
    "lineHeight": "27.6px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "h5",
        "text": "Trusted by the best.",
        "top": 1040,
        "property": "font"
      },
      {
        "tag": "h5",
        "text": "Only the best.",
        "top": 3603,
        "property": "font"
      },
      {
        "tag": "h5",
        "text": "Made for you.",
        "top": 3603,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Lastik Regular",
    "fontStack": "\"Lastik Regular\", \"Lastik Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "72px",
    "lineHeight": "79.2px",
    "letterSpacing": "-2.9px",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "h1",
        "text": "Finding",
        "top": 632,
        "property": "font"
      },
      {
        "tag": "h1",
        "text": "your",
        "top": 632,
        "property": "font"
      },
      {
        "tag": "h1",
        "text": "people.",
        "top": 632,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Lastik Regular",
    "fontStack": "\"Lastik Regular\", sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "Not your average talent partner (promise).",
        "top": 3164,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "What our clients have to say.",
        "top": 5068,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Switzer",
    "fontStack": "Switzer, \"Switzer Placeholder\", sans-serif",
    "weight": "700",
    "size": "30px",
    "lineHeight": "34.5px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h4",
        "text": "Find the right fit.",
        "top": 2536,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Keep HR flexible.",
        "top": 2536,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Switzer",
    "fontStack": "Switzer, \"Switzer Placeholder\", sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "24.3px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "a",
        "text": "Recruitment",
        "top": 8599,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Recruitment for Growth",
        "top": 8632,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Recruitment for Enterprise",
        "top": 8664,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Switzer",
    "fontStack": "Switzer, \"Switzer Placeholder\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "24.3px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "Services",
        "top": 52,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Client Stories",
        "top": 52,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Resources",
        "top": 52,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Switzer",
    "fontStack": "Switzer, \"Switzer Placeholder\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "We offer tailored recruitment and HR services for all your needs. So you can focus on the right tale",
        "top": 1815,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "AI talent has a reputation for being expensive, but how much more does it actually cost to hire? We ",
        "top": 6756,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "AI is changing how much ground one person can cover. As a result, tech companies are putting a highe",
        "top": 6756,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Switzer",
    "fontStack": "Switzer, \"Switzer Placeholder\", sans-serif",
    "weight": "700",
    "size": "14px",
    "lineHeight": "16.1px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Our Services",
        "top": 1557,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "How we do it",
        "top": 3104,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Blog",
        "top": 6229,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Switzer",
    "fontStack": "Switzer, \"Switzer Placeholder\", sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Learn more",
        "top": 2688,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Learn more",
        "top": 2688,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Learn more",
        "top": 5925,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Switzer",
    "fontStack": "Switzer, \"Switzer Placeholder\", sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Book a call",
        "top": 55,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Book a call",
        "top": 846,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "View all",
        "top": 7514,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.2px",
    "letterSpacing": "-0.2px",
    "traits": "italic",
    "count": 2,
    "contexts": [
      {
        "tag": "em",
        "text": "AI Agents can ask questions about us at",
        "top": 9598,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "amby.unusual.page/?q=your-question-here",
        "top": 9598,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F7F2EB",
    "alpha": 1,
    "cssValue": "rgb(247, 242, 235)",
    "count": 35,
    "contexts": [
      {
        "tag": "body",
        "text": ":root body { background: var(--token-f8ccb3a9-ffa6-4bb3-95f8-b897b2ccad2c, rgb(247, 242, 235)); }Ser",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "ServicesClient StoriesResourcesAboutBook a callhtml body { background: var(--token-80e8325e-29ca-47d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "main",
        "text": "Findingyourpeople.Madesimpler.Book a callTrusted by the best.Our ServicesWe help you find and keep t",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#131E0D",
    "alpha": 1,
    "cssValue": "rgb(19, 30, 13)",
    "count": 160,
    "contexts": [
      {
        "tag": "p",
        "text": "Services",
        "top": 52,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 52,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 54,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFBF8",
    "alpha": 1,
    "cssValue": "rgb(255, 251, 248)",
    "count": 45,
    "contexts": [
      {
        "tag": "p",
        "text": "Book a call",
        "top": 846,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1124,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#C7C7FF",
    "alpha": 1,
    "cssValue": "rgb(199, 199, 255)",
    "count": 23,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3281,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2210,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(0, 0, 0, 0.15)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5185,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 14,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 48,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 48,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "nav",
        "text": "ServicesClient StoriesResourcesAboutBook a call",
        "top": 24,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 3281,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFC7F2",
    "alpha": 1,
    "cssValue": "rgb(255, 199, 242)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3305,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#C5EAB2",
    "alpha": 1,
    "cssValue": "rgb(197, 234, 178)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3305,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FC7D45",
    "alpha": 1,
    "cssValue": "rgb(252, 125, 69)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1358,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1727,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFE5F9",
    "alpha": 1,
    "cssValue": "rgb(255, 229, 249)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3281,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#E1F4D7",
    "alpha": 1,
    "cssValue": "rgb(225, 244, 215)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3281,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#F0FF80",
    "alpha": 1,
    "cssValue": "rgb(240, 255, 128)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 44,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1886,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#EBEBFF",
    "alpha": 1,
    "cssValue": "rgb(235, 235, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3305,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#DCD5CB",
    "alpha": 1,
    "cssValue": "rgb(220, 213, 203)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Our Services",
        "top": 1553,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between major sections, creating a relaxed pacing. Grids use consistent, moderate gaps between cards.
- Corner style: Consistently rounded corners across all container elements.
- 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.
- Borders: Mostly borderless design, relying on background color contrast to define surfaces. Illustrations use solid black strokes.
- Buttons: Pill-shaped with solid background colors (black or yellow) and no borders.
- Content width: Content is constrained to a central column with wide margins on desktop, maintaining readability.
- 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.

## Sections

Gallery section count: 10. Each entry corresponds to one gallery capture.

1. **Navbar — Amby Navbar** (Home)
   A compact rounded bar keeps few links in reach, and the lime button stands out as the one action to take.
   Capture: 1440×128px; page bounds 0–128px of 9687px; source section ID: `79cc30f9-e5db-4e2b-813e-9bdef8902207`; image: https://media.designdetails.io/library/8073519334069a2cbac33ebabfabe000342d45a59306962033671838928a1b02/79cc30f9-e5db-4e2b-813e-9bdef8902207.webp
   SECTION.md v3.2: `79cc30f9-e5db-4e2b-813e-9bdef8902207` (deterministic evidence; editorial review pending)
2. **Hero — Split hero with portrait and headline** (Home)
   A large serif headline with a hand-drawn circle on one word sits beside a warm portrait, making the offer feel personal.
   Capture: 1440×872px; page bounds 128–1000px of 9687px; source section ID: `df247dbe-8ecb-4280-9f07-57404d335241`; image: https://media.designdetails.io/library/784464fc6447dbd7a229f2eda46b0c1414ae4fbf052ba9c956e1951b0f38c860/df247dbe-8ecb-4280-9f07-57404d335241.webp
   SECTION.md v3.2: `df247dbe-8ecb-4280-9f07-57404d335241` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Scrolling row of client logos** (Home)
   Muted logos in even white tiles read as proof at a glance without competing with the hero above.
   Capture: 1440×393px; page bounds 1000–1393px of 9687px; source section ID: `68d34df3-32eb-4487-a8f4-59bc46457059`; image: https://media.designdetails.io/library/5fc1c8409320d8604a08f51a7350e61418d65998603bfc2c6f4fe544a16d8431/68d34df3-32eb-4487-a8f4-59bc46457059.webp
   SECTION.md v3.2: `68d34df3-32eb-4487-a8f4-59bc46457059` (deterministic evidence; editorial review pending)
4. **Features — Two service cards with illustrations** (Home)
   Two equal cards, each with a bold illustration, short copy and a button, let visitors pick their path quickly.
   Capture: 1440×1547px; page bounds 1393–2940px of 9687px; source section ID: `deeb60ac-fc4a-4e2c-9acc-830f7c4c3719`; image: https://media.designdetails.io/library/dcc64791a68c0db5b9b012739e3a7a7a691b4216bbf6b852a10d4dc25f9648e5/deeb60ac-fc4a-4e2c-9acc-830f7c4c3719.webp
   SECTION.md v3.2: `deeb60ac-fc4a-4e2c-9acc-830f7c4c3719` (deterministic evidence; editorial review pending)
5. **Features — Four colour-coded value cards** (Home)
   Pastel cards with playful icons and short paragraphs make four differentiators easy to scan and remember.
   Capture: 1440×1025px; page bounds 2940–3965px of 9687px; source section ID: `5ce3641a-34be-4b49-9096-22849791b237`; image: https://media.designdetails.io/library/7afba28f839230844204ba7a5c79ae7301cde9aad97e028a6159e145177a7228/5ce3641a-34be-4b49-9096-22849791b237.webp
   SECTION.md v3.2: `5ce3641a-34be-4b49-9096-22849791b237` (deterministic evidence; editorial review pending)
6. **Stats — Four colourful stat cards** (Home)
   Large numerals with small labels on distinct colour blocks let visitors absorb four proof points in seconds.
   Capture: 1440×943px; page bounds 3965–4908px of 9687px; source section ID: `c48f9c63-9cf6-4d86-96b2-ea5e8f1a111b`; image: https://media.designdetails.io/library/86c8bc46b966b9124f9356879a1681de748d6bf923f95689fd6dc64f21504c1e/c48f9c63-9cf6-4d86-96b2-ea5e8f1a111b.webp
   SECTION.md v3.2: `c48f9c63-9cf6-4d86-96b2-ea5e8f1a111b` (deterministic evidence; editorial review pending)
7. **Testimonials — Video testimonial portrait cards** (Home)
   Real client portraits with names and roles overlaid add credibility and put faces to the claims.
   Capture: 1440×1157px; page bounds 4908–6065px of 9687px; source section ID: `18fd7972-fa7e-413d-ad74-c9e57a7889a5`; image: https://media.designdetails.io/library/af25ae7313698299050a005f1a2bd313cdf52707139619b08a248f74c3b51f27/18fd7972-fa7e-413d-ad74-c9e57a7889a5.webp
   SECTION.md v3.2: `18fd7972-fa7e-413d-ad74-c9e57a7889a5` (deterministic evidence; editorial review pending)
8. **Editorial — Grid of blog post cards** (Home)
   Illustrated pastel thumbnails with titles and excerpts give each article a clear identity and an easy scan in two rows.
   Capture: 1440×1643px; page bounds 6065–7708px of 9687px; source section ID: `fa24ed57-7bd1-4eb1-bc89-540e60b5cee5`; image: https://media.designdetails.io/library/4098b4bbf300ba844daca57cce8808ad4c95cb91f0709920dbb8860fc3ee09ed/fa24ed57-7bd1-4eb1-bc89-540e60b5cee5.webp
   SECTION.md v3.2: `fa24ed57-7bd1-4eb1-bc89-540e60b5cee5` (deterministic evidence; editorial review pending)
9. **Forms — Contact form on lilac panel** (Home)
   A bold colour panel frames short labelled fields and a playful illustration, making the form inviting and clearly the final step.
   Capture: 1440×747px; page bounds 7708–8455px of 9687px; source section ID: `ba6c375a-dd6d-445c-b644-ca250ed0f1bd`; image: https://media.designdetails.io/library/af43653d9d466a1123e13686fa44ee73752f3dee32b52fd51484a1ffa9f89af8/ba6c375a-dd6d-445c-b644-ca250ed0f1bd.webp
   SECTION.md v3.2: `ba6c375a-dd6d-445c-b644-ca250ed0f1bd` (deterministic evidence; editorial review pending)
10. **Footer — Link columns with illustration** (Home)
   Four tidy link columns with contact details sit above a large hand-drawn graphic that ends the page with personality.
   Capture: 1440×1232px; page bounds 8455–9687px of 9687px; source section ID: `1ae95b49-30db-487e-bfb0-e64213c659da`; image: https://media.designdetails.io/library/f27938fdce43af2e5da33ce244ef611a78067886f5e2e808622dedee52725cbe/1ae95b49-30db-487e-bfb0-e64213c659da.webp
   SECTION.md v3.2: `1ae95b49-30db-487e-bfb0-e64213c659da` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/32313ee6951aaa43b8398b2edc3c653bc337233a4f40f3b2d4a8ed315726922d/desktop_full-8ada8b4b-2026-11-02T06-36-44-487Z.webp
- Mobile screenshot: https://media.designdetails.io/library/68a73ce7cfd2f39b83e65804dc59edb5ac79e10cea75a0f416b6ffe0e14f96b9/mobile_full-8ada8b4b-2026-11-02T06-37-23-885Z.webp
- Open Graph image: https://media.designdetails.io/library/fb8e5833355df1c2349dcce3afb3b3a030f460b6e6347e1aa469489ffa59016c/og_image-8ada8b4b-2026-11-02T06-36-51-916Z.webp
- Full-page video: https://media.designdetails.io/library/354c762660b9466680fff47912c0dcbf254948e0c2cfc2ff624501fd51ed1380/motion-1793602335856.mp4
- Video poster: https://media.designdetails.io/library/6045f7a86559940d9828c0f655390955a80f246a9d388b7b55e63bb99361d4d6/motion-poster-1793602335856.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Split Hero
- Logo Strip
- Feature Card
- Stat Block
- Testimonial Card
- Editorial Card
- Contact Form
- Primary Button
- Footer
- Pastel Card Grid
- Line Art With Offset Fill

## Quality rubric

Overall: 54.2/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Amby's homepage is a well-executed example of the current pastel-illustrated recruitment/HR SaaS template genre: a warm cream canvas, near-black ink, rotating pastel card colors, a serif-plus-sans type pairing, pill-shaped buttons, and a now-familiar scroll-reveal motion pattern applied uniformly down the page. Its strongest asset is a consistent black-outline illustration style that recurs across service cards, stat blocks, blog thumbnails, and a sticky-pinned footer graphic, giving the brand some visual personality and occasionally tying directly back to the copy (the binoculars echoing 'finding your people'). Typography is clean and hierarchically clear, and the palette is coherent rather than garish. However, none of these elements push past competent execution of an established pattern: the section-by-section structure, motion vocabulary (autoplay hero crossfade plus repeated fade-up reveals), and color treatment are all recognizable from numerous comparable sites in this space, and the one more ambitious motion idea — the sticky footer illustration — is used only once rather than built into a sustained system. The result is a pleasant, professionally produced site that executes its chosen idiom competently without assembling the several hard-to-substitute ideas needed for a 'good' or higher rating.

- Typography (15%): 62 — A confident two-family system pairs the Lastik display serif (72px/-2.9px tracking for the hero, 48px for section heads) with Switzer for body and UI text, giving clear hierarchy from H1 through small uppercase eyebrow labels. Negative tracking on the serif gives it a tightened editorial character and weights are used purposefully (700 for stat labels, 500/400 split between nav and body). However the system is a fairly standard 'expressive serif + workhorse grotesk' pairing now common across funded SaaS/agency sites, and there's no evidence of more advanced typographic craft (optical sizing, varied rag control, extensive type-driven compositions beyond headline scale changes).
- Color (10%): 57 — The warm off-white canvas (#F7F2EB) with near-black dark-green ink (#131E0D) instead of true black is a thoughtful, cohesive base, and the pastel accent set (lavender #C7C7FF, pink #FFC7F2, mint #C5EAB2, yellow-green #F0FF80) is applied consistently to cards, buttons and illustration fills. The palette reads pleasant and unified. But this exact warm-cream-plus-pastel-card formula is now a widely recognized convention in B2B SaaS/recruitment marketing sites, so while execution is clean, it isn't distinctive and the accent hues function mostly as undifferentiated card-background wallpaper rather than a considered expressive system.
- Layout (20%): 59 — The page follows a clean, spacious grid with generous vertical rhythm, a floating pill nav, and a readable constrained content column — competent execution throughout. However the overall section sequence (split hero → logo strip → two-up feature cards → four-card stat grid → three testimonial portraits → blog card grid → lavender contact form → illustrated footer) is a now-ubiquitous recruitment/SaaS marketing template skeleton, offering no structural surprises, asymmetries, or unconventional grid choices that would elevate it beyond solid, safe execution.
- Motion (20%): 46 — Motion is dominated by a single repeated pattern — fade-and-slide-up scroll reveals — applied near-identically to the logo strip, feature cards, stat cards, testimonials, and blog grid, plus an autoplay hero image crossfade. The one more deliberate idea, a sticky footer illustration that stays pinned while text scrolls past, is a worthwhile touch but is a familiar technique on its own and arrives only once, at the very end. No evidence supports claims of refined easing, staggering sophistication, or interaction-driven motion (hovers were not observed); the system reads as template-level scroll-triggered animation repeated at scale rather than a considered motion language.
- Originality (25%): 48 — The consistent black-outline, offset-color-fill illustration style is a genuine identifying device carried across feature icons, stat cards, blog thumbnails, and the footer hero illustration, giving the brand some visual personality. But the broader package — pastel cream palette, pill nav/buttons, split hero with portrait photography, scroll-reveal cards, sticky footer illustration — closely matches a recognizable and increasingly common 'quirky-illustrated recruitment/HR SaaS' template genre. The illustrations are a nice motif, but a single repeating stylistic flourish layered onto an otherwise conventional structural and interaction skeleton does not constitute a hard-to-substitute design system.
- Content (10%): 62 — Illustrations are reasonably tied to their adjacent copy (a key for 'find the right fit,' a ringed planet for 'flexible HR,' binoculars in the footer reinforcing the 'finding your people' tagline), and stat/testimonial content is presented with enough specificity (named clients, numeric claims) to feel substantiated rather than generic filler. The pairing of thematic illustration with message is a clear strength, though the blog card content and generic testimonial layout don't go much further than expected agency-site content patterns.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A warm serif headline with a hand-drawn orange circle around 'your' gives a corporate HR site some personality, while a soft peach background and real client portraits build trust. Pastel cards with quirky line illustrations break up logo strips, stat blocks and testimonials, pacing the long page into easy, scannable chunks.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.