# Badgey — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://apps.marcoluthi.com/badgey
Captured: 2026-11-03
CSS measured: 2026-11-03T04:53:25.033Z at 1440×1000 — https://badgey.marcoluthi.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: claude-sonnet-5

## Design direction

Badgey features a clean, minimal, and highly polished design language reminiscent of Apple's aesthetic. It uses generous whitespace, large lightweight typography, and soft, colorful gradients within the product UI mockups to contrast against the neutral light gray and stark black backgrounds. The layout is spacious and centered, focusing entirely on the product's visual presentation.

## Classification

- Industry: productivity
- Site type: Store
- Business model: Shopping
- Styles: minimal, corporate, soft, apple-esque
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: Unidentified — weight 300; size 104px; line-height 98.8px; tracking -3.1px; Regular (95% role confidence, computed values)
- Heading: Unidentified — weight 300; size 72px; line-height 72px; tracking -1.8px; Regular (95% role confidence, computed values)
- Body: Unidentified — weight 400; size 18px; line-height 29.3px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #F4F4F4: color-1: computed rgb(244, 244, 244); AI role: #F4F4F4 used as the primary light background color. (95% role confidence, computed values)
- Text — text #000000: color-3: computed rgb(0, 0, 0); AI role: #000000 used for primary headings and text on light backgrounds. (95% role confidence, computed values)
- Border — border #E0E0E3: color-19: computed rgb(224, 224, 227); AI role: #E0E0E3 used for dividers in the FAQ and footer sections. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-4: computed rgb(255, 255, 255); AI role: #FFFFFF used for badge backgrounds and some UI elements. (90% role confidence, computed values)
- Muted Text — muted text #6C6C72: color-7: computed rgb(108, 108, 114); AI role: #6C6C72 used for secondary text and descriptions. (90% role confidence, computed values)
- Canvas — canvas #111113: color-5: computed rgb(17, 17, 19); AI role: #111113 used for dark section backgrounds. (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": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "72px",
    "lineHeight": "72px",
    "letterSpacing": "-1.8px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Aurora.",
        "top": 6542,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "On us.",
        "top": 6542,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Wear your name.",
        "top": 9209,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "60px",
    "lineHeight": "63px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "A badge for every occasion.",
        "top": 5236,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Good to know.",
        "top": 7676,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "104px",
    "lineHeight": "98.8px",
    "letterSpacing": "-3.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Wear your name.",
        "top": 200,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Or slip it in a pocket.",
        "top": 808,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "iPhone & iPad · iOS 26 or later",
        "top": 9647,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Support",
        "top": 9623,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 9623,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "29.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Top first into a chest pocket, and your name stays on show above the edge.",
        "top": 873,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Work, conferences, meetups. Swipe between them, and tap the QR button to flip one over and share you",
        "top": 5378,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Get a free code for Aurora, the northern lights animation for Live badges, sent to your inbox.",
        "top": 6638,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "43.2px",
    "lineHeight": "49.7px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Alex Chen",
        "top": 5884,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Sofia Martinez",
        "top": 5903,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Maya Brooks",
        "top": 5884,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "40px",
    "lineHeight": "46px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Alex Chen",
        "top": 1109,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Maya Brooks",
        "top": 1109,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Sofia Martinez",
        "top": 1124,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "17.3px",
    "lineHeight": "25.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "iOS Engineer · Speaker",
        "top": 5930,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Product Designer",
        "top": 5957,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Travel Writer",
        "top": 5930,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "iOS Engineer · Speaker",
        "top": 1132,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Travel Writer",
        "top": 1132,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Product Designer",
        "top": 1152,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Name badge app for iPhone",
        "top": 160,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Promo codes",
        "top": 6502,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Photo, name, role and lanyard colour, edited right on the card.",
        "top": 6150,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "Your email",
        "top": 7263,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "12.8px",
    "lineHeight": "14.7px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Maya Brooks",
        "top": 521,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Emma Rossi",
        "top": 481,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "5.1px",
    "lineHeight": "7.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Travel Writer",
        "top": 537,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Designer",
        "top": 497,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "32.5px",
    "lineHeight": "37.4px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Your Name",
        "top": 9043,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "21.6px",
    "lineHeight": "24.8px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Priya Nair",
        "top": 296,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "20px",
    "lineHeight": "23px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Alex Chen",
        "top": 281,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "32.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Badgey turns your iPhone into a name badge that faces the people you meet, on a lanyard or in your p",
        "top": 323,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "17.3px",
    "lineHeight": "25.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "badgey.marcoluthi.com",
        "top": 5878,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "18.4px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Jonas Keller",
        "top": 500,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Badgey",
        "top": 9623,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Aurora · Live badge",
        "top": 7297,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "More in the privacy policy and on the support page.",
        "top": 8388,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "21.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "One code per email, while they last. Your address is only used to send it. Privacy policy",
        "top": 7329,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Your role",
        "top": 9084,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "10.4px",
    "lineHeight": "12px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Leo Martin",
        "top": 169,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "8.6px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Speaker",
        "top": 321,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "8px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "iOS Engineer · Speaker",
        "top": 305,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "6.7px",
    "lineHeight": "10.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "badgey.marcoluthi.com",
        "top": 493,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "6.4px",
    "lineHeight": "9.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Organiser",
        "top": 520,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "4.2px",
    "lineHeight": "6.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Volunteer",
        "top": 182,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Edit",
        "top": 1146,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Edit",
        "top": 1161,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Edit",
        "top": 1169,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "16.2px",
    "lineHeight": "24.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Edit",
        "top": 5958,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Edit",
        "top": 5990,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Edit",
        "top": 5967,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "23.8px",
    "lineHeight": "35.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "New Badge",
        "top": 5798,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "17px",
    "lineHeight": "25.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "9:41",
        "top": 771,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Swing",
        "top": 802,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "900",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "+",
        "top": 6095,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Badgey App ©",
        "top": 1325,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "© 2026 Marco Lüthi. Apple, iPhone and App Store are trademarks of Apple Inc.",
        "top": 9719,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", Inter, \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "900",
    "size": "11px",
    "lineHeight": "7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "+",
        "top": 1217,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F4F4F4",
    "alpha": 1,
    "cssValue": "rgb(244, 244, 244)",
    "count": 7,
    "contexts": [
      {
        "tag": "body",
        "text": "[{\"@context\":\"https://schema.org\",\"@type\":\"MobileApplication\",\"name\":\"Badgey\",\"description\":\"A name ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "[{\"@context\":\"https://schema.org\",\"@type\":\"MobileApplication\",\"name\":\"Badgey\",\"description\":\"A name ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Download",
        "top": 16,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#007AFF",
    "alpha": 1,
    "cssValue": "rgb(0, 122, 255)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 53,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 7165,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 7170,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 20,
    "contexts": [
      {
        "tag": "p",
        "text": "Priya Nair",
        "top": 296,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 403,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 403,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 62,
    "contexts": [
      {
        "tag": "p",
        "text": "Alex Chen",
        "top": 281,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "✕badgey.marcoluthi.com",
        "top": 342,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Swing",
        "top": 802,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#111113",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 19)",
    "count": 17,
    "contexts": [
      {
        "tag": "a",
        "text": "Badgey",
        "top": 10,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Download",
        "top": 16,
        "property": "control-background"
      },
      {
        "tag": "h1",
        "text": "Wear your name.",
        "top": 200,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#BCCBE0",
    "alpha": 1,
    "cssValue": "rgb(188, 203, 224)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1797,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#6C6C72",
    "alpha": 1,
    "cssValue": "rgb(108, 108, 114)",
    "count": 29,
    "contexts": [
      {
        "tag": "p",
        "text": "Name badge app for iPhone",
        "top": 160,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 7815,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 7821,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#000000",
    "alpha": 0.34901960784313724,
    "cssValue": "oklab(0 0 0 / 0.35)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 272,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#95A8C4",
    "alpha": 1,
    "cssValue": "rgb(149, 168, 196)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1831,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFFFFF",
    "alpha": 0.5490196078431373,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.55)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 286,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#03051A",
    "alpha": 1,
    "cssValue": "rgb(3, 5, 26)",
    "count": 1,
    "contexts": [
      {
        "tag": "canvas",
        "text": "",
        "top": 7047,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.6)",
    "count": 11,
    "contexts": [
      {
        "tag": "p",
        "text": "iOS Engineer · Speaker",
        "top": 305,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "+",
        "top": 1211,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#A1A1A6",
    "alpha": 1,
    "cssValue": "rgb(161, 161, 166)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Get a free code for Aurora, the northern lights animation for Live badges, sent to your inbox.",
        "top": 6638,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.8,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Make your first badge, clip your phone to a lanyard and meet some people.",
        "top": 9297,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#000000",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0 0 0 / 0.5)",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Speaker",
        "top": 321,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "New Badge",
        "top": 142,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#8E8E93",
    "alpha": 1,
    "cssValue": "rgb(142, 142, 147)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "One code per email, while they last. Your address is only used to send it. Privacy policy",
        "top": 7329,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Privacy policy",
        "top": 7352,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#86868B",
    "alpha": 1,
    "cssValue": "rgb(134, 134, 139)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Promo codes",
        "top": 6502,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "On us.",
        "top": 6542,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.15)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1150,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#E0E0E3",
    "alpha": 1,
    "cssValue": "rgb(224, 224, 227)",
    "count": 11,
    "contexts": [
      {
        "tag": "section",
        "text": "Good to know.What does Badgey actually do?How does it know it's on a lanyard?And how does it know it",
        "top": 7547,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "What does Badgey actually do?How does it know it's on a lanyard?And how does it know it's in my pock",
        "top": 7787,
        "property": "border"
      },
      {
        "tag": "footer",
        "text": "BadgeyiPhone & iPad · iOS 26 or laterSupportPrivacy PolicyPress KitTerms of Use (EULA)ImprintMore ap",
        "top": 9574,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#B2C2D9",
    "alpha": 1,
    "cssValue": "rgb(178, 194, 217)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1797,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#000000",
    "alpha": 0.8509803921568627,
    "cssValue": "oklab(0 0 0 / 0.85)",
    "count": 15,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1173,
        "property": "svg-stroke"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 1175,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1180,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#F2F2F2",
    "alpha": 1,
    "cssValue": "rgb(242, 242, 242)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 121,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#FFFFFF",
    "alpha": 0.45098039215686275,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.45)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1169,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#000000",
    "alpha": 0.4,
    "cssValue": "oklab(0 0 0 / 0.4)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 775,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Badgey App ©",
        "top": 1325,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FFFFFF",
    "alpha": 0.6980392156862745,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "+",
        "top": 6086,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#0076FF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(0, 122, 255, 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 7153,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FF9500",
    "alpha": 1,
    "cssValue": "rgb(255, 149, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 43,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#000000",
    "alpha": 0.7019607843137254,
    "cssValue": "oklab(0 0 0 / 0.7)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "✕",
        "top": 350,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#000000",
    "alpha": 0.050980392156862744,
    "cssValue": "oklab(0 0 0 / 0.05)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "✕",
        "top": 350,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#E8615F",
    "alpha": 1,
    "cssValue": "rgb(232, 97, 95)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 308,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#5856D6",
    "alpha": 1,
    "cssValue": "rgb(88, 86, 214)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 309,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#1C1C1E",
    "alpha": 1,
    "cssValue": "rgb(28, 28, 30)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Swing",
        "top": 802,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#000000",
    "alpha": 0.5490196078431373,
    "cssValue": "oklab(0 0 0 / 0.55)",
    "count": 5,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 127,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 132,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#AF52DE",
    "alpha": 1,
    "cssValue": "rgb(175, 82, 222)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 330,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#1F9E8E",
    "alpha": 1,
    "cssValue": "rgb(31, 158, 142)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 367,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#34C759",
    "alpha": 1,
    "cssValue": "rgb(52, 199, 89)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 45,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#2B3852",
    "alpha": 1,
    "cssValue": "rgb(43, 56, 82)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 853,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#FFFFFF",
    "alpha": 0.2980392156862745,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 7264,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#101014",
    "alpha": 0.25098039215686274,
    "cssValue": "oklab(0.178528 0.00112759 -0.00390549 / 0.25)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6098,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "+",
        "top": 6095,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "oklab(0 0 0 / 0.2)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1217,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "+",
        "top": 1217,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#000000",
    "alpha": 0.8,
    "cssValue": "oklab(0 0 0 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1217,
        "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 sections, creating a relaxed and focused reading experience.
- Corner style: Fully rounded (pill-shaped) for buttons, and large smooth radii for product cards.
- Radius: High border-radius on interactive elements and product mockups.
- Borders: Subtle, 1px solid light gray borders used sparingly for separation in lists (FAQ).
- Buttons: Solid fill (black or white depending on background) with pill-shaped corners and no borders.
- Content width: Centered layout with a constrained max-width for text blocks to maintain readability.
- Density: Low density, prioritizing whitespace and large imagery over dense information.
- Evidence: Observed from the DOM/CSS facts: pill buttons, #E0E0E3 borders on FAQ, large font sizes, and centered alignment in screenshots.

## Sections

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

1. **Navbar — Badgey Navbar** (Home)
   A small logo on the left and a single dark pill button on the right keep the bar quiet and give one clear action.
   Capture: 1440×64px; page bounds 0–64px of 7275px; source section ID: `8e0b0a04-3027-4197-a376-a3fb627a0770`; image: https://media.designdetails.io/library/120b3ea65c94d52ef52c941d24bd964cebbee4d2cab70e48f998fb701fad21b5/8e0b0a04-3027-4197-a376-a3fb627a0770.webp
   SECTION.md v3.2: `8e0b0a04-3027-4197-a376-a3fb627a0770` (deterministic evidence; editorial review pending)
2. **Hero — Centered headline with floating badge cards** (Home)
   An oversized thin headline sits between tilted, blurred badge cards, so the product look is clear before any text is read.
   Capture: 1440×544px; page bounds 64–608px of 7275px; source section ID: `65bc1e5b-feaa-4fd4-9f17-4dfc92f49829`; image: https://media.designdetails.io/library/1a4744da174410b3e80bd43444fd79276bd9009e0edebb472147e64dc3a548ae/65bc1e5b-feaa-4fd4-9f17-4dfc92f49829.webp
   SECTION.md v3.2: `65bc1e5b-feaa-4fd4-9f17-4dfc92f49829` (deterministic evidence; editorial review pending)
3. **Features — Two stacked usage scenes with phone** (Home)
   Each scene pairs one short line with a phone mockup on a contrasting background, showing how the app is worn at a glance.
   Capture: 1440×2000px; page bounds 608–2608px of 7275px; source section ID: `a367a1ab-86bd-4286-9ba2-96d117d7dd6e`; image: https://media.designdetails.io/library/d7890170dfddb19e1d17f3e78c0fca422a03dc56a49cad326d16dfb3d31f651c/a367a1ab-86bd-4286-9ba2-96d117d7dd6e.webp
   SECTION.md v3.2: `a367a1ab-86bd-4286-9ba2-96d117d7dd6e` (deterministic evidence; editorial review pending)
4. **Gallery — Carousel of colorful badge designs** (Home)
   Three cards with the centre one raised and sharp show the range of styles, while dots signal that visitors can swipe for more.
   Capture: 1440×1218px; page bounds 2608–3826px of 7275px; source section ID: `3dd70c19-2cb4-46a8-a2a3-331ee893e3bf`; image: https://media.designdetails.io/library/04deca6c2e59d35ebbb154f3360dc5c38c3f91217cf2b08d32a5c34dbb6a9137/3dd70c19-2cb4-46a8-a2a3-331ee893e3bf.webp
   SECTION.md v3.2: `3dd70c19-2cb4-46a8-a2a3-331ee893e3bf` (deterministic evidence; editorial review pending)
5. **Forms — Email promo code signup on dark** (Home)
   A dark field and glowing aurora preview make the single email input the focus, and the small print explains how the address is used.
   Capture: 1440×1222px; page bounds 3826–5048px of 7275px; source section ID: `3066608e-c8ba-49aa-95e8-c255a748c208`; image: https://media.designdetails.io/library/e83f72d8da3456c7a7681798109668a9894dc5c6266561978c35dadccb8c9d94/3066608e-c8ba-49aa-95e8-c255a748c208.webp
   SECTION.md v3.2: `3066608e-c8ba-49aa-95e8-c255a748c208` (deterministic evidence; editorial review pending)
6. **FAQ — Single-column accordion of questions** (Home)
   Thin dividers and one-line questions in a narrow column make the list quick to scan, and the answers stay hidden until opened.
   Capture: 1440×991px; page bounds 5048–6039px of 7275px; source section ID: `2357319a-6e57-44d1-a7ae-396d1d142143`; image: https://media.designdetails.io/library/cf9fb493c8e7af788d73ff202471dc03d19b68ee820f5dfc262610ed092f190c/2357319a-6e57-44d1-a7ae-396d1d142143.webp
   SECTION.md v3.2: `2357319a-6e57-44d1-a7ae-396d1d142143` (deterministic evidence; editorial review pending)
7. **CTA — Closing download prompt on blue** (Home)
   A saturated blue background, a hanging badge and the repeated headline give a strong closing moment with one store button.
   Capture: 1440×1035px; page bounds 6039–7074px of 7275px; source section ID: `a232b889-a9cf-4a8d-8fba-5d3ae228bf40`; image: https://media.designdetails.io/library/9604ed3bc26ab12dec316302f59ab4ddd49179f7328865b8ba532ed59a1a9008/a232b889-a9cf-4a8d-8fba-5d3ae228bf40.webp
   SECTION.md v3.2: `a232b889-a9cf-4a8d-8fba-5d3ae228bf40` (deterministic evidence; editorial review pending)
8. **Footer — Compact footer with legal links** (Home)
   App name and requirements sit left, with small link columns right, so support and legal pages are easy to find without clutter.
   Capture: 1440×201px; page bounds 7074–7275px of 7275px; source section ID: `71c0a87e-55e3-4a65-87e4-f160801de62e`; image: https://media.designdetails.io/library/55d832b627177352a4231795ae0e8445a1e733fe897d9726e8d4a3b11610c2a9/71c0a87e-55e3-4a65-87e4-f160801de62e.webp
   SECTION.md v3.2: `71c0a87e-55e3-4a65-87e4-f160801de62e` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/e8bee1591b8ef2fe4b04d20cdb1c9e64f441980bc6a69c896bbb783d822320e9/desktop_full-3696395b-2026-11-03T04-53-25-050Z.webp
- Mobile screenshot: https://media.designdetails.io/library/725e71f57d9407d2a06218c0678cd74874f5b3ae79da2467a8e98ca5f0f94bf1/mobile_full-3696395b-2026-11-03T04-53-50-231Z.webp
- Open Graph image: https://media.designdetails.io/library/b999e26be2baba4f5ad5fc1a77fe524570ea4567c5775165ec1ed5a70d6ad921/og_image-3696395b-2026-11-03T04-53-32-192Z.webp
- Full-page video: https://media.designdetails.io/library/cbcdf958b40a410aadad7dc554b35ee4469dec7cd87e0738587c5f3f8474e3eb/motion-1793685438447.mp4
- Video poster: https://media.designdetails.io/library/b7b9a7656c62a944451fbb4cf89d45eb4ec64feca664139626749fe2a7c294f7/motion-poster-1793685438447.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
- Floating Product Card
- Feature Collection
- FAQ Accordion
- Newsletter Form
- Footer

## Quality rubric

Overall: 49.1/100 (Serviceable)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Badgey is a cleanly built, Apple-styled marketing page for a name-badge app: large light-weight display type, a tightly controlled neutral palette, and a logical sequence of sections that each pair a headline with a matching product mockup (lanyard scene, pocket scene, card carousel, FAQ). Execution within that chosen idiom is careful - consistent spacing, legible hierarchy, and content that is well-matched to its supporting visuals - which keeps the page comfortably in competent territory. What holds it back from a higher tier is that the idiom itself is borrowed almost wholesale from Apple's own product pages: the typography stack, pill buttons, section color rhythm, and FAQ pattern are recognizable Apple conventions applied to a different product rather than a design language built specifically for Badgey. Motion is also unverified beyond scroll-linked scene transitions; the evidence available cannot confirm the kind of refined, purposeful choreography that would justify crediting it as strong motion design. The result is a tidy, well-organized site that executes a familiar template competently but does not yet demonstrate the originality or confirmed motion polish that would move it into the 'good' or 'strong' tiers.

- Typography (15%): 58 — A clear, consistent type scale is used throughout: 104px/300 for the hero, 72px/300 and 60px/300 for section heads, 48px for sub-heads, and 18px/400 for body copy, each with proportionally scaled negative letter-spacing (-3.1px down to normal). This is disciplined and legible, but it is the stock Apple/Inter marketing scale rather than a bespoke system, and several deeply nested contexts show type collapsing to illegible sizes (4-13px) inside transformed card previews.
- Color (10%): 56 — The palette is tightly controlled - near-white canvas (#F4F4F4), black text (#000000), a near-black section (#111113), a saturated blue block, and a muted border gray (#E0E0E3) - with expressive color confined to gradients inside the badge mockups. This restraint supports the product focus but the base palette (including #007AFF) is essentially Apple's own system colors reused wholesale, so color isn't an independent design lever beyond the mockups.
- Layout (20%): 64 — The page is organized into a coherent sequence of full-bleed sections (hero, lanyard scene, pocket scene, carousel, promo/newsletter, FAQ, closing CTA, footer), each centered with constrained text width and generous vertical spacing, and each pairs a headline directly with a supporting visual. The structure is legible and systematic across many sections, which is a genuine strength, though the pattern itself (headline + centered mockup + caption, repeated) stays within a familiar Apple product-page template rather than varying its rhythm.
- Motion (20%): 45 — Frame pairs show evidence of scroll-choreographed scenes (hero badges shifting subtly between 1.3s/1.9s, a pinned pocket-scene phone that appears static across a half-second gap suggesting a scroll-tied transform, and card-carousel content changing between the 'every occasion' frames). This indicates intentional scroll-driven motion design exists, but the observation explicitly could not confirm easing, frame smoothness, or continuous quality, and the automated-scroll capture method limits confidence that documented changes represent polished interaction rather than basic scroll-jacking.
- Originality (25%): 28 — Nearly every visual decision - the Inter/-apple-system font stack with negative tracking, pill-shaped black 'Download'/App Store buttons, the light-gray-to-black-to-blue section rhythm, floating iPhone product mockups, and the FAQ accordion styling - directly reproduces Apple's own marketing-page idiom rather than developing a distinct visual identity for this specific app. The underlying product concept (phone-as-badge) is interesting, but the site's design vocabulary offers no hard-to-substitute ideas of its own.
- Content (10%): 60 — Headlines and mockups are directly paired ('Flip it on a lanyard' with a lanyard mockup, 'Or slip it in a pocket' with a pocket mockup, 'A badge for every occasion' with a swipeable card carousel), which ties the copy tightly to the visual demonstration of each feature. The FAQ content and footer disclosures also match the product's actual functional claims. The gradient mockup imagery, however, is generic placeholder-style abstract color rather than content specific to the product's actual use cases.

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

## Curator notes

Scattered badge cards in moody gradients frame a huge light headline, then a real iPhone mockup shows the badge in use so you grasp the product instantly. Soft pastel bands pace each use case, while a sudden black section and bold blue closer break the rhythm and keep the long scroll from feeling flat.

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