# AI-powered self-service ordering — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://squareup.com/us/en/hardware/kiosk
Captured: 2026-10-22
CSS measured: 2026-10-22T04:29:56.908Z at 1440×1000 — https://squareup.com/us/en/hardware/kiosk
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

The Square Kiosk page utilizes a bold, highly typographic design with stark contrasts. It pairs deep blacks and bright whites with a vibrant, electric blue accent color. Large-scale typography and immersive product photography create an impactful presentation, while heavily rounded cards and pill-shaped buttons soften the overall aesthetic into a polished, modern corporate look.

## Classification

- Industry: hardware
- Site type: Landing, Store
- Business model: E-commerce, Shopping, Software
- Styles: bold, typographic, minimal, corporate, colourful
- Platform: Custom code
- Technology: Not identified

## Typography

- Display: Cash Sans — weight 400; size 80px; line-height 72px; tracking -3.2px; Regular (100% role confidence, computed values)
- Heading: Cash Sans — weight 400; size 36px; line-height 36px; tracking -1.1px; Regular (95% role confidence, computed values)
- Body: Cash Sans — weight 400; size 15px; line-height 22px; tracking -0.3px; Regular (100% role confidence, computed values)
- Mono: Cash Sans Mono — weight 500; size 13px; line-height 18px; tracking 1.3px; uppercase (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: White background used for major content sections. (100% role confidence, computed values)
- Text — text #000000: color-4: computed rgb(0, 0, 0); AI role: Black text used primarily across the light sections of the page. (100% role confidence, computed values)
- Primary Action — primary action #004BFF: color-5: computed rgb(0, 75, 255); AI role: Vibrant blue (#004BFF) used for the hero background and primary CTA buttons. (100% role confidence, computed values)
- Canvas — canvas #1A1A1A: color-2: computed rgb(26, 26, 26); AI role: Dark gray (#1A1A1A) used for the footer and specific dark-themed product sections. (95% role confidence, computed values)
- Surface — surface #F7F7F5: color-1: computed rgb(247, 247, 245); AI role: Light gray (#F7F7F5) used as background for feature cards. (90% role confidence, computed values)
- Muted Text — muted text #767676: color-10: computed rgb(118, 118, 118); AI role: Gray text (#767676) used for secondary descriptive copy. (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": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "22px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 53,
    "contexts": [
      {
        "tag": "span",
        "text": "Designed to be seen and heard.",
        "top": 794,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "A 21.5-inch screen wakes as guests walk up. They order by voice or by touch, ask questions as they g",
        "top": 794,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Voice equals speed.",
        "top": 750,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "36px",
    "lineHeight": "36px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Premium hardware",
        "top": 162,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Faster orders",
        "top": 206,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "AI-powered upsell",
        "top": 250,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Square Sans Text VF",
    "fontStack": "\"Square Sans Text VF\", \"Square Sans Text\", Helvetica, Arial, \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h6",
        "text": "Products",
        "top": 21793,
        "property": "font"
      },
      {
        "tag": "h6",
        "text": "Business Types",
        "top": 21793,
        "property": "font"
      },
      {
        "tag": "h6",
        "text": "Resources",
        "top": 21793,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "80px",
    "lineHeight": "72px",
    "letterSpacing": "-3.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Built to stand out. Designed to keep up.",
        "top": 9182,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Ordering",
        "top": 17492,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Operations",
        "top": 18078,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Square Sans Text VF",
    "fontStack": "\"Square Sans Text VF\", \"Square Sans Text\", Helvetica, Arial, \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Square",
        "top": 25,
        "property": "font"
      },
      {
        "tag": "h1",
        "text": "Square Kiosk",
        "top": 0,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Square Kiosk Lite",
        "top": 20833,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Our more flexible and affordable option. Turn your iPad into a self-service kiosk.",
        "top": 20848,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Square Kiosk",
        "top": 20833,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Price shown includes counter stand; total price varies depending on stand type selected.",
        "top": 21507,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "All credit sale plans are issued by Block, Inc. Not available to merchants in AL, DE, MO, MS, NH, an",
        "top": 21548,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Purchase and use of the new Square Kiosk requires an active Square Plus or Premium subscription. Sub",
        "top": 21610,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "17.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "with counter stand¹, or $97/mo. over 24 months²",
        "top": 19201,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "per device with Square Plus³",
        "top": 19338,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "(only available in English at the moment)",
        "top": 19356,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "40.8px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "$1,999",
        "top": 19152,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "$99/mo.",
        "top": 19289,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "2.5% + 15¢",
        "top": 19426,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Smarter self-service for a faster rush",
        "top": 935,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Square Sans Text VF",
    "fontStack": "\"Square Sans Text VF\", \"Square Sans Text\", Helvetica, Arial, \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Translation Notice: Some content may have been translated using AI to help serve our global communit",
        "top": 22377,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Square Sans Text VF",
    "fontStack": "\"Square Sans Text VF\", \"Square Sans Text\", Helvetica, Arial, \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2026 Block, Inc.",
        "top": 22537,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Cash Sans Mono",
    "fontStack": "\"Cash Sans Mono\", \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", monospace",
    "weight": "500",
    "size": "13px",
    "lineHeight": "18px",
    "letterSpacing": "1.3px",
    "traits": "uppercase",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "How kiosk works",
        "top": 140,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "How kiosk works",
        "top": 2196,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Design",
        "top": 9156,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", helvetica, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Business types",
        "top": 25,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Products",
        "top": 25,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Hardware",
        "top": 25,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "80px",
    "lineHeight": "100px",
    "letterSpacing": "-3.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Choose what fits.",
        "top": 20521,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Your space. Your budget.",
        "top": 20609,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "23.2px",
    "lineHeight": "23.2px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Add extra dressing",
        "top": 1591,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "What’s good here?",
        "top": 859,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Buy now",
        "top": 932,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Contact sales",
        "top": 932,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Cash Sans Mono",
    "fontStack": "\"Cash Sans Mono\", \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", monospace",
    "weight": "500",
    "size": "27.9px",
    "lineHeight": "30.7px",
    "letterSpacing": "3.5px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "$5 OFF",
        "top": 773,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Cash Sans",
    "fontStack": "\"Cash Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans JP\", \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Buy now",
        "top": 19163,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Square Sans Text VF",
    "fontStack": "\"Square Sans Text VF\", \"Square Sans Text\", Helvetica, Arial, \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "Translation Notice",
        "top": 22383,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Square Sans Text VF",
    "fontStack": "\"Square Sans Text VF\", \"Square Sans Text\", Helvetica, Arial, \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 56,
    "contexts": [
      {
        "tag": "a",
        "text": "Point of sale",
        "top": 21833,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Payments",
        "top": 21864,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Websites",
        "top": 21895,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Square Sans Text VF",
    "fontStack": "\"Square Sans Text VF\", \"Square Sans Text\", Helvetica, Arial, \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "United States (English)",
        "top": 22472,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Your Privacy Choices",
        "top": 22539,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Square Sans Text VF",
    "fontStack": "\"Square Sans Text VF\", \"Square Sans Text\", Helvetica, Arial, \"Hiragino Sans\", \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to Content",
        "top": 78,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F7F7F5",
    "alpha": 1,
    "cssValue": "rgb(247, 247, 245)",
    "count": 83,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 86,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 462,
        "property": "svg-fill"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 462,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#1A1A1A",
    "alpha": 1,
    "cssValue": "rgb(26, 26, 26)",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to Content",
        "top": 78,
        "property": "text"
      },
      {
        "tag": "li",
        "text": "Smart self-service for a faster rush. Answers questions, speeds up orders, and spotlights your menu ",
        "top": 9424,
        "property": "background"
      },
      {
        "tag": "article",
        "text": "Square Kiosk Lite Our more flexible and affordable option. Turn your iPad into a self-service kiosk.",
        "top": 20796,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 132,
    "contexts": [
      {
        "tag": "body",
        "text": "Skip to Content Square Business types Food & Beverage Discover Overview Switch to Square Coffee shop",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Skip to Content",
        "top": 78,
        "property": "control-background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 25,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 86,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 25,
        "property": "svg-fill"
      },
      {
        "tag": "h1",
        "text": "Square Kiosk",
        "top": 0,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 783,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#004BFF",
    "alpha": 1,
    "cssValue": "rgb(0, 75, 255)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Square Business types Food & Beverage Discover Overview Switch to Square Coffee shops Quick service ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "$5 OFFAdd extra dressingWhat’s good here? Smarter self-service for a faster rush Buy now Contact sal",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Buy now",
        "top": 932,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(0, 0, 0, 0.05)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Olympio Greek Order here Rewards What can I get you today? What can I get you today? Strawberry matc",
        "top": 2156,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "",
        "top": 10192,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "rgba(0, 0, 0, 0.2)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "What is a self-ordering kiosk? A self-ordering kiosk lets guests browse, order, and pay without a ca",
        "top": 19710,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#E2E0DA",
    "alpha": 1,
    "cssValue": "rgb(226, 224, 218)",
    "count": 1,
    "contexts": [
      {
        "tag": "figure",
        "text": "",
        "top": 18834,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#000000",
    "alpha": 0.9019607843137255,
    "cssValue": "rgba(0, 0, 0, 0.9)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "How kiosk works",
        "top": 2196,
        "property": "::after-background"
      },
      {
        "tag": "span",
        "text": "How kiosk works",
        "top": 2196,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Built to stand out. Designed to keep up.",
        "top": 9182,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#767676",
    "alpha": 1,
    "cssValue": "rgb(118, 118, 118)",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "Guests can order by talking, tapping, or both. Either works at any point in the order.",
        "top": 17960,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(255, 255, 255, 0.7)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Answers questions, speeds up orders, and spotlights your menu so your team can focus on hospitality.",
        "top": 9778,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#000000",
    "alpha": 0.6,
    "cssValue": "rgba(0, 0, 0, 0.6)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "A 21.5-inch screen wakes as guests walk up. They order by voice or by touch, ask questions as they g",
        "top": 2869,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#707070",
    "alpha": 1,
    "cssValue": "rgb(112, 112, 112)",
    "count": 6,
    "contexts": [
      {
        "tag": "h6",
        "text": "Products",
        "top": 21793,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "© 2026 Block, Inc.",
        "top": 22537,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Our more flexible and affordable option. Turn your iPad into a self-service kiosk.",
        "top": 20848,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#000000",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(0, 0, 0, 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "A quick setup in your Square Dashboard, and Kiosk knows your menu, your prices, and what sells. Gues",
        "top": 17282,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#000000",
    "alpha": 0.47843137254901963,
    "cssValue": "rgba(0, 0, 0, 0.48)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "Smarter self-service for a faster rush Buy now Contact sales",
        "top": 910,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(255, 255, 255, 0.15)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "Play video",
        "top": 10108,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#000000",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(0, 0, 0, 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 19454,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#818181",
    "alpha": 0.34901960784313724,
    "cssValue": "rgba(128, 128, 128, 0.35)",
    "count": 2,
    "contexts": [
      {
        "tag": "nav",
        "text": "United States (English)",
        "top": 22451,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#006AFF",
    "alpha": 1,
    "cssValue": "rgb(0, 106, 255)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to Content",
        "top": 78,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 19466,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#000000",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(0, 0, 0, 0.5)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 10204,
        "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 distinct sections (often >100px), with tighter padding inside grid collections.
- Corner style: Prominent use of large border radii, creating soft, friendly shapes that contrast with the stark typography.
- Radius: Buttons are fully rounded (pill shape), while content cards and image frames use large radii (approx 16px-24px).
- Borders: Mostly borderless design relying on background color differences, with occasional thin, subtle borders on form/footer elements.
- Buttons: Pill-shaped, using solid vibrant fills for primary actions and transparent backgrounds with borders for secondary.
- Content width: Content is generally constrained to a large central max-width, while backgrounds often bleed to the edges.
- Density: Low density, utilizing significant negative space to emphasize large text and product imagery.
- Evidence: Visible in the pill-shaped 'Buy now' buttons, the soft corners of the feature grid cards, and the expansive padding in the 'Built to stand out' section.

## Sections

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

1. **Hero — Self-Service Kiosk Product Hero** (Home)
   AI suggestion (92% confidence): Complete, visually distinctive opening hero with navigation, oversized kiosk imagery, restaurant-ordering collage, and repeated purchase/contact actions.
   Capture: 1440×950px; page bounds 1051–2001px of 11866px; source section ID: `60587d2a-8c9e-47f4-b200-6b317da589bd`; image: https://media.designdetails.io/library/359b307471fab58ec6ab1e7cf07b678a136f7b8657b4d192cc9f8e82fae46a33/section-manual-60587d2a-8c9e-47f4-b200-6b317da589bd-1792644943849.webp
   SECTION.md v3.2: `60587d2a-8c9e-47f4-b200-6b317da589bd` (deterministic evidence; editorial review pending)
2. **Pricing — Your setup, clearly priced** (Home)
   Pricing composition from Home, organized around “Your setup, clearly priced”.
   Capture: 1440×876px; page bounds 7672–8548px of 11866px; source section ID: `27b82a7c-be75-4d19-8158-0b5c7e2eb1e5`; image: https://media.designdetails.io/library/c6aa93f4891b3d5ed26cb108827036883aaa4d1e874ecd0dc8c3e245f891e075/section_crop-27b82a7c-2026-10-22T04-30-10-439Z.webp
   SECTION.md v3.2: `27b82a7c-be75-4d19-8158-0b5c7e2eb1e5` (deterministic evidence; editorial review pending)
3. **Product Demo — How the Kiosk Works Demo** (Home)
   AI suggestion (91% confidence): Self-contained interactive-style product showcase with feature selector, explanatory copy, large in-context hardware visual, and a video play control.
   Capture: 1440×858px; page bounds 2088–2946px of 11866px; source section ID: `fb900a82-eec8-4cfd-8630-584ca0bc8aec`; image: https://media.designdetails.io/library/2e67b71145e54367ec2108390d120e6b9ecf0c5089b24ebc0e1624343b12bbcf/fb900a82-eec8-4cfd-8630-584ca0bc8aec.webp
   SECTION.md v3.2: `fb900a82-eec8-4cfd-8630-584ca0bc8aec` (deterministic evidence; editorial review pending)
4. **Product Demo — Connected POS + KDS product walkthrough** (Home)
   AI suggestion (88% confidence): Complete “How Kiosk Works” panel combining step navigation, an active feature state, explanatory copy, and a large product video still.
   Capture: 1440×882px; page bounds 3071–3953px of 11866px; source section ID: `4514a5bc-cbdf-43dc-86c7-7de00b7d72c7`; image: https://media.designdetails.io/library/3bf50a242e36eab5a25a0f703fe9e0583171ef1536b765b8d1a09fff7be0f07f/section-manual-4514a5bc-cbdf-43dc-86c7-7de00b7d72c7-1792644952561.webp
   SECTION.md v3.2: `4514a5bc-cbdf-43dc-86c7-7de00b7d72c7` (deterministic evidence; editorial review pending)
5. **Feature Grid — Self-Ordering Features: Ordering and Operations** (Home)
   AI suggestion (98% confidence): Complete feature section with its own heading, introduction, and two clearly bounded four-card rows covering ordering and operations capabilities.
   Capture: 1440×1599px; page bounds 6061–7660px of 11866px; source section ID: `b70d9b6c-acb8-4ac6-9c47-4e6180bcbc9b`; image: https://media.designdetails.io/library/ec016c4d1c55b632603b9558d27bbbb917e6747125a87c6c00614b608e7a71bd/b70d9b6c-acb8-4ac6-9c47-4e6180bcbc9b.webp
   SECTION.md v3.2: `b70d9b6c-acb8-4ac6-9c47-4e6180bcbc9b` (deterministic evidence; editorial review pending)
6. **FAQ — Kiosk FAQs** (Home)
   AI suggestion (98% confidence): Complete accordion section with a clear heading and nine kiosk-related questions, bounded by generous whitespace and the next dark section.
   Capture: 1440×612px; page bounds 8634–9246px of 11866px; source section ID: `8ca3a583-3bef-4951-9cfd-0129d63533ed`; image: https://media.designdetails.io/library/1dc3db3e42e696073641fa7d5269321e081ab92175dcb952b4425f2e46716bf7/8ca3a583-3bef-4951-9cfd-0129d63533ed.webp
   SECTION.md v3.2: `8ca3a583-3bef-4951-9cfd-0129d63533ed` (deterministic evidence; editorial review pending)
7. **Comparison — Square kiosk product options** (Home)
   AI suggestion (94% confidence): Self-contained dark product comparison area featuring three distinct device-choice cards with descriptions, links, and strong product imagery.
   Capture: 1440×996px; page bounds 9330–10326px of 11866px; source section ID: `40f1b8e6-b9a5-4bed-a500-15667ef2ec18`; image: https://media.designdetails.io/library/3211ac960596775d1f9cec56b0f339d95e2a1694a32b06ed48f31abb1467e7b3/40f1b8e6-b9a5-4bed-a500-15667ef2ec18.webp
   SECTION.md v3.2: `40f1b8e6-b9a5-4bed-a500-15667ef2ec18` (deterministic evidence; editorial review pending)
8. **Footer — Square global link and legal footer** (Home)
   AI suggestion (98% confidence): Complete, substantial footer with grouped product, business, resource, contact, and company links, followed by translation notice, locale selector, social icons, copyright, privacy, legal, and certification links.
   Capture: 1440×1148px; page bounds 10718–11866px of 11866px; source section ID: `e0fd7475-95ce-44b5-b8ea-c507ac4c43d8`; image: https://media.designdetails.io/library/c276c8ee9a3349763122690dd4b5ccb65e739c871fb2293e3da04ee2e5a1325f/e0fd7475-95ce-44b5-b8ea-c507ac4c43d8.webp
   SECTION.md v3.2: `e0fd7475-95ce-44b5-b8ea-c507ac4c43d8` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/0d588539abb32a0579db246d7acc4541a74a0566367d32c58f6a2db9482b804c/desktop_full-6318c21c-2026-10-22T04-29-56-931Z.webp
- Mobile screenshot: https://media.designdetails.io/library/90cba7f487a7ea760cce5bb2ea62034859c695cb58e97e696cac709929c70c43/mobile_full-6318c21c-2026-10-22T04-30-49-144Z.webp
- Open Graph image: https://media.designdetails.io/library/1a168058a298e24651bc866bb4b55db7e0ee6548a92489c0073b450fa0f8f307/og_image-6318c21c-2026-10-22T04-30-07-313Z.webp
- Full-page video: https://media.designdetails.io/library/c36208e5e58f97ff086b51e00be20a6a89a88d4f3f3cf17c85e4892a37e79fdb/motion-1792643704215.mp4
- Video poster: https://media.designdetails.io/library/51b6354ef3d2b9c8b1ff30d71e4731def742b5b803add66e04ce6e8171741a75/motion-poster-1792643704215.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
- Feature Collection
- Carousel
- FAQ Accordion
- Pricing Table
- Primary Button
- Outline Button
- Footer
- Sticky Feature Scroller

## Quality rubric

Overall: 59.75/100 (Competent)
Evidence coverage: 100%
Judge tier: Good
Verdict: A polished, professionally executed B2B hardware marketing page with a genuinely clever hero transformation and a consistent typographic/spacing system, but the bulk of the page leans on standard scrollytelling, carousel, and accordion conventions and a default blue/black/white palette, keeping originality and color from rising above competent.

- Typography (15%): 65 — A clear, multi-role type system (80px display, 36px subheads, 15px body, uppercase mono eyebrow labels) is applied consistently across the page with controlled negative letter-spacing on display sizes. This is competent corporate type hierarchy but relies on a single geometric sans across nearly all roles, giving limited expressive range.
- Color (10%): 59 — A disciplined but conventional palette: black/white base, one saturated blue accent (#004BFF), a near-black footer (#1A1A1A), and a warm off-white card surface (#F7F7F5). Execution is clean and high-contrast but the blue-on-black-on-white scheme is a standard tech/SaaS formula without a distinctive secondary hue or tension.
- Layout (20%): 64 — A coherent structural system runs through the page: hero, sticky feature scroller, horizontal carousel, feature grid, pricing table, FAQ accordion, and footer, all sharing consistent spacing rhythm, large radii on cards/buttons, and a constrained content width against edge-to-edge color blocks. Individually each pattern (sticky scroller, carousel, pricing table, accordion) is a well-worn marketing-page module rather than a bespoke structural idea.
- Motion (20%): 63 — Per the observation, the hero text scales and disassembles into floating photo cards around a fixed device mockup, the 'How Kiosk Works' section crossfades images in sync with a sticky list, and a manual horizontal carousel lets users browse product angles, with both forward and reverse scroll playback demonstrated. This is a multi-moment, scroll-coordinated system rather than a single decorative effect, though the core techniques (text-to-card morph, sticky crossfade, arrow carousel) are familiar patterns on premium product sites, and no evidence of frame rate, easing quality, or touch/keyboard support is available.
- Originality (25%): 50 — The hero's title-disassembling-into-photo-collage is a notable conceit, but the remainder of the page assembles standard premium hardware/SaaS marketing modules — sticky scroll feature explainer, arrow carousel, tiered pricing table, plus-icon FAQ accordion — patterns widely seen on comparable product pages (e.g., Apple-style device marketing). One distinctive idea does not constitute the several hard-to-substitute ideas required for a higher score.
- Content (10%): 62 — Product photography (device mockups, receipts, loyalty cards, payment taps) is woven directly into the hero collage and feature cards in a way that ties visuals to specific claims (voice ordering, loyalty, payments), and pricing/FAQ content is laid out with clear hierarchy. Content supports the structure well without feeling like generic stock filler, though it remains conventional B2B product-page copy and imagery.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A deep blue hero fades into warm, wood-toned kitchen photography of the kiosk in place, grounding the hardware in a real food setting rather than a studio shot. Short stacked headlines and a repeated two-column rhythm of image plus brief caption keep the long page easy to scan section by section.

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