# Getmaple — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.getmaple.ca/
Captured: 2026-10-22
CSS measured: 2026-10-22T04:53:36.448Z at 1440×1000 — https://www.getmaple.ca/
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: anthropic/claude-sonnet-5

## Design direction

Maple is a modern telehealth platform featuring a clean, approachable, and slightly playful aesthetic. The design relies heavily on a warm, earthy color palette with dark greens and soft creams, accented by vibrant oranges and teals. Typography pairs a distinctive, friendly serif (MapleWebRegular) for headings with a clean sans-serif (Inter) for body copy. The layout makes use of ample whitespace, soft rounded corners, and masonry grids for testimonials. Motion is used purposefully to introduce content via scroll-triggered fade-ins and upward slides.

## Classification

- Industry: health
- Site type: Landing, Store
- Business model: Shopping, Software, Agency
- Styles: corporate, playful, soft, gradient, earthy, friendly
- Platform: Custom code
- Technology: Not identified

## Typography

- Display: MapleWebRegular — weight 400; size 64px; line-height 60px; tracking -3%; Regular (95% role confidence, computed values)
- Heading: MapleWebRegular — weight 400; size 48px; line-height 38px; tracking -3%; Regular (90% role confidence, computed values)
- Body: Inter — weight 400; size 14px; line-height 20px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #F5F5E5: color-1: computed rgb(245, 245, 229); AI role: Light cream color used as the primary background for most of the page. (95% role confidence, computed values)
- Text — text #133611: color-7: computed rgb(19, 54, 17); AI role: Very dark green used for primary body text and headings on light backgrounds. (95% role confidence, computed values)
- Primary Action — primary action #002900: 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. (90% role confidence, computed values)
- Accent — accent #FF925C: color-10: computed rgb(255, 146, 92); AI role: Warm orange used for borders, star icons, and gradient backgrounds. (85% role confidence, computed values)
- Accent — accent #6FE7D9: 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'). (85% 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": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "36px",
    "letterSpacing": "-2%",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "h3",
        "text": "Same-day care",
        "top": 1530,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Paediatric care",
        "top": 1530,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Mental health care",
        "top": 1530,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "64px",
    "lineHeight": "60px",
    "letterSpacing": "-3%",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h1",
        "text": "Home",
        "top": 187,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Explore our new ADHD program to support you and your family",
        "top": 2771,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "How Maple works",
        "top": 3344,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "25px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h4",
        "text": "Walk-in clinics",
        "top": 4903,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Maple is super easy and convenient!",
        "top": 7156,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The platform works 24/7, making it perfect for busy schedules. The monthly subscription is totally w",
        "top": 7197,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "28px",
    "lineHeight": "36px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Prescriptions",
        "top": 2092,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Cold, flu and allergies",
        "top": 2092,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Sexual health",
        "top": 2092,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "36px",
    "lineHeight": "36px",
    "letterSpacing": "-2%",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Sign up and tell us what's going on",
        "top": 3794,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Chat with a practitioner anytime, anywhere",
        "top": 3789,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Get your care plan and prescription",
        "top": 3794,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "38px",
    "letterSpacing": "-3%",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Trusted by millions of Canadians",
        "top": 6634,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Common questions",
        "top": 9905,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "56px",
    "lineHeight": "52px",
    "letterSpacing": "-3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "How can we help you today?",
        "top": 955,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "36px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "On-demand care",
        "top": 1708,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 79,
    "contexts": [
      {
        "tag": "p",
        "text": "Family Physician",
        "top": 8465,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Nurse Practitioner",
        "top": 8465,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Nurse Practitioner",
        "top": 8465,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "38px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 35,
    "contexts": [
      {
        "tag": "p",
        "text": "New",
        "top": 2558,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "—S. Corr",
        "top": 7323,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Trustpilot",
        "top": 7323,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 19,
    "contexts": [
      {
        "tag": "span",
        "text": "/ month",
        "top": 5901,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Dr. Van Raay is a dedicated family physician based in Calgary, Alberta, with over 20 years of experi",
        "top": 8493,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Kamil is an experienced Nurse Practitioner at the Annapolis Royal Family Practice. Kamil obtained hi",
        "top": 8493,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "38px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Services",
        "top": 12526,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Resources",
        "top": 12526,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Company",
        "top": 12526,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "400",
    "size": "22px",
    "lineHeight": "25px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "If you need same-day care, a prescription renewal or help managing an ongoing condition, our network",
        "top": 430,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "From same-day care to chronic condition management and everything in between—we're here for you.",
        "top": 1027,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Whether it's a sore throat in the middle of the night, a general question about your health or somet",
        "top": 3896,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "36px",
    "letterSpacing": "-2%",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Canadian-licensed healthcare practitioners",
        "top": 4978,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "24/7 access to care",
        "top": 5085,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Care in minutes",
        "top": 5157,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "View all",
        "top": 1715,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Sent to your pharmacy or delivered to your door",
        "top": 2140,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Cough, congestion, sore throat, fever, body aches",
        "top": 2140,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "25px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Step 1",
        "top": 3737,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Step 2",
        "top": 3732,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Step 3",
        "top": 3737,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "38px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "From sign-up to ongoing care",
        "top": 3424,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "38px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "What types of doctors and specialists are available on Maple?",
        "top": 9898,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "What should I expect from my online visit?",
        "top": 10039,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "What can I use Maple for?",
        "top": 10142,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "38px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 28,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Maple",
        "top": 2615,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Home",
        "top": 13229,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "abbr",
        "text": "FR",
        "top": 35,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Trusted by millions of Canadians",
        "top": 759,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "5-star in-app reviews",
        "top": 759,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "100% Canadian Care",
        "top": 730,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Over 2 million",
        "top": 730,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "4.8 rating",
        "top": 730,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Inter",
    "fontStack": "Inter, system-ui, Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Expert healthcare anytime, anywhere, for you and your family*",
        "top": 6089,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Diagnosis, prescriptions and lab requisitions at a practitioner's discretion",
        "top": 6147,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Specialty care without a referral, plus exclusive member-only pricing",
        "top": 6205,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "17.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "a",
        "text": "Get started now",
        "top": 529,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Get started now",
        "top": 1586,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Get started now",
        "top": 1586,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "17.1px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "a",
        "text": "For Patients",
        "top": 24,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "For Providers",
        "top": 24,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "For Partners",
        "top": 24,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "MapleWebRegular",
    "fontStack": "MapleWebRegular, Georgia, Times, serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "17.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign in",
        "top": 24,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Sign up",
        "top": 24,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F5F5E5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 229)",
    "count": 46,
    "contexts": [
      {
        "tag": "a",
        "text": "For Patients",
        "top": 24,
        "property": "control-background"
      },
      {
        "tag": "a",
        "text": "For Providers",
        "top": 24,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "If you need same-day care, a prescription renewal or help managing an ongoing condition, our network",
        "top": 430,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#002900",
    "alpha": 1,
    "cssValue": "rgb(0, 41, 0)",
    "count": 216,
    "contexts": [
      {
        "tag": "header",
        "text": "Skip to main contentHome For PatientsFor ProvidersFor PartnersMembership Our practitionersOur care s",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "mpl-navigation-primary",
        "text": "Home For PatientsFor ProvidersFor PartnersMembership Our practitionersOur care servicesPrescriptions",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "For Patients",
        "top": 24,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FF915A",
    "alpha": 1,
    "cssValue": "rgb(255, 145, 90)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "How Maple worksFrom sign-up to ongoing careStep 1Sign up and tell us what's going onWhether it's a s",
        "top": 3248,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F5F5E6",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 230)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Skip the clinic. Not the care.See a practitioner anytime, day or night.Walk-in clinicsCanadian-licen",
        "top": 4406,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#002900",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(0, 41, 0, 0.12)",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6752,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 130,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 29,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 29,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#133611",
    "alpha": 1,
    "cssValue": "rgb(19, 54, 17)",
    "count": 26,
    "contexts": [
      {
        "tag": "span",
        "text": "Trusted by millions of Canadians",
        "top": 759,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "From same-day care to chronic condition management and everything in between—we're here for you.",
        "top": 1027,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#420000",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(66, 0, 0, 0.12)",
    "count": 25,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign up",
        "top": 24,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FAF7F5",
    "alpha": 1,
    "cssValue": "rgb(250, 247, 245)",
    "count": 78,
    "contexts": [
      {
        "tag": "button",
        "text": "Membership",
        "top": 32,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Services",
        "top": 12526,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "How it works",
        "top": 12577,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FF925C",
    "alpha": 1,
    "cssValue": "rgb(255, 146, 92)",
    "count": 123,
    "contexts": [
      {
        "tag": "h1",
        "text": "Home",
        "top": 187,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 730,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "PrescriptionsSent to your pharmacy or delivered to your door",
        "top": 1784,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#E5F1E4",
    "alpha": 1,
    "cssValue": "rgb(229, 241, 228)",
    "count": 22,
    "contexts": [
      {
        "tag": "p",
        "text": "Let’s work together to build better healthcare programs tailored to your goals. Because when your te",
        "top": 9268,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "© 2026 Maple All rights reserved.",
        "top": 13669,
        "property": "text"
      },
      {
        "tag": "li",
        "text": "Facebook",
        "top": 13651,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#171BDE",
    "alpha": 1,
    "cssValue": "rgb(23, 27, 222)",
    "count": 19,
    "contexts": [
      {
        "tag": "a",
        "text": "View all",
        "top": 1715,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#6FE7D9",
    "alpha": 1,
    "cssValue": "rgb(111, 231, 217)",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 28,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Sign in",
        "top": 24,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Sign in",
        "top": 24,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(255, 255, 255, 0.05)",
    "count": 3,
    "contexts": [
      {
        "tag": "li",
        "text": "For Patients",
        "top": 24,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#6BE6D6",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(111, 231, 217, 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign in",
        "top": 24,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#E76750",
    "alpha": 1,
    "cssValue": "rgb(231, 103, 80)",
    "count": 2,
    "contexts": [
      {
        "tag": "hr",
        "text": "",
        "top": 6055,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "",
        "top": 932,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FAF8F5",
    "alpha": 0.4,
    "cssValue": "rgba(250, 247, 245, 0.4)",
    "count": 12,
    "contexts": [
      {
        "tag": "a",
        "text": "",
        "top": 13082,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#005200",
    "alpha": 1,
    "cssValue": "rgb(0, 82, 0)",
    "count": 36,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9920,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 2,
    "contexts": [
      {
        "tag": "li",
        "text": "",
        "top": 24,
        "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 spacing, with large vertical gaps between major sections to clearly delineate content. Elements within sections (like cards) have comfortable padding.
- Corner style: Predominantly rounded. Buttons are fully pill-shaped (max-radius). Cards, images, and input fields feature moderately soft rounded corners.
- Radius: Buttons use pill shapes (e.g., 999px). Cards and images use moderate border radii (likely 8px to 16px).
- Borders: 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.
- Buttons: 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.
- Content width: Content is constrained to a central max-width, maintaining a balanced layout on large desktop screens.
- 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.

## Sections

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

1. **Features — Our trusted network of doctors and nurse practitioners is here for you** (Home)
   Reusable feature composition from Home, organized around “Our trusted network of doctors and nurse practitioners is here for you”.
   Capture: 1440×827px; page bounds 8084–8911px of 13755px; source section ID: `d7da0435-0b9d-46dc-8b7c-78431ca337e4`; image: https://media.designdetails.io/library/6bda06d5d26cccd258ffcc193684ffa9461f1d86995d11055c0da6748a00d3ee/section_crop-d7da0435-2026-10-22T04-53-49-542Z.webp
   SECTION.md v3.2: `d7da0435-0b9d-46dc-8b7c-78431ca337e4` (deterministic evidence; editorial review pending)
2. **FAQ — Common questions** (Home)
   FAQ composition from Home, organized around “Common questions”.
   Capture: 1440×749px; page bounds 9631–10380px of 13755px; source section ID: `a6420d7e-f6f1-45d3-b2d5-2e7896148953`; image: https://media.designdetails.io/library/7907cf6771a5f755db3317d4029fca8f0478f6049148f39d0f1f1f88daa86601/section-manual-a6420d7e-f6f1-45d3-b2d5-2e7896148953-1792650196348.webp
   SECTION.md v3.2: `a6420d7e-f6f1-45d3-b2d5-2e7896148953` (deterministic evidence; editorial review pending)
3. **Hero — Health Yeah virtual care hero** (Home)
   AI suggestion (98% confidence): Complete hero with a full-bleed lifestyle image, bold value proposition, supporting copy, primary CTA, and a self-contained trust-and-ratings strip.
   Capture: 1440×765px; page bounds 87–852px of 13755px; source section ID: `21beee6d-f7da-4c40-b0f7-fb81008004b9`; image: https://media.designdetails.io/library/9933da3e0f8b1e74c9c40301686b796f56231718115e1a62ab107e40a008f19a/21beee6d-f7da-4c40-b0f7-fb81008004b9.webp
   SECTION.md v3.2: `21beee6d-f7da-4c40-b0f7-fb81008004b9` (deterministic evidence; editorial review pending)
4. **Feature Grid — Same-day and on-demand care options** (Home)
   AI suggestion (94% confidence): Complete service-discovery section with heading, featured same-day care panel, four illustrated care-category cards, and a closing CTA.
   Capture: 1440×1434px; page bounds 936–2370px of 13755px; source section ID: `4683be47-fdc5-443a-b27e-6a2c686e4854`; image: https://media.designdetails.io/library/32977e655eb64e46e2a90e8244615b1932b21fe87559d021996464ec13f0dbb3/4683be47-fdc5-443a-b27e-6a2c686e4854.webp
   SECTION.md v3.2: `4683be47-fdc5-443a-b27e-6a2c686e4854` (deterministic evidence; editorial review pending)
5. **Process — How Maple works** (Home)
   AI suggestion (97% confidence): Complete sign-up-to-care walkthrough with heading, step content, supporting interface mockup, navigation controls, and a clearly bounded gradient section.
   Capture: 1440×1164px; page bounds 3245–4409px of 13755px; source section ID: `c9295150-4301-4a41-84b9-73e6278e169a`; image: https://media.designdetails.io/library/36a427221d04093887df5775913b7a4ed4487647c1b4f71949af3a2b46e0f830/c9295150-4301-4a41-84b9-73e6278e169a.webp
   SECTION.md v3.2: `c9295150-4301-4a41-84b9-73e6278e169a` (deterministic evidence; editorial review pending)
6. **Comparison — Maple vs. walk-in clinics** (Home)
   AI suggestion (94% confidence): Self-contained comparison section with a clear value proposition and complete feature table contrasting Maple with walk-in clinics.
   Capture: 1440×1110px; page bounds 4409–5519px of 13755px; source section ID: `409ed9ab-fb04-40af-8535-dcc2b8e1ffe6`; image: https://media.designdetails.io/library/c03a24110caf32b6857f4bf0e6b4828e2c68fe1db648612512eda6f123aafc53/409ed9ab-fb04-40af-8535-dcc2b8e1ffe6.webp
   SECTION.md v3.2: `409ed9ab-fb04-40af-8535-dcc2b8e1ffe6` (deterministic evidence; editorial review pending)
7. **Pricing — Care for the Whole Family Membership** (Home)
   AI suggestion (98% confidence): Complete family membership pricing block with headline, monthly price, conversion button, benefit list, and supporting lifestyle image.
   Capture: 1440×741px; page bounds 5653–6394px of 13755px; source section ID: `7ef7e66f-d03a-4771-b63f-8f04d32a9636`; image: https://media.designdetails.io/library/e406908fb746aec6323dd3a23b9c72e3fc3c57ed99af662518b80c8d48715d61/7ef7e66f-d03a-4771-b63f-8f04d32a9636.webp
   SECTION.md v3.2: `7ef7e66f-d03a-4771-b63f-8f04d32a9636` (deterministic evidence; editorial review pending)
8. **Testimonials — Trusted by Millions of Canadians** (Home)
   AI suggestion (97% confidence): Self-contained social-proof section combining a five-star heading with a complete editorial grid of customer quotes, Trustpilot attribution, and lifestyle photography.
   Capture: 1440×1470px; page bounds 6562–8032px of 13755px; source section ID: `8e9fe3e8-1ebd-4398-ab8c-91b9e50ba820`; image: https://media.designdetails.io/library/c9d6315dcc0d2676d52a794fce6a8982db4108dde5ccf2ec7e157c637fe237ba/8e9fe3e8-1ebd-4398-ab8c-91b9e50ba820.webp
   SECTION.md v3.2: `8e9fe3e8-1ebd-4398-ab8c-91b9e50ba820` (deterministic evidence; editorial review pending)
9. **CTA — Healthcare That Works Around Your Business** (Home)
   AI suggestion (98% confidence): Complete split-layout business healthcare promotion pairing a focused value proposition and Learn more action with distinctive lifestyle imagery.
   Capture: 1440×717px; page bounds 8913–9630px of 13755px; source section ID: `72c5e897-44f5-4428-aeb8-8ce747b84aeb`; image: https://media.designdetails.io/library/8bd1851e882171da7c2cadc200eb26270f7a5c7d45c57477809fe974736060f6/72c5e897-44f5-4428-aeb8-8ce747b84aeb.webp
   SECTION.md v3.2: `72c5e897-44f5-4428-aeb8-8ce747b84aeb` (deterministic evidence; editorial review pending)
10. **CTA — Ready to get started?** (Home)
   AI suggestion (98% confidence): Complete conversion section with a prominent headline, “Get care” button, and distinctive full-width healthcare illustration, ending cleanly before the footer.
   Capture: 1440×857px; page bounds 11627–12484px of 13755px; source section ID: `456269b9-a1f0-4b1f-8718-086234da1f6a`; image: https://media.designdetails.io/library/84a40216dcbf575c9582f293d94562200c0b6f78af08c531ba9c3e33a0ec115b/section-manual-456269b9-a1f0-4b1f-8718-086234da1f6a-1792650202323.webp
   SECTION.md v3.2: `456269b9-a1f0-4b1f-8718-086234da1f6a` (deterministic evidence; editorial review pending)
11. **Footer — Maple App Download Footer** (Home)
   AI suggestion (86% confidence): Substantial branded footer with app-download and certification badges, oversized Maple wordmark, legal links, and social channels; it forms a cohesive, reusable closing component.
   Capture: 1440×1246px; page bounds 12509–13755px of 13755px; source section ID: `7718ae1e-22de-4963-b19c-0c93fc91f92b`; image: https://media.designdetails.io/library/15df2585873d055e0bc628049f382cd4430d74e65afddecfba312a3d635b346e/section-manual-7718ae1e-22de-4963-b19c-0c93fc91f92b-1792650210434.webp
   SECTION.md v3.2: `7718ae1e-22de-4963-b19c-0c93fc91f92b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/2bc81d4d669b0520671b85fa63e9f958439bb7b04c20a788b3090512ca4f31c7/desktop_full-b41b1816-2026-10-22T04-53-36-468Z.webp
- Mobile screenshot: https://media.designdetails.io/library/787ca862674ea473887e2f656974701dfaa2acb1d299dc4d5e885b7f57f0a0c2/mobile_full-b41b1816-2026-10-22T04-54-40-031Z.jpg
- Open Graph image: https://media.designdetails.io/library/ea2eaf5232a28a5a9badf072de53a05e0de3babd53e682d161a3f52d346fba46/og_image-b41b1816-2026-10-22T04-53-45-270Z.webp
- Full-page video: https://media.designdetails.io/library/3e2cb1f2567a3b79b4334b3a428d9e331a01c307324a5f85d6e9af9427a8b1d0/motion-1792645164472.mp4
- Video poster: https://media.designdetails.io/library/419eadb6e51865227e05e2fbfa340b7857420706cec6883e1a4843e98ccf36a1/motion-poster-1792645164472.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
- Hero With Background Imagery
- Stat Block
- Feature Collection
- Split Hero
- Carousel
- Comparison Table
- Pricing Table
- Testimonial Card
- Editorial Card
- FAQ Accordion
- Primary Button
- Outline Button
- Badge
- Footer
- Floating Chat Widget
- Trust Banner
- Step By Step Slider
- Masonry Testimonial Grid

## Quality rubric

Overall: 51.6/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Maple executes a clean, warm, brand-consistent telehealth marketing site with solid typographic pairing, a cohesive earthy palette, and tidy scroll-reveal motion, but nearly every structural choice — stat bar, feature grid, step carousel, comparison table, pricing card, testimonial masonry, FAQ accordion — follows the standard digital-health SaaS template, and a handful of off-palette colors and an inconsistent heading scale keep the execution at a competent rather than distinguished level.

- Typography (15%): 61 — A distinctive custom serif (MapleWebRegular) is paired consistently with Inter for body copy across the whole page, giving headings a warm, branded voice. However the scale is loose rather than crisp — measured sizes cluster oddly close together (28px, 32px, 36px, 40px, 48px, 56px, 64px) without a clear modular logic, and letter-spacing values (-1% to -3%) appear applied inconsistently across similarly-weighted headings.
- Color (10%): 59 — The dark-green/cream/orange/teal palette is warm and on-brand and repeats convincingly across nav, buttons, tables and footer, but a few off-palette values (a plain web-link blue #171BDE, an unexplained red-orange border #E76750) puncture the otherwise curated earthy system.
- Layout (20%): 59 — The page assembles a full, well-organized set of sections (hero, stat bar, feature grid, split hero, step carousel, comparison table, pricing card, masonry testimonials, practitioner cards, FAQ accordion, footer) with generous whitespace and consistent content width — competent execution of a conventional marketing-site layout, but the section patterns themselves (grid of 4 features, 3-column pricing/testimonial table, accordion FAQ) are highly standard SaaS/healthcare-template structures rather than a distinctive compositional idea.
- Motion (20%): 51 — Motion is limited to scroll-triggered fade/slide-up reveals applied uniformly to hero text, step content, the comparison table, testimonial cards and footer links — a competent, purposeful but very common intersection-observer pattern with no evidence of more ambitious choreography, parallax, or custom easing distinguishing it from countless other sites using the same effect.
- Originality (25%): 35 — Aside from the custom serif wordmark treatment and a couple of decorative illustrations (marbles, gradient butterfly), nearly every structural choice — hero with trust-badge stat bar, feature icon grid, numbered step carousel, checkmark comparison table, single pricing card, masonry testimonial wall, FAQ accordion with category pills, oversized wordmark footer — is a widely recognized pattern from the digital-health/SaaS marketing template space. No hard-to-substitute idea ties these conventional parts into something singular to Maple.
- Content (10%): 58 — Photography and illustration are thematically tied to the healthcare/lifestyle narrative (cafe celebration hero, family imagery for pricing, practitioner headshots, lifestyle testimonial photos) and testimonials carry real attribution (Trustpilot handles), giving the content a grounded, relevant feel, though the integration is largely conventional stock-style photo-plus-copy pairing rather than content shaping the design system itself.

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
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A big joyful photo of people cheering paired with a bold handwritten-style headline sets a warm, human mood before any medical talk starts. Phone screenshots shown in real hands, a simple Maple versus walk-in clinic comparison table, and rows of patient quotes build trust through everyday proof rather than clinical stock imagery.

## 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.