# Minimal Navbar

Schema: Design Details SECTION.md v3.2
Website: Amby
Source: https://www.amby.com/
Source section IDs: 79cc30f9-e5db-4e2b-813e-9bdef8902207
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A classic three-zone layout (logo left, links centre, globe and CTA right) inside a floating white pill makes the bar easy to scan and keeps the actions where people expect them.
- The lime CTA is the only saturated element against white, a warm canvas and near-black text, so 'Book a call' stands out without any extra decoration.
- Link and CTA text share one sans at 18px, separated only by weight (400 vs 700), so the hierarchy stays clear and the serif wordmark gets to be the one distinctive type moment.

What a screenshot can't show:
- The recording showed no motion, so hover, scroll or menu behaviour is unknown.
- Type is 18px Switzer with -0.4px letter spacing; line height is 24.3px on links. Gaps are 8px and 24px, the bar content is about 960px wide, and the section has 24px vertical and 16px side padding.

Borrow: Give one action the only saturated colour in an otherwise neutral bar, and use weight rather than size to rank it against the links.
Leave alone: Don't copy the lime-on-cream palette, the serif wordmark or the Switzer font; a similar neutral geometric sans works as a free alternative.

## Classification

- Type: navbar
- Layout: Horizontal bar with left-aligned logo, center-aligned links, and right-aligned actions.
- Styles: minimal
- Confidence: 100%

## Purpose and structure

A clean, minimal top navigation bar with a logo, text links, a globe icon, and a primary CTA button.

Visual signature: White background with simple black text links and a contrasting lime-green CTA button.

## Components

- Logo
- Navigation Links
- Icon
- CTA Button

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

- Typography: 58 — A distinctive serif logo wordmark pairs with clean sans-serif nav links, giving a simple but clear hierarchy. Sizing and spacing are competent but the link typography itself is generic body text with no distinguishing treatment. Next tier: Nav link typography needs a more deliberate treatment (custom tracking, weight shift on state, or unusual casing) to move beyond standard navbar type.
- Composition: 60 — Classic three-zone layout (logo left, links center, actions right) executed cleanly with a floating pill-shaped white bar, soft shadow, and good padding balance against the warm canvas background. Next tier: Layout is a very common navbar pattern; needs an unexpected structural choice (asymmetry, unusual grouping, or extra context element) to feel memorable rather than merely tidy.
- Motion: not_assessed — No motion data or timestamped behavior was supplied for this section (motion_moments is empty and animations array is empty). Next tier: Provide timestamped observation of hover, sticky-scroll, or reveal behavior to assess motion quality.
- Content: 55 — Content is minimal and functional: logo, four nav labels, a globe icon, and a CTA. It integrates adequately but offers no unique messaging or contextual information beyond standard navigation. Next tier: Would need some content element that goes beyond generic utility links, such as a status indicator or contextual microcopy, to raise integration quality.
- Originality: 48 — The floating white pill bar on a warm canvas and the lime CTA add some character, but the overall layout and interaction pattern is a widely used minimal navbar formula with no singular idea that couldn't be swapped for any other brand's navbar. Next tier: Needs a signature detail unique to this navbar (unusual icon treatment, interactive globe behavior, or distinctive CTA shape) that resists generic substitution.
- Adaptability: 62 — Structure is simple and modular: logo, nav list, icon, CTA button are clearly separable per the DOM measurements (flex row, consistent radius, isolated card). Visual skin (colors, radius, shadow) can be swapped without touching layout logic. Next tier: Not applicable at this score; axis not blocked from typical use, but true separation of behavior (e.g., sticky scroll logic) is unverified since no animation data exists.

Strengths:
- Clean three-zone layout with clear visual separation via a floating white card against a warm canvas background
- Distinctive serif logo wordmark contrasts nicely with simple sans-serif nav links
- Soft layered shadow and pill radius give the bar a tactile, lifted feel
- High-contrast lime CTA button is immediately legible as the primary action

Weaknesses:
- Nav link typography and layout pattern are generic and interchangeable with countless other minimal navbars
- No visible motion or interaction evidence provided, limiting assessment of hover/scroll behavior
- Content is purely functional with no distinguishing detail beyond standard navigation elements
- Originality is low; relies on color/shape styling rather than a structural or interactive idea unique to the brand

