# Accessgrid — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://accessgrid.com/
Captured: 2026-10-22
CSS measured: 2026-10-22T06:25:26.785Z at 1440×1000 — https://accessgrid.com/
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

A clean, corporate B2B SaaS marketing page for a mobile wallet credential service. The design utilizes a minimal, high-contrast palette predominantly featuring white, light grays, and a stark dark section, accented with vibrant blue. Typography is a mix of geometric ABC Diatype for display headings and Inter for body copy. Visuals rely heavily on crisp UI mockups, subtle wireframe background graphics, and a highly technical aesthetic.

## Classification

- Industry: hardware
- Site type: Landing, Portfolio
- Business model: Software, Portfolio
- Styles: minimal, corporate, geometric, typographic, technical, b2b-saas
- Platform: Custom code
- Technology: Tailwind CSS, Three.js

## Typography

- Display: ABC Diatype — weight 500; size 64px; line-height 64px; tracking -2.2px; Regular (95% role confidence, computed values)
- Heading: ABC Diatype — weight 500; size 36px; line-height 40px; tracking -0.9px; Regular (95% role confidence, computed values)
- Body: Inter var — weight 400; size 15px; line-height 24px; tracking -0.1px; Regular (90% role confidence, computed values)
- Mono: Unidentified — weight 500; size 13px; line-height 24px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: Pure white used as the primary background for most of the page. (95% role confidence, computed values)
- Text — text #26262B: color-2: computed rgb(38, 38, 43); AI role: Dark gray/black (#26262B) used for primary headings and body text. (95% role confidence, computed values)
- Surface — surface #F7F7F8: color-4: computed rgb(247, 247, 248); AI role: Light gray (#F7F7F8) used for section backgrounds and card surfaces. (90% role confidence, computed values)
- Border — border #D9D9DE: color-11: computed rgb(217, 217, 222); AI role: Light gray (#D9D9DE) used for subtle borders on cards and UI elements. (90% role confidence, computed values)
- Muted Text — muted text #92939E: color-16: computed rgb(146, 147, 158); AI role: Medium gray (#92939E) used for secondary or less emphasized text. (85% role confidence, computed values)
- Primary Action — primary action #3275FF: color-15: computed rgb(50, 117, 255); AI role: Vibrant blue (#3275FF) used for primary buttons and key interactive elements. (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": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "20px",
    "letterSpacing": "0px",
    "traits": "Regular",
    "count": 21,
    "contexts": [
      {
        "tag": "p",
        "text": "Learn, create, innovate: Step-by-step access control & NFC tutorials",
        "top": 125,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Our resources include the bit format comparison and NFC access control guides",
        "top": 125,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Our customers stories are the only ones that matter",
        "top": 346,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "h2",
        "text": "Guides",
        "top": 100,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Tools",
        "top": 100,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Case studies",
        "top": 321,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "36px",
    "lineHeight": "40px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "We've done the hard work",
        "top": 1193,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "so you don't have to.",
        "top": 1313,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Never forget credentials",
        "top": 2300,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "64px",
    "lineHeight": "64px",
    "letterSpacing": "-2.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Mobile wallet credentials made easy.",
        "top": 228,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "36px",
    "lineHeight": "40px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "We've done the hard work of getting widespread hardware manufacturer support for our credential, and",
        "top": 1196,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 43,
    "contexts": [
      {
        "tag": "button",
        "text": "Developers",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Pricing",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "About",
        "top": 22,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "12px",
    "lineHeight": "20px",
    "letterSpacing": "0px",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "p",
        "text": "We're rolling out to the Denver office next week. Any gotchas with Signo readers on Seos?",
        "top": 1752,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "None for Signo 40K. I'll send the reader config profile and a one-page install guide for your facili",
        "top": 1852,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Want me on the go-live call?Happy to sit in.",
        "top": 1936,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "Issue credentials that work on more than 50 different readers today. View all readers",
        "top": 1632,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Everything from employee badges to student housing. View customer stories",
        "top": 1632,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "No extra charge for rollout support. Just real people, around the clock.",
        "top": 1632,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "B",
        "top": 2374,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "e",
        "top": 2374,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "n",
        "top": 2374,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Room",
        "top": 2900,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Next Check-In",
        "top": 2984,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Room",
        "top": 2900,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "0px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "9:41",
        "top": 2578,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "9:41",
        "top": 2578,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "9:41",
        "top": 2578,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "I can’t get into the gym, can you share a key pass?!",
        "top": 2698,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Sure, I’ll send now!",
        "top": 2768,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Landed! Can you share the room key with me?",
        "top": 2698,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "iPhone is findable",
        "top": 2916,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Express Cards and Keys Available",
        "top": 2944,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "iPhone is findable",
        "top": 2916,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "19px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Add a comment or send",
        "top": 3023,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Tulsa, Oklahoma",
        "top": 2691,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Add a comment or send",
        "top": 3023,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "11px",
    "lineHeight": "19px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Resident key",
        "top": 3167,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Resident key",
        "top": 2972,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Room key",
        "top": 3167,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "We make it easy to issue and manage NFC keys for Apple and Google Wallet via API for startups, acces",
        "top": 5431,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Infrastructure spans providers and regions, protected by intrusion detection, DDoS mitigation, firew",
        "top": 6513,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The latest features, updates, improvements, and architectural releases from the AccessGrid team.",
        "top": 7149,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "30px",
    "letterSpacing": "0px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Static IP (ex http://12.202.171.178:81)",
        "top": 4621,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The user with SDK permissions enabled",
        "top": 4705,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The password for the user with SDK permissions enabled",
        "top": 4789,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "510",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "101",
        "top": 2924,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "4250",
        "top": 2924,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "0px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Dozens of systems and readers are compatible today.",
        "top": 791,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Dozens of systems and readers",
        "top": 793,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "19px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Jeff",
        "top": 2674,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Sandra",
        "top": 2674,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "510",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Sep 1–5, 2026",
        "top": 2701,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Samara Mitchel",
        "top": 2832,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Works with the protocolsyou already love and use",
        "top": 5129,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "you already love and use",
        "top": 5194,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "10px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Hope Ave",
        "top": 2760,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "742 W 23RD STREET, NEW YORK, NY 10011",
        "top": 2858,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "10px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Kellie McPherson",
        "top": 2857,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Kellie McPherson",
        "top": 2857,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "650",
    "size": "9px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "CALLE RETAMA 22, ZA...",
        "top": 2685,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "GRAND HOTEL, S...",
        "top": 2685,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "6px",
    "lineHeight": "7px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "742 W 23RD STREET, NEW YORK, NY 10011",
        "top": 2873,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "742 W 23RD STREET, NEW YORK, NY 10011",
        "top": 2873,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "510",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Available now",
        "top": 3008,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "510",
    "size": "18px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "TLJ Hotel",
        "top": 2832,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "17px",
    "lineHeight": "26px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Issue mobile credentials to any reader, with any access control system or custom back end. Go live i",
        "top": 444,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "17px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Kellie McPherson",
        "top": 2834,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "440",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Nov 4–7, 2026",
        "top": 2701,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Put your brand front and center using our template builder, with previews for both platforms",
        "top": 4621,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "510",
    "size": "15px",
    "lineHeight": "20px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Reservations",
        "top": 3004,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Hold near reader",
        "top": 2941,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "510",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Couples massage",
        "top": 3048,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Finance",
        "top": 2778,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": null,
    "fontStack": "-apple-system, \"SF Pro Text\", \"Inter var\", ui-sans-serif, system-ui, sans-serif",
    "weight": "540",
    "size": "9px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Membership tier",
        "top": 2816,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": null,
    "fontStack": "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
    "weight": "500",
    "size": "13px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 212,
    "contexts": [
      {
        "tag": "span",
        "text": "▓",
        "top": 2614,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "░",
        "top": 2614,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "▒",
        "top": 2614,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "ABC Diatype",
    "fontStack": "\"ABC Diatype\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 155,
    "contexts": [
      {
        "tag": "span",
        "text": "HID Signo 20",
        "top": 1706,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "HID Signo 40",
        "top": 1736,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "HID Signo Express",
        "top": 1766,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "Inter var",
    "fontStack": "\"Inter var\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "11px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 132,
    "contexts": [
      {
        "tag": "span",
        "text": "Seos",
        "top": 1709,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Seos",
        "top": 1739,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Seos",
        "top": 1769,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#3B3B45",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(58, 58, 64, 0.1)",
    "count": 17,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 0,
        "property": "::after-background"
      },
      {
        "tag": "div",
        "text": "Works with the protocolsyou already love and use",
        "top": 5129,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#26262B",
    "alpha": 1,
    "cssValue": "rgb(38, 38, 43)",
    "count": 80,
    "contexts": [
      {
        "tag": "button",
        "text": "Developers",
        "top": 22,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "About",
        "top": 22,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Guides",
        "top": 100,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 234,
    "contexts": [
      {
        "tag": "a",
        "text": "Get started",
        "top": 24,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Guides Learn, create, innovate: Step-by-step access control & NFC tutorials Tools Our resources incl",
        "top": 85,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Guides Learn, create, innovate: Step-by-step access control & NFC tutorials",
        "top": 85,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F7F7F8",
    "alpha": 1,
    "cssValue": "rgb(247, 247, 248)",
    "count": 74,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 361,
        "property": "svg-fill"
      },
      {
        "tag": "section",
        "text": "Mobile wallet credentials made easy. Issue mobile credentials to any reader, with any access control",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1704,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 24,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 430,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 191,
        "property": "svg-fill"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2652,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#798490",
    "alpha": 1,
    "cssValue": "color(display-p3 0.4816 0.5177 0.5584)",
    "count": 120,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2275,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#6C7680",
    "alpha": 1,
    "cssValue": "color(display-p3 0.4314 0.4627 0.498)",
    "count": 10,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2314,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#1B1B1E",
    "alpha": 1,
    "cssValue": "rgb(27, 27, 30)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Never forget credentialswherever you go. Corporate ID Multifamily Hospitality ▓░▒▓░ ▓▒░▓░▓░▓ ▒▒▒▓░▓▒",
        "top": 2140,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#3C3C3F",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(58, 58, 64, 0.3)",
    "count": 19,
    "contexts": [
      {
        "tag": "div",
        "text": "▓░▒▓░ ▓▒░",
        "top": 2454,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#EEEEF0",
    "alpha": 1,
    "cssValue": "rgb(238, 238, 240)",
    "count": 72,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 186,
        "property": "svg-stroke"
      },
      {
        "tag": "g",
        "text": "",
        "top": 203,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 203,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#D9D9DE",
    "alpha": 1,
    "cssValue": "rgb(217, 217, 222)",
    "count": 170,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 200,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 252,
        "property": "svg-stroke"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 416,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#42424A",
    "alpha": 1,
    "cssValue": "rgb(66, 66, 74)",
    "count": 157,
    "contexts": [
      {
        "tag": "span",
        "text": "HID Signo 20",
        "top": 1706,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "We're rolling out to the Denver office next week. Any gotchas with Signo readers on Seos?",
        "top": 1752,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2644,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#4D4E57",
    "alpha": 1,
    "cssValue": "rgb(77, 78, 87)",
    "count": 21,
    "contexts": [
      {
        "tag": "p",
        "text": "Issue mobile credentials to any reader, with any access control system or custom back end. Go live i",
        "top": 444,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "Go live in less than 30 days.",
        "top": 473,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2702,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#0A0A0A",
    "alpha": 1,
    "cssValue": "rgb(10, 10, 10)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 6365,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#3275FF",
    "alpha": 1,
    "cssValue": "rgb(50, 117, 255)",
    "count": 18,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 5647,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 5647,
        "property": "svg-stroke"
      },
      {
        "tag": "i",
        "text": "",
        "top": 7094,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#92939E",
    "alpha": 1,
    "cssValue": "rgb(146, 147, 158)",
    "count": 311,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1713,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "Seos",
        "top": 1709,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Multifamily",
        "top": 2456,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#F7F7F8",
    "alpha": 0.9019607843137255,
    "cssValue": "rgba(247, 247, 248, 0.9)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Guides Learn, create, innovate: Step-by-step access control & NFC tutorials Tools Our resources incl",
        "top": 82,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#747583",
    "alpha": 1,
    "cssValue": "rgb(116, 117, 131)",
    "count": 26,
    "contexts": [
      {
        "tag": "h2",
        "text": "We've done the hard work of getting widespread hardware manufacturer support for our credential, and",
        "top": 1196,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "iPhone is findable",
        "top": 2916,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "2A",
        "top": 2733,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#5E5F6B",
    "alpha": 1,
    "cssValue": "rgb(94, 95, 107)",
    "count": 55,
    "contexts": [
      {
        "tag": "p",
        "text": "Learn, create, innovate: Step-by-step access control & NFC tutorials",
        "top": 125,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 1560,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "2. Select & configure your reader",
        "top": 4732,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.058823529411764705,
    "cssValue": "rgba(255, 255, 255, 0.06)",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "Resident key Add a comment or send",
        "top": 3013,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 3021,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#272727",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(38, 38, 43, 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1704,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#B8B9C1",
    "alpha": 1,
    "cssValue": "rgb(184, 185, 193)",
    "count": 41,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 41,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 169,
        "property": "svg-fill"
      },
      {
        "tag": "p",
        "text": "Finance",
        "top": 2778,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#3A3A40",
    "alpha": 1,
    "cssValue": "rgb(58, 58, 64)",
    "count": 136,
    "contexts": [
      {
        "tag": "div",
        "text": "▓░▒▓░ ▓▒░",
        "top": 2454,
        "property": "border"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2699,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "9:41",
        "top": 2578,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#285DF5",
    "alpha": 1,
    "cssValue": "rgb(40, 93, 245)",
    "count": 27,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 318,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "Key issued",
        "top": 2774,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "deliver outcomes that matter",
        "top": 3625,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#1A1A33",
    "alpha": 0.0392156862745098,
    "cssValue": "rgba(38, 38, 43, 0.04)",
    "count": 132,
    "contexts": [
      {
        "tag": "span",
        "text": "Seos",
        "top": 1709,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(255, 255, 255, 0.12)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Resident key",
        "top": 2826,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Check InChecked in",
        "top": 2988,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 2690,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#EFEFF1",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(239, 239, 241, 0.5)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5745,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#3175FF",
    "alpha": 0.34901960784313724,
    "cssValue": "rgba(50, 117, 255, 0.35)",
    "count": 1,
    "contexts": [
      {
        "tag": "li",
        "text": "All enterprise features included in all plans We've made our best features available to all customer",
        "top": 7085,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#EEF5FF",
    "alpha": 1,
    "cssValue": "rgb(238, 245, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "1. Create a card template",
        "top": 4573,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "I understand that compatible readers are required to issue NFC keys for Apple and Android devices wi",
        "top": 4845,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#045FFE",
    "alpha": 1,
    "cssValue": "color(display-p3 0.1569 0.3647 0.9608)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "We've done the hard work",
        "top": 1193,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#FFFFFF",
    "alpha": 0.9019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.9)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "Developers Pricing About Sign in Get started",
        "top": 16,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#3B3B3B",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(58, 58, 64, 0.05)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "See how it works",
        "top": 632,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#333337",
    "alpha": 1,
    "cssValue": "rgb(51, 51, 55)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "I can’t get into the gym, can you share a key pass?!",
        "top": 2698,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#141F57",
    "alpha": 1,
    "cssValue": "rgb(20, 31, 87)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "I understand that compatible readers are required to issue NFC keys for Apple and Android devices wi",
        "top": 4853,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#3E71F6",
    "alpha": 1,
    "cssValue": "rgb(62, 113, 246)",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Get started",
        "top": 632,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#1893FF",
    "alpha": 1,
    "cssValue": "rgb(24, 147, 255)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Sure, I’ll send now!",
        "top": 2768,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 3021,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#36363A",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(54, 54, 58, 0.7)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Jeff Tulsa, Oklahoma",
        "top": 2670,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#43434B",
    "alpha": 1,
    "cssValue": "rgb(67, 67, 75)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "ACS",
        "top": 5603,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#000000",
    "alpha": 0.1411764705882353,
    "cssValue": "rgba(0, 0, 0, 0.14)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "2A",
        "top": 2733,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#D9E8FF",
    "alpha": 1,
    "cssValue": "rgb(217, 232, 255)",
    "count": 9,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1539,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "1. Create a card template",
        "top": 4573,
        "property": "border"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 4583,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#D9D9DF",
    "alpha": 1,
    "cssValue": "color(display-p3 0.851 0.851 0.8706)",
    "count": 1,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 553,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#BCD7FF",
    "alpha": 1,
    "cssValue": "rgb(188, 215, 255)",
    "count": 8,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1534,
        "property": "svg-stroke"
      },
      {
        "tag": "i",
        "text": "",
        "top": 4856,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#FFFFFF",
    "alpha": 0.0392156862745098,
    "cssValue": "rgba(255, 255, 255, 0.04)",
    "count": 5,
    "contexts": [
      {
        "tag": "li",
        "text": "4BKellie McPhersonKellie McPhersonKey issued",
        "top": 2763,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#6C757D",
    "alpha": 1,
    "cssValue": "rgb(108, 117, 125)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Finance░░▓░▓▓░▒░░ ▓▓░▒▒▓░▓",
        "top": 2693,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#DBDBDE",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(217, 217, 222, 0.3)",
    "count": 3,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 7235,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#D51717",
    "alpha": 1,
    "cssValue": "rgb(213, 23, 23)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2652,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#FFFFFF",
    "alpha": 0.1607843137254902,
    "cssValue": "rgba(255, 255, 255, 0.16)",
    "count": 4,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 3138,
        "property": "svg-stroke"
      }
    ]
  }
]
```

### 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 a breathable, uncrowded layout.
- Corner style: Consistently rounded corners across UI elements, cards, and buttons.
- Radius: Medium to large border radii on product mockups and buttons, softening the technical feel.
- Borders: Subtle, 1px solid borders used to define cards and input fields without adding visual noise.
- Buttons: Solid primary buttons with rounded corners, alongside ghost or outline variants for secondary actions.
- Content width: Content is constrained to a central max-width column, typical of modern SaaS marketing pages.
- Density: Low density, prioritizing readability and focus on single concepts per section.
- Evidence: Observed via the generous white space, 1px #D9D9DE borders, and rounded shapes in the hero and card components.

## Sections

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

1. **Hero — Mobile wallet credentials made easy** (Home)
   AI suggestion (98% confidence): Complete page-opening hero with navigation, bold value proposition, supporting copy, dual CTAs, and a large mobile-wallet product visual.
   Capture: 1440×750px; page bounds 0–750px of 8923px; source section ID: `039ccba7-49b5-4bb8-a839-ece355d78aad`; image: https://media.designdetails.io/library/4f05856c08be34d6201936bd77b187fcb9e4e0b9282b44ff8bcc8f765a18a72d/039ccba7-49b5-4bb8-a839-ece355d78aad.webp
   SECTION.md v3.2: `039ccba7-49b5-4bb8-a839-ece355d78aad` (deterministic evidence; editorial review pending)
2. **Features — Accessgrid Features** (Home)
   Reusable feature composition from Home, organized around “Accessgrid Features”.
   Capture: 1440×286px; page bounds 750–1036px of 8923px; source section ID: `378089b6-0867-4438-a2d7-558fdf6c2fad`; image: https://media.designdetails.io/library/bcbf74b58f4afc13dc211989a82ac296183c38cd814f76bba33dbde601616a0d/section_crop-378089b6-2026-10-22T06-25-36-542Z.webp
   SECTION.md v3.2: `378089b6-0867-4438-a2d7-558fdf6c2fad` (deterministic evidence; editorial review pending)
3. **Features — Never forget credentials wherever you go.** (Home)
   Reusable feature composition from Home, organized around “Never forget credentials wherever you go.”.
   Capture: 1440×1288px; page bounds 2140–3428px of 8923px; source section ID: `7c02a8b3-a810-4d72-8f46-b5d4b378dbd6`; image: https://media.designdetails.io/library/20185d944de56d1285ff006f1be4deecb04ebab0661b3ae20e8b98ee8771ba6f/section_crop-7c02a8b3-2026-10-22T06-25-38-449Z.webp
   SECTION.md v3.2: `7c02a8b3-a810-4d72-8f46-b5d4b378dbd6` (deterministic evidence; editorial review pending)
4. **Features — Connect to existing systems. Everything you like.** (Home)
   Reusable feature composition from Home, organized around “Connect to existing systems. Everything you like.”.
   Capture: 1440×990px; page bounds 5259–6249px of 8923px; source section ID: `fa852917-5b26-441e-bdb7-a42b4a48e1ea`; image: https://media.designdetails.io/library/f4b15385dea134a33c5dce639036ba8c2e0cb1cf11557904ad16933d8fc2194f/section_crop-fa852917-2026-10-22T06-25-41-594Z.webp
   SECTION.md v3.2: `fa852917-5b26-441e-bdb7-a42b4a48e1ea` (deterministic evidence; editorial review pending)
5. **Features — Changelog** (Home)
   Reusable feature composition from Home, organized around “Changelog”.
   Capture: 1440×896px; page bounds 6925–7821px of 8923px; source section ID: `41cbc46c-0411-401b-b8ce-7393da6a5081`; image: https://media.designdetails.io/library/b1753485fb09181f101cb6b15622d82f1c777dd85c0f70fa0cd8cea6958deade/section_crop-41cbc46c-2026-10-22T06-25-43-626Z.webp
   SECTION.md v3.2: `41cbc46c-0411-401b-b8ce-7393da6a5081` (deterministic evidence; editorial review pending)
6. **Feature Grid — Hardware support, use-case coverage, and expert support** (Home)
   AI suggestion (96% confidence): Complete three-column feature section with a strong centered statement and distinctive supporting visuals for reader compatibility, customer coverage, and rollout support.
   Capture: 1440×1071px; page bounds 1044–2115px of 8923px; source section ID: `e3eae43c-94c0-423e-9111-d4c2df6b0100`; image: https://media.designdetails.io/library/30c0f4eb254ccbd6b61fbc369f61ddefdd93d915a5368f698edc8839412afa54/e3eae43c-94c0-423e-9111-d4c2df6b0100.webp
   SECTION.md v3.2: `e3eae43c-94c0-423e-9111-d4c2df6b0100` (deterministic evidence; editorial review pending)
7. **Editorial — Customer Outcomes Case Studies** (Home)
   AI suggestion (96% confidence): Complete customer-stories section with a clear heading, supporting CTA, and a full three-card case-study grid.
   Capture: 1440×780px; page bounds 3437–4217px of 8923px; source section ID: `00105df4-38d6-43fc-9b7c-aefe24ad7b39`; image: https://media.designdetails.io/library/4a14cad442b2e8bcc6563a75b71a380847ae505738eb734235a6ba8f48a554b4/00105df4-38d6-43fc-9b7c-aefe24ad7b39.webp
   SECTION.md v3.2: `00105df4-38d6-43fc-9b7c-aefe24ad7b39` (deterministic evidence; editorial review pending)
8. **Process — Five-Step Credential Setup** (Home)
   AI suggestion (97% confidence): Self-contained onboarding process combining five ordered steps, a product interface preview, and a row of compatible-system logos.
   Capture: 1440×1062px; page bounds 4220–5282px of 8923px; source section ID: `9489870a-8951-4748-99ff-fe0828a38b68`; image: https://media.designdetails.io/library/fe851d50ab3ab6196c6b4dc734775b18523339652335f2df969defd179182982/9489870a-8951-4748-99ff-fe0828a38b68.webp
   SECTION.md v3.2: `9489870a-8951-4748-99ff-fe0828a38b68` (deterministic evidence; editorial review pending)
9. **Stats — Built for Reliability at Any Scale** (Home)
   AI suggestion (95% confidence): Complete reliability section combining a distinctive global infrastructure visual, explanatory copy, status-page link, and a four-metric proof bar.
   Capture: 1440×684px; page bounds 6250–6934px of 8923px; source section ID: `2ab46264-b529-42a5-8b6d-fc4c45e0ba7f`; image: https://media.designdetails.io/library/1c336a42b31b62d74119a8b62545c2058d3ef9bb9d6c6f091810f00f22eccded/2ab46264-b529-42a5-8b6d-fc4c45e0ba7f.webp
   SECTION.md v3.2: `2ab46264-b529-42a5-8b6d-fc4c45e0ba7f` (deterministic evidence; editorial review pending)
10. **CTA — Mobile credentials conversion CTA** (Home)
   AI suggestion (98% confidence): Complete, spacious conversion section with a bold value proposition and paired “Get started” and “Contact sales” actions.
   Capture: 1440×554px; page bounds 7800–8354px of 8923px; source section ID: `06f47a07-49c0-4f2b-a11b-73786983345d`; image: https://media.designdetails.io/library/5cb561b7e996c3a7fd7be191791964db95b18ef1137d742aac59d4845bf74b24/06f47a07-49c0-4f2b-a11b-73786983345d.webp
   SECTION.md v3.2: `06f47a07-49c0-4f2b-a11b-73786983345d` (deterministic evidence; editorial review pending)
11. **Footer — AccessGrid link footer** (Home)
   AI suggestion (97% confidence): Complete page footer with organized navigation columns, oversized brand treatment, copyright, and social links.
   Capture: 1440×568px; page bounds 8355–8923px of 8923px; source section ID: `4111b5a6-9805-48fb-99d3-cc135410e0e3`; image: https://media.designdetails.io/library/f238d64450ea063f343b1e13c56aed603f8e46aedaa8f06b31840dbf82d529c2/4111b5a6-9805-48fb-99d3-cc135410e0e3.webp
   SECTION.md v3.2: `4111b5a6-9805-48fb-99d3-cc135410e0e3` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/33e11818724474287db761392467a6c8b6d9defa24731058ab07244ff4ff3bed/desktop_full-5cd9d530-2026-10-22T06-25-26-818Z.webp
- Mobile screenshot: https://media.designdetails.io/library/694da8ba46674cc0aa20bc5a3767a632329deee59d06ef7ea6a8d7d60fc4865a/mobile_full-5cd9d530-2026-10-22T06-26-13-294Z.webp
- Open Graph image: https://media.designdetails.io/library/52e0194abe1d2d33c4c97340c2669b8288013279d0abfdb6282dec295a26fbb1/og_image-5cd9d530-2026-10-22T06-25-34-747Z.webp
- Full-page video: https://media.designdetails.io/library/d1bc428c519842675a602a1d77132d27d6010fb2f7c4bab55f5e4453e81c9a7b/motion-1792651429883.mp4
- Video poster: https://media.designdetails.io/library/4e9d35caec45c06b712df767e35d6388b7472ed2d303ad9569d9951d68778d62/motion-poster-1792651429883.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
- Logo Strip
- Feature Collection
- Product UI
- Editorial Card
- Footer
- Dark Mode Feature Section
- Step By Step UI Walkthrough

## Quality rubric

Overall: 55.63/100 (Competent)
Evidence coverage: 80%
Judge tier: Competent
Verdict: AccessGrid's marketing site is a polished, professionally executed B2B SaaS page: a disciplined ABC Diatype/Inter typographic system, a restrained neutral-plus-blue palette, and technically grounded content (real reader models, API fields, protocol logos) integrated into believable product mockups. But structurally it is assembled almost entirely from recognizable SaaS template patterns — logo marquee, dot-globe stat counter, hub-and-spoke integrations diagram, numbered onboarding wizard, repeated fade-up scroll reveals — executed competently but without a single hard-to-substitute idea. This places it solidly in the competent tier: clean craft within a very familiar idiom, short of the systemic originality and varied motion choreography required for 'good' or higher.

- Typography (15%): 66 — A coherent two-typeface system (ABC Diatype display/headings, Inter body, monospace for technical bits) is applied consistently across hero, section headers, UI mockups, and footer. Tight tracking on the 64px hero (-2.2px) and 36px heading (-0.9px) shows deliberate display sizing. However, the hierarchy is fairly conventional SaaS scaling with no distinctive typographic invention beyond careful tracking/weight choices.
- Color (10%): 58 — Restrained neutral palette (white/near-white/grays) with a single vibrant blue accent (#3275FF) and one dark section (#1B1B1E) for contrast. This is competent and consistent but a very common SaaS formula—light canvas + one accent blue + one dark interlude—offering little differentiation.
- Layout (20%): 62 — Standard but well-executed B2B SaaS architecture: sticky nav, hero with mockup, logo strip, value-prop grid, dark feature interlude, case-study cards, step-by-step walkthrough, integration diagram, stats/globe, changelog, CTA, footer. Generous whitespace and consistent max-width column give it a clean rhythm, but the structure itself is a well-worn template assembled competently rather than reimagined.
- Motion (20%): Inconclusive — Gemini observation describes generic fade/translate-up entrances repeated across nearly every section plus an infinite logo marquee and a rotating/counting globe, suggesting a competent but formulaic scroll-animation library applied uniformly. However, no easing, timing, frame-rate, or interaction-state evidence is given, and the recording only captures one scroll pass, so precision of execution cannot be verified.
- Originality (25%): 40 — Every component—sticky nav with pill CTA, logo marquee, dark feature interlude, case-study cards, numbered step walkthrough, integration hub-and-spoke diagram, rotating dot-globe with counters, changelog feed—is a widely recognized SaaS marketing pattern. The craftsmanship is clean but there is no hard-to-substitute idea; this is template-level execution of the current Linear/Stripe-adjacent aesthetic.
- Content (10%): 64 — Content and design are reasonably integrated: technical specificity (reader models, API field names, protocol logos) is woven into visuals like the chat mockup, integration diagram, and reader search table, giving the marketing copy credibility. The UI mockups (phone wallet, card template builder, chat support) directly support the product narrative rather than being generic stock imagery.

Coverage: 80% 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 realistic phone mockup with a glowing blue wallet card grounds the abstract idea of NFC credentials in something familiar, while rows of partner and reader logos build quick trust. The long page alternates light sections with one dark band for the device gallery, pacing the technical detail so it stays easy to scan.

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