# ClarityCare — Design Reference

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

## Design direction

ClarityCare employs an elegant, editorial-leaning corporate design style characterized by a warm, sophisticated palette of deep burgundies, warm beiges, and soft tans. The typography pairs a condensed, technical sans-serif with a prominent, tightly-tracked, uppercase serif for display headings, lending authority and a slight retro-editorial feel. Layouts are airy yet structured, leveraging large typography, classic painting imagery juxtaposed with modern UI mockups, and subtle design tokens like soft border radii and thin, precise dividing lines.

## Classification

- Industry: health
- Site type: Blog
- Business model: Not identified
- Styles: corporate, editorial, retro, warm-professional
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: PP Right Serif — weight 500; size 100px; line-height 73.3px; tracking -1.5px; uppercase (100% role confidence, computed values)
- Heading: PP Right Serif — weight 500; size 66.7px; line-height 53.3px; tracking -1px; Regular (95% role confidence, computed values)
- Body: Suisse Intl Condensed — weight 500; size 15px; line-height 15px; tracking -0.2px; Regular (90% role confidence, computed values)
- Mono: PP Right Serif — weight 500; size 17px; line-height 17px; tracking -0.3px; uppercase (70% role confidence, computed values)

## Functional palette

- Canvas — canvas #F4EEE6: color-2: computed rgb(244, 238, 230); AI role: Warm beige (#F4EEE6) used as the main body background across several sections. (95% role confidence, computed values)
- Text — text #3F3C36: color-7: computed rgb(63, 60, 54); AI role: Dark brown/grey (#3F3C36) used for main body text and headings on light backgrounds. (95% role confidence, computed values)
- Canvas — canvas #5A1C1D: color-5: computed rgb(90, 28, 29); AI role: Deep burgundy red (#5A1C1D) used as the primary background for the hero section. (90% role confidence, computed values)
- Canvas — canvas #23221F: color-3: computed rgb(35, 34, 31); AI role: Dark charcoal/brown (#23221F) used as the background for the stats section. (90% role confidence, computed values)
- Canvas — canvas #BB8554: color-4: computed rgb(187, 133, 84); AI role: Tan/caramel color (#BB8554) used for the final CTA and footer background. (90% role confidence, computed values)
- Text — text #3A342C: color-10: computed rgb(58, 52, 44); AI role: Another dark shade (#3A342C) used frequently for text in UI mockups. (85% role confidence, computed values)
- Border — border #D4D1CB: color-17: computed rgb(212, 209, 203); AI role: Light grey/tan (#D4D1CB) used for borders around UI mockup containers. (85% role confidence, computed values)
- Primary Action — primary action #4A6AAD: color-14: computed rgb(74, 106, 173); AI role: Blue (#4A6AAD) used for 'Received' badges and active states in the UI mockup. (80% role confidence, computed values)