Why it does not reach the next tier: The navbar is competently composed and cleanly styled but uses a textbook minimal navbar formula; it lacks a unique interactive or structural idea, a distinguishing typographic treatment for links, and any motion evidence that could elevate perceived craft and memorability beyond polished-but-standard.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the flex layout, radius, and shadow tokens directly; swap the logo mark, link labels, and CTA color to match a new brand while preserving the floating pill-bar structure and spacing rhythm.

What transfers:
- Three-zone flex layout (logo / center links / right actions)
- Floating pill-shaped bar with soft shadow on neutral canvas
- Pill-shaped CTA button styling pattern
- Icon placement before CTA button

Dependencies:
- Custom serif logo asset (Lastik-style wordmark)
- Specific lime-green brand accent color for CTA
- Globe icon asset and its functional meaning (language/locale switcher)

## 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 or interaction timestamps were provided, so hover/scroll/sticky behavior could not be assessed
- Only a static desktop crop at one viewport width was available, so responsive behavior is unknown
- Exact font rendering and color values beyond supplied tokens could not be verified from the crop alone

## 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: navigation
- Source type: navbar
- Structure: centered single-column
- Layout: Horizontal bar with left-aligned logo, center-aligned links, and right-aligned actions.
- Styles: minimal
- Components: Logo, Navigation Links, Icon, CTA Button
- Purpose: A clean, minimal top navigation bar with a logo, text links, a globe icon, and a primary CTA button.
- Visual signature: White background with simple black text links and a contrasting lime-green CTA button.
- Place on the page: 1 of 10, before Hero (`amby-com:C02`)

### Crop and composition

- Crop: 1440×128px; aspect ratio 11.25:1
- Page bounds: 0–128px of 9687px
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "body/supporting copy",
      "family": "Switzer",
      "stack": "Switzer, \"Switzer Placeholder\", sans-serif",
      "size": "18px",
      "weight": "400",
      "lineHeight": "24.3px",
      "letterSpacing": "-0.4px",
      "sample": "Services",
      "element": "p",
      "occurrences": 13,
      "sourceId": "font-6"
    },
    {
      "role": "body/supporting copy",
      "family": "Switzer",
      "stack": "Switzer, \"Switzer Placeholder\", sans-serif",
      "size": "18px",
      "weight": "700",
      "lineHeight": "18px",
      "letterSpacing": "-0.4px",
      "sample": "Book a call",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-10"
    }
  ],
  "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": "#F7F2EB",
      "cssValue": "rgb(247, 242, 235)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 35,
      "sourceId": "color-1"
    },
    {
      "value": "#131E0D",
      "cssValue": "rgb(19, 30, 13)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-fill"
      ],
      "occurrences": 160,
      "sourceId": "color-2"
    },
    {
      "value": "#000000",
      "cssValue": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 14,
      "sourceId": "color-6"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 2,
      "sourceId": "color-7"
    },
    {
      "value": "#F0FF80",
      "cssValue": "rgb(240, 255, 128)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "svg-fill"
      ],
      "occurrences": 11,
      "sourceId": "color-13"
    }
  ],
  "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×128px; flex; padding {"top":"24px","left":"16px","right":"16px","bottom":"24px"}; gap 24px; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 8, 24px.
