# Colorful Stat Cards

Schema: Design Details SECTION.md v3.2
Website: Amby
Source: https://www.amby.com/
Source section IDs: c48f9c63-9cf6-4d86-96b2-ea5e8f1a111b
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Four equal tall cards in a single row, each with its own pastel fill, give clear rhythm and let the colour alone separate the stats.
- A serif display headline paired with large bold numerals and small bold sans labels makes the hierarchy readable at a glance.
- Generous whitespace, with 160px top and bottom padding and a 64px gap, keeps the section calm and lets each number stand alone.

What a screenshot can't show:
- The recording showed no motion or hover behaviour, so the cards appear static.
- Measured type sizes were not captured; spacing shows a 64px gap, 40px side padding and cards about 274px wide inside an 800px content width.

Borrow: Give each key number its own tinted block, with one big numeral and one short label, so the data reads instantly without extra decoration.
Leave alone: Don't copy Amby's exact pastel set, cream canvas, or its serif and sans pairing; choose your own palette and fonts, such as a free editorial serif with a clean grotesque.

## Classification

- Type: stats
- Layout: Four-column grid of tall cards below a centered headline.
- Styles: colourful, minimal, typographic
- Confidence: 100%

## Purpose and structure

Four tall cards with different pastel backgrounds displaying large numerical statistics.

Visual signature: Minimalist tall cards relying on bold typography and pastel colors.

## Components

- Headline
- Stat Cards
- Large Numbers
- Stat Labels

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

- Typography: 62 — Clear pairing of a serif display headline with a bold sans serif for stat numbers and a smaller bold sans for labels creates legible hierarchy; the serif numerals add a slight editorial touch, but sizing/spacing choices are safe and unremarkable beyond that contrast. Next tier: Needs more deliberate scale variation or typographic detail (e.g. differentiated number vs label treatment, baseline alignment nuance) to move past a clean-but-standard pairing.
- Composition: 58 — Simple four-column grid of tall equal-width cards under a centered headline; generous whitespace and consistent gaps give it a tidy, calm rhythm, but the layout is a very literal stat-card template with no asymmetry, layering, or unexpected spatial device. Next tier: Would need a compositional twist (varied card heights, overlap, off-grid placement, or secondary content layer) to break from the generic four-up card format.
- Motion: not_assessed — No motion_moments or timestamped animation evidence was supplied for this section. Next tier: Requires timestamped evidence of visible motion (e.g. counter animation, stagger-in cards) to assess.
- Content: 55 — Numbers and labels are paired clearly and each card is self-contained, but the content is generic metric copy with no supporting context, source, or narrative framing beyond the headline pun. Next tier: Would need richer supporting content (context, icons, or microcopy) that makes the stats feel earned rather than a template placeholder.
- Originality: 48 — Pastel-colored equal stat cards is a widely used pattern in modern web design; the only distinguishing touch is the serif numeral treatment and the headline's wordplay, which is not enough to feel distinct. Next tier: Needs a structural or conceptual idea unique to this brand/section rather than a familiar colorful-card stat pattern.
- Adaptability: 60 — Deterministic facts show a flex column root with simple repeating card children, fixed padding/gap tokens, and interchangeable pastel backgrounds, making the skin (color, copy, numbers) easy to swap while the grid structure stays intact. Next tier: Lack of captured card-level radius/shadow/border tokens and no responsive breakpoint data limits confidence in full structural portability.

Strengths:
- Clean legible pairing of serif display numerals against bold sans labels
- Consistent pastel card backgrounds give immediate visual separation between four metrics
- Generous padding and whitespace keep the section calm and easy to scan

Weaknesses:
- Highly generic four-card stat layout with no structural distinction
- No supporting context or detail beyond raw numbers and single-word labels
- Motion and finer surface details (radius, shadow) are unconfirmed, limiting evaluation depth

Why it does not reach the next tier: The section executes a common colorful-stat-card template competently but introduces no structural, narrative, or interaction idea distinct enough to feel memorable or hard to substitute.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the flex grid, number/label stack, and padding rhythm; swap in new palette and copy while keeping proportional spacing and alignment to preserve the calm, legible feel.

What transfers:
- Four-column equal-card grid with centered headline above
- Pastel background color-coding per card
- Large numeral + small label stacking inside each card

Dependencies:
- Specific pastel palette per card
- Serif display font for headline and numerals
- Exact padding/gap values (160px vertical, 64px gap, 40px side padding)

