# Program Promo Card

Schema: Design Details SECTION.md v3.2
Website: Getmaple
Source: https://www.getmaple.ca/
Source section IDs: gap-008caee1-2370-3245
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The two-column split gives a clear left-to-right path: badge and co-brand tag, then a large headline, then one button, with the photo balancing the text on the right.
- A pale green fill and thin border lift the card off the cream canvas without shadows, and the dark green text and button keep contrast high.
- A warm, smiling photo of a person in a poppy field adds human feeling to a program promotion, while the 'New' badge signals why the card matters.

What a screenshot can't show:
- The recording showed no motion, so hover, scroll or entrance behaviour is unknown.
- No font sizes, letter spacing or padding were measured, so the headline's tight tracking and the card's whitespace can't be quantified.

Borrow: Give a single promotion its own bordered, tinted card with a badge, one big headline, one button and a human photo, so it reads as separate from the surrounding page.
Leave alone: Don't copy the pale green and cream palette, the site's display typeface, or the poppy-field photo; use your own colours, a free rounded display sans-serif style, and imagery that fits your program.

## Classification

- Type: feature-card
- Layout: Two-column split layout within a contained card.
- Styles: minimal, photographic
- Confidence: 95%

## Purpose and structure

A distinct, bordered promotional card with a split layout featuring text on the left and a photograph on the right.

Visual signature: Pale green bordered card with a 'New' badge and a photo of a smiling person in a field of poppies.

## Components

- promo-badge
- headline
- primary-button
- image

## Typography

- Display: MapleWebRegular — 64px 400
- Heading: MapleWebRegular — 48px 400
- Body: Inter — 14px 400

## Functional palette

- Canvas: canvas #F5F5E5
- Text: text #133611
- Primary-Action: primary action #002900
- Accent: accent #FF925C
- Accent: accent #6FE7D9

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 55.94/100 (Competent)
Scored coverage: 85%

- Typography: 58 — Clean large display headline using the site's distinct display face with tight letter-spacing creates good hierarchy against smaller badge/button text, but it's a single stacked block with no secondary type refinement beyond the system defaults. Next tier: Needs more typographic contrast or nuance (e.g., varied weights, a supporting line, or scale play) beyond one headline and one button label to earn higher.
- Composition: 56 — Simple two-column split with generous whitespace and a clear left-to-right reading path; badge and co-brand lockup stack neatly above the headline, but the layout is a very standard half-text/half-photo card with no unusual proportioning or layered elements. Next tier: Lacks a distinctive structural idea beyond the generic 50/50 split; would need asymmetry, overlap, or secondary content to feel more considered.
- Motion: not_assessed — No motion evidence supplied; motion_moments is empty and no timestamped changes were given. Next tier: Requires timestamped visible motion evidence to assess.
- Content: 55 — Photo, badge, co-brand tag, headline, and CTA work together coherently to promote a specific program, giving the card clear purpose, though the photographic choice (lifestyle stock-like image) does little to differentiate it from generic wellness marketing. Next tier: Needs tighter integration between image content and message specifics, or supporting proof points, to move past a purely promotional feel.
- Originality: 50 — A bordered promo card with badge, headline, CTA and photo is a very common pattern seen across SaaS/health marketing sites; nothing here departs from that template. Next tier: Would need a unique visual device, border treatment, or layout quirk that isn't replicated by countless other promo-card patterns.
- Adaptability: 60 — The split structure, badge, heading, button and image are clearly separable deterministic components that could be reskinned with different colors, image, and copy with low structural risk. Next tier: Score reflects clarity of separable parts; not eligible for higher without more component complexity to adapt.

Strengths:
- Clear two-column hierarchy separating message from image
- Distinct pale-green bordered card isolates the promo from surrounding content
- Legible display headline with consistent brand type system

Weaknesses:
- Generic 50/50 promo-card layout with no distinguishing structural idea
- Single lifestyle photograph carries most of the visual interest without deeper content tie-in
- No motion evidence to support behavioral richness
- Minimal typographic variation within the card

Why it does not reach the next tier: The card is tidy and legible but relies entirely on a widely-used promo-card template (badge + headline + CTA + photo) without any distinctive layout, typographic, or interaction idea that would make it memorable or hard to substitute.

## Adaptation guidance

- Effort: Low
- Guidance: Swap photo, badge text, headline copy, and button label while preserving the split proportions and card border; typography and color tokens can be reassigned without altering the layout logic.

What transfers:
- Two-column split structure
- Badge + co-brand tag + headline + CTA grouping
- Bordered card container treatment

Dependencies:
- Specific photographic asset (poppy field portrait)
- Brand color palette and display font
- Co-brand lockup component