- Representative content widths: 960, 258px.
- Layout containers: 2; cards/surfaces: 1; media elements: 2; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 128,
      "pageHeight": 9687
    }
  },
  "container": {
    "size": "1440×128px",
    "position": "x 0px, y 0px",
    "display": "flex",
    "positionMode": "relative",
    "padding": {
      "top": "24px",
      "left": "16px",
      "right": "16px",
      "bottom": "24px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "24px",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      8,
      24
    ],
    "representativeContentWidthsPx": [
      960,
      258
    ]
  },
  "columns": [
    {
      "element": "header · ServicesClient StoriesResourcesAboutBook a call",
      "size": "1440×128px",
      "position": "x 0px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "24px"
    },
    {
      "element": "nav · ServicesClient StoriesResourcesAboutBook a call",
      "size": "960×80px",
      "position": "x 240px, y 24px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "nav · ServicesClient StoriesResourcesAboutBook a call",
      "size": "960×80px",
      "position": "x 240px, y 24px",
      "padding": [
        "0px",
        "24px",
        "0px",
        "24px"
      ],
      "radius": "16px",
      "border": "0px none rgb(0, 0, 0)",
      "shadow": "rgba(0, 0, 0, 0.04) 0px 0.361312px 0.252919px -0.583333px, rgba(0, 0, 0, 0.04) 0px 1.37312px 0.961184px -1.16667px, rgba(0, 0, 0, 0.07) 0px 6px 4.2px -1.75px",
      "background": "rgb(255, 255, 255)"
    }
  ],
  "surfaces": {
    "radii": [
      "16px",
      "40px"
    ],
    "borders": [],
    "shadows": [
      "rgba(0, 0, 0, 0.04) 0px 0.361312px 0.252919px -0.583333px, rgba(0, 0, 0, 0.04) 0px 1.37312px 0.961184px -1.16667px, rgba(0, 0, 0, 0.07) 0px 6px 4.2px -1.75px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "94×40px",
    "position": "x 264px, y 48px",
    "aspectRatio": 2.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "32×24px",
    "position": "x 997px, y 52px",
    "aspectRatio": 1.3,
    "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-8",
    "gap": "24px",
    "tag": "header",
    "rect": {
      "x": 0,
      "y": 0,
      "width": 1440,
      "height": 128
    },
    "role": null,
    "label": "ServicesClient StoriesResourcesAboutBook a call",
    "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": "24px",
      "left": "16px",
      "right": "16px",
      "bottom": "24px"
    },
    "overflow": "visible",
    "position": "relative",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [
    {
      "id": "ld-9",
      "tag": "nav",
      "rect": {
        "x": 240,
        "y": 24,
        "width": 960,
        "height": 80
      },
      "role": null,
      "label": "ServicesClient StoriesResourcesAboutBook a call",
      "border": "0px none rgb(0, 0, 0)",
      "radius": "16px",
      "shadow": "rgba(0, 0, 0, 0.04) 0px 0.361312px 0.252919px -0.583333px, rgba(0, 0, 0, 0.04) 0px 1.37312px 0.961184px -1.16667px, rgba(0, 0, 0, 0.07) 0px 6px 4.2px -1.75px",
      "padding": [
        "0px",
        "24px",
        "0px",
        "24px"
      ],
      "background": "rgb(255, 255, 255)"
    }
  ],
  "media": [
    {
      "id": "ld-15",
      "tag": "svg",
      "rect": {
        "x": 264,
        "y": 48,
        "width": 94,
        "height": 40
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 2.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-48",
      "tag": "svg",
      "rect": {
        "x": 997,
        "y": 52,
        "width": 32,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1.3,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 0,
    "bottom": 128,
    "pageHeight": 9687
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-8",
      "gap": "24px",
      "tag": "header",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 128
      },
      "role": null,
      "label": "ServicesClient StoriesResourcesAboutBook a call",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-9",
      "gap": "normal",
      "tag": "nav",
      "rect": {
        "x": 240,
        "y": 24,
        "width": 960,
        "height": 80
      },
      "role": null,
      "label": "ServicesClient StoriesResourcesAboutBook a call",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      8,
      24
    ],
    "representativeContentWidthsPx": [
      960,
      258
    ]
  },
  "coverage": {
    "cards": 1,
    "media": 2,
    "animations": 0,
    "elementsInSection": 19
  },
  "surfaces": {
    "radii": [
      "16px",
      "40px"
    ],
    "borders": [],
    "shadows": [
      "rgba(0, 0, 0, 0.04) 0px 0.361312px 0.252919px -0.583333px, rgba(0, 0, 0, 0.04) 0px 1.37312px 0.961184px -1.16667px, rgba(0, 0, 0, 0.07) 0px 6px 4.2px -1.75px"
    ]
  },
  "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: Three-zone flex layout (logo / center links / right actions); Floating pill-shaped bar with soft shadow on neutral canvas; Pill-shaped CTA button styling pattern; Icon placement before CTA button
- Dependencies: Custom serif logo asset (Lastik-style wordmark); Specific lime-green brand accent color for CTA; Globe icon asset and its functional meaning (language/locale switcher)
- Guidance: Reuse the flex layout, radius, and shadow tokens directly; swap the logo mark, link labels, and CTA color to match a new brand while preserving the floating pill-bar structure and spacing rhythm.

### 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 navigation section inspired by the design evidence titled “Minimal Navbar”.

Purpose: A clean, minimal top navigation bar with a logo, text links, a globe icon, and a primary CTA button.

Structure: centered single-column. Source layout label: Horizontal bar with left-aligned logo, center-aligned links, and right-aligned actions.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: White background with simple black text links and a contrasting lime-green CTA button.

Components: Logo, Navigation Links, Icon, CTA Button.

Style direction: minimal.

Observed crop: 1440×128px (11.25: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-6","size":"18px","count":13,"family":"Switzer","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":52,"text":"Services","property":"font"},{"tag":"p","top":52,"text":"Client Stories","property":"font"},{"tag":"p","top":52,"text":"Resources","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"24.3px","letterSpacing":"-0.4px"} {"id":"font-10","size":"18px","count":4,"family":"Switzer","traits":"Regular","weight":"700","contexts":[{"tag":"p","top":55,"text":"Book a call","property":"font"},{"tag":"p","top":846,"text":"Book a call","property":"font"},{"tag":"p","top":7514,"text":"View all","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"18px","letterSpacing":"-0.4px"}

Colors measured inside this section: {"id":"color-1","hex":"#F7F2EB","alpha":1,"count":35,"contexts":[{"tag":"body","top":0,"text":":root body { background: var(--token-f8ccb3a9-ffa6-4bb3-95f8-b897b2ccad2c, rgb(247, 242, 235)); }Ser","property":"background"},{"tag":"div","top":0,"text":"ServicesClient StoriesResourcesAboutBook a callhtml body { background: var(--token-80e8325e-29ca-47d","property":"background"},{"tag":"main","top":0,"text":"Findingyourpeople.Madesimpler.Book a callTrusted by the best.Our ServicesWe help you find and keep t","property":"background"}],"cssValue":"rgb(247, 242, 235)"} {"id":"color-2","hex":"#131E0D","alpha":1,"count":160,"contexts":[{"tag":"p","top":52,"text":"Services","property":"text"},{"tag":"svg","top":52,"text":"","property":"svg-fill"},{"tag":"g","top":54,"text":"","property":"svg-fill"}],"cssValue":"rgb(19, 30, 13)"} {"id":"color-6","hex":"#000000","alpha":1,"count":14,"contexts":[{"tag":"svg","top":48,"text":"","property":"svg-fill"},{"tag":"use","top":48,"text":"","property":"svg-fill"}],"cssValue":"rgb(0, 0, 0)"} {"id":"color-7","hex":"#FFFFFF","alpha":1,"count":2,"contexts":[{"tag":"nav","top":24,"text":"ServicesClient StoriesResourcesAboutBook a call","property":"background"},{"tag":"div","top":3281,"text":"","property":"background"}],"cssValue":"rgb(255, 255, 255)"} {"id":"color-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)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":0,"width":1440,"height":128},"padding":{"top":"24px","left":"16px","right":"16px","bottom":"24px"},"gap":"24px","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8,24],"representativeContentWidthsPx":[960,258]}; surfaces {"radii":["16px","40px"],"borders":[],"shadows":["rgba(0, 0, 0, 0.04) 0px 0.361312px 0.252919px -0.583333px, rgba(0, 0, 0, 0.04) 0px 1.37312px 0.961184px -1.16667px, rgba(0, 0, 0, 0.07) 0px 6px 4.2px -1.75px"]}; media [{"tag":"svg","rect":{"x":264,"y":48,"width":94,"height":40},"aspectRatio":2.4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":997,"y":52,"width":32,"height":24},"aspectRatio":1.3,"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: Three-zone flex layout (logo / center links / right actions); Floating pill-shaped bar with soft shadow on neutral canvas; Pill-shaped CTA button styling pattern; Icon placement before CTA button.

Dependencies: Custom serif logo asset (Lastik-style wordmark); Specific lime-green brand accent color for CTA; Globe icon asset and its functional meaning (language/locale switcher).

Adaptation guidance: Reuse the flex layout, radius, and shadow tokens directly; swap the logo mark, link labels, and CTA color to match a new brand while preserving the floating pill-bar structure and spacing rhythm.

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