## 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 timestamps supplied, so animation could not be scored
- Card-level radius, shadow, and border values were not captured, limiting surface detail assessment
- Responsive/breakpoint behavior is 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: stats
- Source type: stats
- Structure: centered single-column
- Layout: Four-column grid of tall cards below a centered headline.
- Styles: colourful, minimal, typographic
- Components: Headline, Stat Cards, Large Numbers, Stat Labels
- Purpose: Four tall cards with different pastel backgrounds displaying large numerical statistics.
- Visual signature: Minimalist tall cards relying on bold typography and pastel colors.
- Place on the page: 6 of 10, after Feature collection (`amby-com:C05`), before Testimonials (`amby-com:C07`)

### Crop and composition

- Crop: 1440×943px; aspect ratio 1.527:1
- Page bounds: 3965–4908px 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": [],
  "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×943px; flex; padding {"top":"160px","left":"40px","right":"40px","bottom":"160px"}; gap 64px; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 64px.
- Representative content widths: 800, 274px.
- Layout containers: 1; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 3965,
      "bottom": 4908,
      "pageHeight": 9687
    }
  },
  "container": {
    "size": "1440×943px",
    "position": "x 0px, y 3965px",
    "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": [
      64
    ],
    "representativeContentWidthsPx": [
      800,
      274
    ]
  },
  "columns": [
    {
      "element": "section · Numbers don’t lie.5000+Candidates placed4.7/5Candidate Satisfaction250+Clients Helped4.8/5Client Hap",
      "size": "1440×943px",
      "position": "x 0px, y 3965px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "64px"
    }
  ]
}
```

#### Cards and surfaces

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

#### Media treatment

```json
[]
```

#### 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-525",
    "gap": "64px",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 3965,
      "width": 1440,
      "height": 943
    },
    "role": null,
    "label": "Numbers don’t lie.5000+Candidates placed4.7/5Candidate Satisfaction250+Clients Helped4.8/5Client Hap",
    "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": [],
  "bounds": {
    "top": 3965,
    "bottom": 4908,
    "pageHeight": 9687
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-525",
      "gap": "64px",
      "tag": "section",
      "rect": {
        "x": 0,
        "y": 3965,
        "width": 1440,
        "height": 943
      },
      "role": null,
      "label": "Numbers don’t lie.5000+Candidates placed4.7/5Candidate Satisfaction250+Clients Helped4.8/5Client Hap",
      "columns": null,
      "display": "flex",
      "direction": "column"
    }
  ],
  "spacing": {
    "gapsPx": [
      64
    ],
    "representativeContentWidthsPx": [
      800,
      274
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 0,
    "animations": 0,
    "elementsInSection": 10
  },
  "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: Four-column equal-card grid with centered headline above; Pastel background color-coding per card; Large numeral + small label stacking inside each card
- Dependencies: Specific pastel palette per card; Serif display font for headline and numerals; Exact padding/gap values (160px vertical, 64px gap, 40px side padding)
- Guidance: Reuse the flex grid, number/label stack, and padding rhythm; swap in new palette and copy while keeping proportional spacing and alignment to preserve the calm, legible feel.

### 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 stats section inspired by the design evidence titled “Colorful Stat Cards”.

Purpose: Four tall cards with different pastel backgrounds displaying large numerical statistics.

Structure: centered single-column. Source layout label: Four-column grid of tall 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: Minimalist tall cards relying on bold typography and pastel colors.

Components: Headline, Stat Cards, Large Numbers, Stat Labels.

Style direction: colourful, minimal, typographic.

Observed crop: 1440×943px (1.527: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":3965,"width":1440,"height":943},"padding":{"top":"160px","left":"40px","right":"40px","bottom":"160px"},"gap":"64px","columns":null,"overflow":"hidden"}; spacing {"gapsPx":[64],"representativeContentWidthsPx":[800,274]}; surfaces {"radii":[],"borders":[],"shadows":[]}

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

Transfer these principles: Four-column equal-card grid with centered headline above; Pastel background color-coding per card; Large numeral + small label stacking inside each card.

Dependencies: Specific pastel palette per card; Serif display font for headline and numerals; Exact padding/gap values (160px vertical, 64px gap, 40px side padding).

Adaptation guidance: Reuse the flex grid, number/label stack, and padding rhythm; swap in new palette and copy while keeping proportional spacing and alignment to preserve the calm, legible feel.

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