## 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 provided, so motion axis cannot be scored
- No deterministic spacing/radius values specific to this card were supplied, limiting precision of composition judgment

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: feature-card
- Structure: two-column
- Layout: Two-column split layout within a contained card.
- Styles: minimal, photographic
- Components: promo-badge, headline, primary-button, image
- Purpose: A distinct, bordered promotional card with a split layout featuring text on the left and a photograph on the right.
- Visual signature: Pale green bordered card with a 'New' badge and a photo of a smiling person in a field of poppies.
- Place on the page: 5 of 14, after Feature collection (`getmaple-ca:C04`), before Process (`getmaple-ca:C05`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- 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": "64px",
      "family": "MapleWebRegular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Used for large, impactful headings like 'Health Yeah!' and 'Explore our new ADHD program'.",
      "sampleId": "font-2",
      "confidence": 0.95,
      "lineHeight": "60px",
      "letterSpacing": "-3%"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "MapleWebRegular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Used for primary section headings like 'Trusted by millions of Canadians' and 'Common questions'.",
      "sampleId": "font-6",
      "confidence": 0.9,
      "lineHeight": "38px",
      "letterSpacing": "-3%"
    },
    {
      "role": "body",
      "size": "14px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Inter 14px used for smaller body text, practitioner roles, and descriptive copy.",
      "sampleId": "font-9",
      "confidence": 0.95,
      "lineHeight": "20px",
      "letterSpacing": "normal"
    }
  ]
}
```

### 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": "#F5F5E5",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(245, 245, 229); AI role: Light cream color used as the primary background for most of the page.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#133611",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-7: computed rgb(19, 54, 17); AI role: Very dark green used for primary body text and headings on light backgrounds.",
      "sampleId": "color-7",
      "confidence": 0.95
    },
    {
      "hex": "#002900",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 41, 0); AI role: Dark green used for the main navigation bar, footer background, primary buttons ('Get started now'), and text.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#FF925C",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-10: computed rgb(255, 146, 92); AI role: Warm orange used for borders, star icons, and gradient backgrounds.",
      "sampleId": "color-10",
      "confidence": 0.85
    },
    {
      "hex": "#6FE7D9",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-13: computed rgb(111, 231, 217); AI role: Teal/cyan color used for text links in the header, 'Sign in' button border, and primary buttons in the hero ('Get started now').",
      "sampleId": "color-13",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons use pill shapes (e.g., 999px). Cards and images use moderate border radii (likely 8px to 16px).",
  "density": "Low to medium density. The layout breathes well, using whitespace effectively to group information without feeling cluttered.",
  "evidence": "Observed from the desktop crop images. Buttons like 'Get started now' are pill-shaped. Testimonial cards have borders. Sections have significant vertical padding.",
  "borderStyle": "Borders are used sparingly, mostly thin (1px) and solid, often in accent colors (like orange) for separation (e.g., in the comparison table, testimonial separators) or for outline buttons.",
  "buttonStyle": "Primary buttons are pill-shaped with solid fills (dark green or teal). Secondary buttons (like 'Sign in') are outlined. Hover states are not captured but implied.",
  "cornerStyle": "Predominantly rounded. Buttons are fully pill-shaped (max-radius). Cards, images, and input fields feature moderately soft rounded corners.",
  "contentWidth": "Content is constrained to a central max-width, maintaining a balanced layout on large desktop screens.",
  "spacingRhythm": "Generous spacing, with large vertical gaps between major sections to clearly delineate content. Elements within sections (like cards) have comfortable padding."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### 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
null
```

### 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: unknownpx wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: low
- What transfers: Two-column split structure; Badge + co-brand tag + headline + CTA grouping; Bordered card container treatment
- Dependencies: Specific photographic asset (poppy field portrait); Brand color palette and display font; Co-brand lockup component
- Guidance: Swap photo, badge text, headline copy, and button label while preserving the split proportions and card border; typography and color tokens can be reassigned without altering the layout logic.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Program Promo Card”.

Purpose: A distinct, bordered promotional card with a split layout featuring text on the left and a photograph on the right.

Structure: two-column. Source layout label: Two-column split layout within a contained card.. 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: Pale green bordered card with a 'New' badge and a photo of a smiling person in a field of poppies.

Components: promo-badge, headline, primary-button, image.

Style direction: minimal, photographic.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"64px","family":"MapleWebRegular","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Used for large, impactful headings like 'Health Yeah!' and 'Explore our new ADHD program'.","sampleId":"font-2","confidence":0.95,"lineHeight":"60px","letterSpacing":"-3%"} {"role":"heading","size":"48px","family":"MapleWebRegular","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Used for primary section headings like 'Trusted by millions of Canadians' and 'Common questions'.","sampleId":"font-6","confidence":0.9,"lineHeight":"38px","letterSpacing":"-3%"} {"role":"body","size":"14px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Inter 14px used for smaller body text, practitioner roles, and descriptive copy.","sampleId":"font-9","confidence":0.95,"lineHeight":"20px","letterSpacing":"normal"}

Color evidence: {"hex":"#F5F5E5","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(245, 245, 229); AI role: Light cream color used as the primary background for most of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#133611","name":"text","role":"text","source":"computed","evidence":"color-7: computed rgb(19, 54, 17); AI role: Very dark green used for primary body text and headings on light backgrounds.","sampleId":"color-7","confidence":0.95} {"hex":"#002900","name":"primary action","role":"primary-action","source":"computed","evidence":"color-2: computed rgb(0, 41, 0); AI role: Dark green used for the main navigation bar, footer background, primary buttons ('Get started now'), and text.","sampleId":"color-2","confidence":0.9} {"hex":"#FF925C","name":"accent","role":"accent","source":"computed","evidence":"color-10: computed rgb(255, 146, 92); AI role: Warm orange used for borders, star icons, and gradient backgrounds.","sampleId":"color-10","confidence":0.85} {"hex":"#6FE7D9","name":"accent","role":"accent","source":"computed","evidence":"color-13: computed rgb(111, 231, 217); AI role: Teal/cyan color used for text links in the header, 'Sign in' button border, and primary buttons in the hero ('Get started now').","sampleId":"color-13","confidence":0.85}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

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

Transfer these principles: Two-column split structure; Badge + co-brand tag + headline + CTA grouping; Bordered card container treatment.

Dependencies: Specific photographic asset (poppy field portrait); Brand color palette and display font; Co-brand lockup component.

Adaptation guidance: Swap photo, badge text, headline copy, and button label while preserving the split proportions and card border; typography and color tokens can be reassigned without altering the layout logic.

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