## Exact computed CSS inventory

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

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "100px",
    "lineHeight": "73.3px",
    "letterSpacing": "-1.5px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "h1",
        "text": "The AI Command Center for Healthcare",
        "top": 351,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Clarity",
        "top": 424,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Care",
        "top": 424,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "66.7px",
    "lineHeight": "53.3px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Payers face more rules and less time. We make reviews fast and clear anyway.",
        "top": 1756,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Cost Containment Operations",
        "top": 8952,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Ready to see it in action?",
        "top": 10714,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "66.7px",
    "lineHeight": "63.3px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Request in. Rationale out.",
        "top": 2092,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "18px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 28,
    "contexts": [
      {
        "tag": "span",
        "text": "We just closed our Series A and we're growing.",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Join us",
        "top": 11,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "ClarityCare deploys AI agents inside health plans, payers and TPAs to automate the administrative an",
        "top": 1756,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "15px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 56,
    "contexts": [
      {
        "tag": "div",
        "text": "Knee MRI · CPT 73721",
        "top": 2142,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Intake",
        "top": 2210,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Organize",
        "top": 2210,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "15px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 79,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "AI Policy",
        "top": 79,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Team",
        "top": 79,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "Request received",
        "top": 2289,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Inputs organized",
        "top": 2358,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Evidence reviewed",
        "top": 2427,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "20px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "Clarity PPO Gold",
        "top": 2379,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Active through Dec 31",
        "top": 2433,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Outpatient MRI",
        "top": 2486,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "Provider portal",
        "top": 2304,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Clinical fax",
        "top": 2381,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Provider call",
        "top": 2457,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "28px",
    "lineHeight": "28px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "Knee MRI request",
        "top": 2302,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Member matched",
        "top": 2288,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Case inputs organized",
        "top": 2288,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "44px",
    "lineHeight": "44px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "1",
        "top": 6973,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2",
        "top": 7101,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "3",
        "top": 7229,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "100px",
    "lineHeight": "100px",
    "letterSpacing": "-1.5px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "98%",
        "top": 8650,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "6:1 ROI",
        "top": 8650,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "1 Day",
        "top": 8650,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "18.3px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "SOC 2 Type II",
        "top": 450,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "HIPAA Compliant",
        "top": 450,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "From intake to closed case. Handled end to end. Scroll to find out more.",
        "top": 736,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "18px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Standard",
        "top": 2123,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Target 24h",
        "top": 2128,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "28px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Case UM-2048",
        "top": 2116,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "28px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Electra isn’t a tool. It’s a trained agent that learns your internal processes. It works inside your",
        "top": 9792,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Suisse Intl Condensed",
    "fontStack": "\"Suisse Intl Condensed\", \"Arial Narrow\", -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "500",
    "size": "17px",
    "lineHeight": "18px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Click to unmute",
        "top": 1221,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "PP Right Serif",
    "fontStack": "\"PP Right Serif\", \"PP Right Serif Narrow\", ui-serif, Georgia, \"Times New Roman\", serif",
    "weight": "500",
    "size": "17px",
    "lineHeight": "17px",
    "letterSpacing": "-0.3px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "$20M RAISED",
        "top": 8,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#2B2A26",
    "alpha": 1,
    "cssValue": "rgb(43, 42, 38)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Click to unmute",
        "top": 842,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F4EEE6",
    "alpha": 1,
    "cssValue": "rgb(244, 238, 230)",
    "count": 7,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"ClarityCare AI\",\"url\":\"https://claritycar",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Talk to Us",
        "top": 1947,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 1950,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#23221F",
    "alpha": 1,
    "cssValue": "rgb(35, 34, 31)",
    "count": 4,
    "contexts": [
      {
        "tag": "section",
        "text": "ElectraBuilt around what matters most to payers.98%Approval match rate. AI-to-clinician alignment.6:",
        "top": 7762,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Talk to Us",
        "top": 9304,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 9308,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#BB8554",
    "alpha": 1,
    "cssValue": "rgb(187, 133, 84)",
    "count": 13,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 9765,
        "property": "::before-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 9765,
        "property": "::after-background"
      },
      {
        "tag": "footer",
        "text": "Schedule a demo to see how Electra transforms your operations.Ready to see it in action?Schedule a D",
        "top": 10548,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#5A1C1D",
    "alpha": 1,
    "cssValue": "rgb(90, 28, 29)",
    "count": 11,
    "contexts": [
      {
        "tag": "a",
        "text": "$20M RAISED",
        "top": 8,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "$20M RAISED",
        "top": 8,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "We just closed our Series A and we're growing.",
        "top": 12,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#3B3B27",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(58, 52, 44, 0.05)",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "Provider portalSubmitted at 09:41Received",
        "top": 2286,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#3F3C36",
    "alpha": 1,
    "cssValue": "rgb(63, 60, 54)",
    "count": 51,
    "contexts": [
      {
        "tag": "h2",
        "text": "Payers face more rules and less time. We make reviews fast and clear anyway.",
        "top": 1756,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "ClarityCare deploys AI agents inside health plans, payers and TPAs to automate the administrative an",
        "top": 1756,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Talk to Us",
        "top": 1938,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#EBE6E0",
    "alpha": 1,
    "cssValue": "rgb(235, 230, 224)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Case UM-2048Knee MRI · CPT 73721StandardTarget 24hIntakeOrganizeEvaluateRecommendCommunicateIncoming",
        "top": 2092,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#F9E2CC",
    "alpha": 1,
    "cssValue": "rgb(249, 226, 204)",
    "count": 51,
    "contexts": [
      {
        "tag": "div",
        "text": "$20M RAISEDWe just closed our Series A and we're growing.We just closed our Series A.Join us",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Schedule a demo to see how Electra transforms your operations.",
        "top": 10688,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Ready to see it in action?",
        "top": 10714,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#3A342C",
    "alpha": 1,
    "cssValue": "rgb(58, 52, 44)",
    "count": 88,
    "contexts": [
      {
        "tag": "div",
        "text": "Case UM-2048",
        "top": 2116,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Standard",
        "top": 2123,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 2198,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#F8F7F6",
    "alpha": 1,
    "cssValue": "rgb(248, 247, 246)",
    "count": 44,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1224,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1227,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "Click to unmute",
        "top": 1221,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#B57879",
    "alpha": 1,
    "cssValue": "rgb(181, 120, 121)",
    "count": 26,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 79,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 67,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Talk to Us",
        "top": 79,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#B5D8DE",
    "alpha": 1,
    "cssValue": "rgb(181, 216, 222)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Electra",
        "top": 7832,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "98%",
        "top": 8650,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#4A6AAD",
    "alpha": 1,
    "cssValue": "rgb(74, 106, 173)",
    "count": 25,
    "contexts": [
      {
        "tag": "span",
        "text": "Received",
        "top": 2311,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2473,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Evidence 03",
        "top": 2350,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#F6F1EA",
    "alpha": 1,
    "cssValue": "rgb(246, 241, 234)",
    "count": 30,
    "contexts": [
      {
        "tag": "span",
        "text": "Received",
        "top": 2311,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 2375,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2374,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#1F1F1B",
    "alpha": 0.45098039215686275,
    "cssValue": "rgba(32, 30, 27, 0.45)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "Click to unmute",
        "top": 1209,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#D4D1CB",
    "alpha": 1,
    "cssValue": "rgb(212, 209, 203)",
    "count": 16,
    "contexts": [
      {
        "tag": "div",
        "text": "Case UM-2048Knee MRI · CPT 73721StandardTarget 24hIntakeOrganizeEvaluateRecommendCommunicateIncoming",
        "top": 2092,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Standard",
        "top": 2123,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#808080",
    "alpha": 1,
    "cssValue": "rgb(128, 128, 128)",
    "count": 5,
    "contexts": [
      {
        "tag": "hr",
        "text": "",
        "top": 8988,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#F8F8F5",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(248, 247, 246, 0.3)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "Concurrent review",
        "top": 9040,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#9B8A3E",
    "alpha": 1,
    "cssValue": "rgb(155, 138, 62)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1964,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 8,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 16,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 17,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#3A372F",
    "alpha": 1,
    "cssValue": "rgb(58, 55, 47)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2198,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between major sections, creating an open, unhurried reading experience. Content within sections (like the UI mockups) is more tightly grouped.
- Corner style: Combination of sharp corners on large background blocks and subtle rounded corners on UI components.
- Radius: UI mockup containers and badges show visible border-radius (e.g., the 'Received' badge), while major page sections do not.
- Borders: Thin, solid lines are used extensively as dividers in the UI mockups, FAQ accordions, and to structure lists.
- Buttons: Buttons are typically simple, text-based with arrows, or have thin borders (like 'Schedule a Demo'). Ghost or outline styles are prevalent over solid fills.
- Content width: Content is generally centered with a max-width, leaving comfortable margins on desktop, though some elements like the video frame span wider.
- Density: Moderate density. The page uses ample whitespace, but sections like the UI mockups present dense information in a structured way.
- Evidence: Observed from the DOM screenshots: spacious layouts, thin borders on accordions (color-18, color-19), rounded corners on UI elements (color-17 border), and text-heavy but organized presentation.

## Sections

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

1. **Navbar — ClarityCare Navbar** (Home)
   A thin bar with few links and one right-aligned action keeps focus on the page, while the banner pill shares news without crowding.
   Capture: 1440×130px; page bounds 0–130px of 7972px; source section ID: `24b30838-9e69-4dc0-9745-c002c9d860c0`; image: https://media.designdetails.io/library/9ab6349ea222ef152202e66c267b9e35260113d5b72a2c28e93e9d07552d54ec/24b30838-9e69-4dc0-9745-c002c9d860c0.webp
   SECTION.md v3.2: `24b30838-9e69-4dc0-9745-c002c9d860c0` (deterministic evidence; editorial review pending)
2. **Hero — Large serif headline over video** (Home)
   Oversized condensed capitals on a deep red field set a confident tone, and the video below gives a human view of the product.
   Capture: 1440×1509px; page bounds 130–1639px of 7972px; source section ID: `6e01fe8a-df9f-4506-81dd-67a453b5abe1`; image: https://media.designdetails.io/library/f35c4a90b4dcc5018e2d88bfee34ea3499853a7aaea874a86d2e237dc6bfdad4/6e01fe8a-df9f-4506-81dd-67a453b5abe1.webp
   SECTION.md v3.2: `6e01fe8a-df9f-4506-81dd-67a453b5abe1` (deterministic evidence; editorial review pending)
3. **Other — Two-column problem statement with button** (Home)
   A big headline on the left and short supporting copy on the right state the value clearly, with one button giving a next step.
   Capture: 1440×373px; page bounds 1639–2012px of 7972px; source section ID: `9e6c6623-5176-4149-9df1-462480ba8403`; image: https://media.designdetails.io/library/fe1bd4db1410e8e3c52448a35d742ffe0ebb8c2e9ab2aaefa5513fe5ed2924f0/9e6c6623-5176-4149-9df1-462480ba8403.webp
   SECTION.md v3.2: `9e6c6623-5176-4149-9df1-462480ba8403` (deterministic evidence; editorial review pending)
4. **Process — Step list beside case screen** (Home)
   Faded steps with one highlighted entry sit next to a product card, showing how a request moves through review stage by stage.
   Capture: 1440×1080px; page bounds 2012–3092px of 7972px; source section ID: `84ddaa7a-9a46-4701-843b-ec45524f82a9`; image: https://media.designdetails.io/library/255f0fbf428a21380e0e8aadb94f3435f629d994effa2b476f88308d0fbae483/84ddaa7a-9a46-4701-843b-ec45524f82a9.webp
   SECTION.md v3.2: `84ddaa7a-9a46-4701-843b-ec45524f82a9` (deterministic evidence; editorial review pending)
5. **Features — Numbered benefits beside photo** (Home)
   A large photo paired with four numbered short points makes enterprise benefits easy to scan and puts a human face on the product.
   Capture: 1440×936px; page bounds 3092–4028px of 7972px; source section ID: `ce661bcf-3bf9-4907-8719-a331caceb685`; image: https://media.designdetails.io/library/9bfe163e50f4a88a0b7ca6a7dd91d097c2be33bad03106a3d607a1cfac949d89/ce661bcf-3bf9-4907-8719-a331caceb685.webp
   SECTION.md v3.2: `ce661bcf-3bf9-4907-8719-a331caceb685` (deterministic evidence; editorial review pending)
6. **Other — Blank spacer section** (Home)
   Empty cream space separates the sections and gives the eye a pause before the dark, image-led block that follows.
   Capture: 1440×234px; page bounds 4028–4262px of 7972px; source section ID: `1e4c5b34-7444-4832-aaaf-4b6982557d88`; image: https://media.designdetails.io/library/47ad370ae9cfa8bd582cdc1093a9bd8bd18f960c4338d450244871b21fe14c37/1e4c5b34-7444-4832-aaaf-4b6982557d88.webp
   SECTION.md v3.2: `1e4c5b34-7444-4832-aaaf-4b6982557d88` (deterministic evidence; editorial review pending)
7. **Stats — Painting backdrop with three key figures** (Home)
   Large numerals over a classical painting make results memorable, and the accordion list below groups use cases compactly on dark ground.
   Capture: 1440×1683px; page bounds 4262–5945px of 7972px; source section ID: `99cbfdb9-e05b-43b6-b94a-789dae23761b`; image: https://media.designdetails.io/library/14e4cc913f9fce4f98df9d3cd9cf8e9b8f0f35c865fb1a8abd77a8fe16aae75f/99cbfdb9-e05b-43b6-b94a-789dae23761b.webp
   SECTION.md v3.2: `99cbfdb9-e05b-43b6-b94a-789dae23761b` (deterministic evidence; editorial review pending)
8. **FAQ — Accordion questions beside portrait** (Home)
   Collapsed questions with one open answer in larger type keep the list short, and the portrait balances the text column.
   Capture: 1440×1103px; page bounds 5945–7048px of 7972px; source section ID: `659b238c-69f6-40a1-8e31-91594246eb2b`; image: https://media.designdetails.io/library/7393db581a1dc7d3a34f64e25d00b44d325178af90933b8cd7add8aa0fa8a340/659b238c-69f6-40a1-8e31-91594246eb2b.webp
   SECTION.md v3.2: `659b238c-69f6-40a1-8e31-91594246eb2b` (deterministic evidence; editorial review pending)
9. **CTA — Demo prompt above oversized wordmark footer** (Home)
   A warm orange block with one outlined button asks for a demo, and the huge wordmark with small link columns closes the page.
   Capture: 1440×924px; page bounds 7048–7972px of 7972px; source section ID: `fb56c513-5340-405a-96c4-eb771bd36ded`; image: https://media.designdetails.io/library/651ccb14614fcb8ae8fbfafcd96501602e4d3bef0d8b51292b38a767b79e6e24/fb56c513-5340-405a-96c4-eb771bd36ded.webp
   SECTION.md v3.2: `fb56c513-5340-405a-96c4-eb771bd36ded` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/b5d31663d9dfbdec8ffa7548f6233ad0878d1189668bf580341b1319e7aac70c/desktop_full-329ded34-2026-10-29T17-12-10-464Z.webp
- Mobile screenshot: https://media.designdetails.io/library/c138d9cfe3e40e1206f47ebd49201c6e345260057b924b9c9a513f868bcdd1be/mobile_full-329ded34-2026-10-29T17-12-47-464Z.webp
- Open Graph image: https://media.designdetails.io/library/5cd3ec3122f1df2c4c8bd0d9cb238104e3c4cf740c362fdadcbf4a27f3666f44/og_image-329ded34-2026-10-29T17-12-19-146Z.webp
- Full-page video: https://media.designdetails.io/library/aabeb62e538ce03d0fb4094ec52d8d48a71394122987a98724605de670c71c67/motion-1793297935701.mp4
- Video poster: https://media.designdetails.io/library/fa3ba711d32dde134e31dfecdf1e9da5d7bfda948acf6acf109665452783c340/motion-poster-1793297935701.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

- Interactive Scroll Linked UI Demonstrator
- Announcement Bar
- Navigation Bar
- Hero
- Video Frame
- Product UI
- Feature Collection
- Stat Block
- FAQ Accordion
- Footer
- Primary Button

## Quality rubric

Overall: 66.8/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: ClarityCare pairs a confident, unusual warm editorial palette and a condensed-serif/condensed-sans typographic system with one genuinely original interaction: a scroll-bound case-processing mockup that advances through named workflow stages and reverses correctly on scroll-up, directly visualizing the product's pitch rather than merely decorating the page. This, combined with domain-specific copy (CPT codes, CMS-0057-F, SOC 2) tightly matched to the mockup's content, gives the page real coherence between narrative and interface. However, much of the remaining page — the accordion FAQ, count-up stat animation, announcement bar, and numbered feature list beside a stock-feeling photo — are standard B2B SaaS patterns that happen to be reskinned in the burgundy/tan palette rather than reimagined. An unexplained cool-blue UI accent interrupts an otherwise disciplined warm color system, and the classical painting backdrop behind the stats block, while visually memorable, lacks any stated thematic tie to the healthcare-AI subject matter. The result is a well-executed, good system with one standout original idea, but not yet the pervasive, every-section rigor and restraint required for the next tier.

- Typography (15%): 68 — A deliberate two-voice system: a condensed uppercase serif (PP Right Serif) at large sizes with tight negative tracking for display/section headings, paired with Suisse Intl Condensed for body copy, labels, and UI mockup text. The pairing is applied consistently across hero, section headers, stat numbers, and accordion labels, giving the page a coherent editorial-meets-technical voice rather than a single decorative hero font.
- Color (10%): 65 — A cohesive warm palette (burgundy canvas, cream/beige canvas, charcoal canvas, tan footer) is deployed section-by-section rather than as one flat scheme, which keeps the site from reading corporate-generic. Text colors are consistently tuned dark-warm-neutral against each canvas. One cool blue (#4A6AAD) is introduced purely for functional UI states (badges, progress) inside mockups, which is a reasonable but slightly jarring departure from the warm system.
- Layout (20%): 68 — Multiple distinct, purpose-built section layouts are evident: a centered hero with announcement bar, a two-column copy+mockup section, a sticky/scroll-stepped process mockup with a vertical step list, a two-column image+numbered-feature list, a full-bleed painting with overlaid stat columns, a dark accordion-plus-copy split, and a footer with an oversized wordmark split across the width. Thin dividing lines and consistent max-width content columns give the page an organized editorial rhythm rather than a stack of generic blocks.
- Motion (20%): 70 — Motion goes beyond simple scroll-reveal fades: a scroll-linked case-processing mockup advances through five labeled stages (Intake, Organize, Evaluate, Recommend, Communicate) as the user scrolls, with the UI detail panel updating content at each stage, and the recording confirms it plays correctly in reverse when scrolling back up. This is paired with a scroll-triggered background darkening transition and count-up stat animations, plus standard but functional accordion reveals. The core interaction is bespoke and tied directly to explaining the product's workflow, not decorative.
- Originality (25%): 62 — The standout original idea is the scroll-bound case-processing demonstrator that narrates 'Request in. Rationale out.' directly through UI-state changes rather than static screenshots — a hard-to-substitute device purpose-built for this product's workflow story. This is reinforced by an unusual but coherent aesthetic choice: classical landscape paintings as backdrops for hard SaaS metrics, and a warm burgundy/tan palette replacing the default cold-blue B2B template. However, several supporting components — accordion FAQs, count-up stats, announcement bar, numbered feature list with image — are standard SaaS/fintech patterns merely reskinned in the warm palette, which tempers the overall novelty.
- Content (10%): 70 — Copy and visuals are tightly domain-specific (CPT codes, prior authorization, SOC 2 Type II, HIPAA, CMS-0057-F, NCQA) and the interactive mockup directly visualizes the claims made in adjacent copy ('See Electra process a knee MRI case with every citation attached' next to a mockup literally showing Case UM-2048 with cited evidence and a determination letter). Stats are plausible and tied to named operational outcomes (approval match rate, ROI, turnaround time) rather than generic vanity numbers.

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 deep oxblood hero with oversized serif type and a small shield mark gives an AI healthcare tool an institutional, trustworthy feel rather than a typical tech startup look. Below, the page settles into cream and black bands with a classical painting, stat trio and compact FAQ accordion, pacing dense compliance detail into easy chunks.

## Usage guidance

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