# The Raycast Keyboard — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.raycast.com/keyboard
Captured: 2026-10-16
CSS measured: 2026-10-16T21:14:33.451Z at 1440×1000 — https://www.raycast.com/keyboard
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 website presents a sleek, minimal, and highly polished dark mode aesthetic to showcase a premium hardware product. It relies heavily on high-quality 3D renders that are integrated with scroll-linked animations. The typography mixes a clean sans-serif for narrative text with a monospaced font for technical specifications, creating a precise, tech-focused vibe. Thin, semi-transparent borders are used extensively to define cards, tables, and UI elements without adding visual clutter.

## Classification

- Industry: hardware
- Site type: Landing, Blog
- Business model: Software
- Styles: photographic, bold, dark-mode-native, tech-precision, minimal
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Display: Inter — weight 500; size 50px; line-height 50px; tracking -1.2px; Regular (95% role confidence, computed values)
- Heading: Inter — weight 500; size 32px; line-height 40px; tracking -0.4px; Regular (95% role confidence, computed values)
- Body: Inter — weight 400; size 16px; line-height 28px; tracking normal; Regular (90% role confidence, computed values)
- Mono: GeistMono — weight 500; size 12px; line-height 14.4px; tracking 0.9px; uppercase (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #07080A: color-1: computed rgb(7, 8, 10); AI role: #07080A serves as the primary dark background for the entire page body. (100% role confidence, computed values)
- Text — text #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and important body copy. (100% role confidence, computed values)
- Muted Text — muted text #9C9C9D: color-4: computed rgb(156, 156, 157); AI role: #9C9C9D used for secondary information, footer links, and subtle descriptors. (95% role confidence, computed values)
- Primary Action — primary action #E6E6E6: color-9: computed rgb(230, 230, 230); AI role: #E6E6E6 used as the solid background color for prominent interactive elements like the 'Download' and 'Subscribe' buttons. (90% 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": "GeistMono",
    "fontStack": "GeistMono, ui-monospace, SFMono-Regular, \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
    "weight": "500",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "0.9px",
    "traits": "uppercase",
    "count": 51,
    "contexts": [
      {
        "tag": "dt",
        "text": "Operating Force",
        "top": 2033,
        "property": "font"
      },
      {
        "tag": "dd",
        "text": "42 ± 15 gf",
        "top": 2033,
        "property": "font"
      },
      {
        "tag": "dt",
        "text": "End Force",
        "top": 2072,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "22.4px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Product",
        "top": 5216,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Core Features",
        "top": 5216,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Top Extensions",
        "top": 5216,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "strong",
        "text": "Your shortcuts in plain sight",
        "top": 1246,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Mechanical feel. Quiet by design.",
        "top": 1874,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Mechanical feel.",
        "top": 1874,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "500",
    "size": "50px",
    "lineHeight": "50px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "The Raycast Keyboard",
        "top": 241,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "A low-profile mechanical keyboard designed for instant access to your favorite commands.",
        "top": 307,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Nano Blush linear switches deliver a smooth, satisfying typing experience with a sound made for shar",
        "top": 1924,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "26.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Includes 14 custom keycaps and a dedicated Hyper key to make everyday actions easier to find and rem",
        "top": 1351,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "GeistMono",
    "fontStack": "GeistMono, ui-monospace, SFMono-Regular, \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
    "weight": "500",
    "size": "12px",
    "lineHeight": "19.2px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Designed by Raycast and Engineered by NuPhyCustomized by Nichlas Wærnes Andersen and Tim Van Damme",
        "top": 4648,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Rotary knob",
        "top": 2877,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Universal Layout",
        "top": 2942,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Multiple devices",
        "top": 2942,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "1",
        "top": 3026,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2",
        "top": 3026,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "3",
        "top": 3026,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "30px",
    "lineHeight": "34.5px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "1,200 hrs",
        "top": 3112,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "1,200",
        "top": 3111,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "By submitting your email address, you agree to receive Raycast’s monthly newsletter. For more inform",
        "top": 6017,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "privacy policy",
        "top": 6036,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Battery life",
        "top": 3152,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 73,
    "contexts": [
      {
        "tag": "a",
        "text": "Store",
        "top": 34,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pro",
        "top": 34,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "AI",
        "top": 34,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Download",
        "top": 36,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Sold out",
        "top": 407,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Watch video",
        "top": 407,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#07080A",
    "alpha": 1,
    "cssValue": "rgb(7, 8, 10)",
    "count": 4,
    "contexts": [
      {
        "tag": "body",
        "text": "self.__wrap_n=self.__wrap_n||(self.CSS&&CSS.supports(\"text-wrap\",\"balance\")?1:2);self.__wrap_b=(a,b,",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 3058,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 142,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 192,
        "property": "svg-fill"
      },
      {
        "tag": "h1",
        "text": "The Raycast Keyboard",
        "top": 241,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Watch video",
        "top": 407,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "rgba(255, 255, 255, 0.4)",
    "count": 33,
    "contexts": [
      {
        "tag": "p",
        "text": "Includes 14 custom keycaps and a dedicated Hyper key to make everyday actions easier to find and rem",
        "top": 1351,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Mechanical feel. Quiet by design.",
        "top": 1874,
        "property": "text"
      },
      {
        "tag": "dt",
        "text": "Operating Force",
        "top": 2033,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#9C9C9D",
    "alpha": 1,
    "cssValue": "rgb(156, 156, 157)",
    "count": 74,
    "contexts": [
      {
        "tag": "a",
        "text": "Store",
        "top": 34,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Get product updates and news in your inbox. No spam.",
        "top": 6004,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(255, 255, 255, 0.05)",
    "count": 19,
    "contexts": [
      {
        "tag": "div",
        "text": "Rotary knob",
        "top": 2877,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2926,
        "property": "border"
      },
      {
        "tag": "input",
        "text": "",
        "top": 5959,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "A low-profile mechanical keyboard designed for instant access to your favorite commands.",
        "top": 307,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 3156,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 25,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2993,
        "property": "border"
      },
      {
        "tag": "p",
        "text": "Designed by Raycast and Engineered by NuPhyCustomized by Nichlas Wærnes Andersen and Tim Van Damme",
        "top": 4648,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 85,
    "contexts": [
      {
        "tag": "dl",
        "text": "Operating Force42 ± 15 gfEnd Force55 ± 15 gfPre-Travel1.7 ± 0.4 mm",
        "top": 2020,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Operating Force42 ± 15 gf",
        "top": 2021,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "",
        "top": 4094,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#E6E6E6",
    "alpha": 1,
    "cssValue": "rgb(230, 230, 230)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 48,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "Download",
        "top": 36,
        "property": "control-background"
      },
      {
        "tag": "button",
        "text": "Sold out",
        "top": 407,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#2F3031",
    "alpha": 1,
    "cssValue": "rgb(47, 48, 49)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Download",
        "top": 36,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 46,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "Sold out",
        "top": 407,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 0.9019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.9)",
    "count": 1,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 5959,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.058823529411764705,
    "cssValue": "rgba(255, 255, 255, 0.06)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "StoreProAIiOSWindowsTeamsEnterpriseBlogPricingLog inDownloadLog in",
        "top": 16,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFFFFF",
    "alpha": 0.25098039215686274,
    "cssValue": "rgba(255, 255, 255, 0.25)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "1,200 hrs",
        "top": 3112,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#252526",
    "alpha": 1,
    "cssValue": "rgb(37, 37, 38)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 3121,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.0196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.02)",
    "count": 26,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2993,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#1B1C1E",
    "alpha": 1,
    "cssValue": "rgb(27, 28, 30)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "ProductStoreProTeamsPricingChangelogBrowser ExtensionDevelopersiOSWindowsRaycast 2.0API DocsManualTr",
        "top": 5119,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.1607843137254902,
    "cssValue": "rgba(255, 255, 255, 0.16)",
    "count": 144,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2980,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.2196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.22)",
    "count": 64,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2207,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(255, 255, 255, 0.12)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2975,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.023529411764705882,
    "cssValue": "rgba(255, 255, 255, 0.024)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2904,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#FF6363",
    "alpha": 1,
    "cssValue": "rgb(255, 99, 99)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 42,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#6A6B6C",
    "alpha": 1,
    "cssValue": "rgb(106, 107, 108)",
    "count": 15,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 5655,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#FFFFFF",
    "alpha": 0.10980392156862745,
    "cssValue": "rgba(255, 255, 255, 0.11)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2948,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "1",
        "top": 3026,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(255, 255, 255, 0.15)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "2",
        "top": 3026,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.23529411764705882,
    "cssValue": "rgba(255, 255, 255, 0.235)",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2993,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FFFFFF",
    "alpha": 0.27058823529411763,
    "cssValue": "rgba(255, 255, 255, 0.27)",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2993,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#FFFFFF",
    "alpha": 0.3058823529411765,
    "cssValue": "rgba(255, 255, 255, 0.306)",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2993,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#FFFFFF",
    "alpha": 0.3411764705882353,
    "cssValue": "rgba(255, 255, 255, 0.34)",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2993,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#FFFFFF",
    "alpha": 0.1803921568627451,
    "cssValue": "rgba(255, 255, 255, 0.18)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2970,
        "property": "border"
      }
    ]
  }
]
```

### 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, allowing product renders to breathe. Tighter grouping within data tables and feature cards.
- Corner style: Consistent use of rounded corners on interactive elements and container cards.
- Radius: Buttons appear fully rounded (pill-shaped), while feature cards and input fields use a moderate border-radius (likely 8px-12px based on visual appearance).
- Borders: Extensive use of 1px solid hairline borders with low opacity white (rgba(255,255,255,0.1)) to define structure without adding visual weight.
- Buttons: Mix of solid light-grey/white buttons with dark text for primary actions, and ghost/outline buttons with semi-transparent borders for secondary actions.
- Content width: Content is constrained to a central max-width column, typical of modern desktop layouts, keeping text readable and images focused.
- Density: Low density overall, heavily favoring negative space to emphasize the premium nature of the product imagery.
- Evidence: Observed from the structural layout of feature grids, the styling of the navigation and footer, and the repetitive application of transparent white borders and rounded geometries across components.

## Sections

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

1. **Hero — Raycast Keyboard Product Hero** (Home)
   AI suggestion (98% confidence): Complete product hero with collaboration marks, headline, supporting copy, action buttons, and a dramatic full-width keyboard render.
   Capture: 1440×753px; page bounds 189–942px of 6159px; source section ID: `8fdfe6ac-b501-46c7-bb41-a7840e05a1e6`; image: https://media.designdetails.io/library/4f83c0e7a0fb1219cfdf407a2ae780b23dfbf3eb2cc98bd09ab264a0efbad92a/8fdfe6ac-b501-46c7-bb41-a7840e05a1e6.webp
   SECTION.md v3.2: `8fdfe6ac-b501-46c7-bb41-a7840e05a1e6` (deterministic evidence; editorial review pending)
2. **Feature Card — Mechanical Feel and Switch Specifications** (Home)
   AI suggestion (95% confidence): Self-contained technical feature pairing an exploded switch visualization with benefit copy, specifications, and an audio sample control.
   Capture: 1440×510px; page bounds 1845–2355px of 6159px; source section ID: `915161dd-052f-422d-a21c-436580a3df76`; image: https://media.designdetails.io/library/53b84616b9ecdab59100bf289977abee0defbbd676073c5d9b7ac86839ac5894/915161dd-052f-422d-a21c-436580a3df76.webp
   SECTION.md v3.2: `915161dd-052f-422d-a21c-436580a3df76` (deterministic evidence; editorial review pending)
3. **Other — Raycast Keyboard Specifications** (Home)
   AI-proposed category: product-specifications
AI suggestion (94% confidence): Complete product-detail section with a centered statement, keyboard visual, custom keycap overview, and structured specification tables for dimensions, connectivity, and materials.
   Capture: 1440×1320px; page bounds 3560–4880px of 6159px; source section ID: `108bf92a-0b16-4d8c-aba5-cc7437f20bfc`; image: https://media.designdetails.io/library/2780f2ce1b219e2e73be948e198b3565ce3e7c41b63a7400ede2fbfd21a0dc76/108bf92a-0b16-4d8c-aba5-cc7437f20bfc.webp
   SECTION.md v3.2: `108bf92a-0b16-4d8c-aba5-cc7437f20bfc` (deterministic evidence; editorial review pending)
4. **Footer — Multi-column resource footer with newsletter signup** (Home)
   AI suggestion (98% confidence): Complete, substantial dark footer featuring six organized link columns, external-link treatments, a clear divider, and a self-contained newsletter subscription form with consent copy.
   Capture: 1440×959px; page bounds 5200–6159px of 6159px; source section ID: `1e2ac7df-d895-4c1d-8a04-f5313185b44a`; image: https://media.designdetails.io/library/0ed866d19d6a2e628b31b303fdf23cddeead88316a4949b7e77c12c619cf89c6/1e2ac7df-d895-4c1d-8a04-f5313185b44a.webp
   SECTION.md v3.2: `1e2ac7df-d895-4c1d-8a04-f5313185b44a` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/b4c2cfd18eb9c46fe31b13653a4f2400162abc1252a0479af435e6cafef158ba/desktop_full-c263a024-2026-10-16T21-14-33-461Z.webp
- Mobile screenshot: https://media.designdetails.io/library/80e205c8c5180251137735a267a556440411d1b87f0b5c10f28500f5dce1cc0a/mobile_full-c263a024-2026-10-16T21-15-00-449Z.webp
- Open Graph image: https://media.designdetails.io/library/8d5759116d7129e623aaa79dad37d35e81871b929e0358042f4e432d881840e1/og_image-c263a024-2026-10-16T21-14-40-217Z.webp
- Full-page video: https://media.designdetails.io/library/267aa5ddec2a66d6c46cb77c78bc3914e447de965181665b44eaafe942bc4c38/motion-1792186908563.mp4
- Video poster: https://media.designdetails.io/library/c70717c876c577bb27ed1f55bfb259b9ed304df69b97e054469053b2dd3f930e/motion-poster-1792186908563.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 Card
- Newsletter Form
- Stat Block
- Footer
- Specification Data Table
- Scroll Driven 3D Explainer

## Quality rubric

Overall: 60.6/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: A highly polished, well-organized hardware product page that executes a familiar dark-mode/scroll-driven-explainer template with real craft in typography, spacing, and content-to-visual mapping, but it does not depart meaningfully from the now-standard premium-hardware marketing idiom, keeping it in the 'good' tier rather than 'strong' or above.

- Typography (15%): 65 — A disciplined two-family system (Inter for narrative/display, GeistMono for specs) creates a clear sans/mono split that reinforces the 'precision tech' positioning. Scale steps (50px hero, 32px section heads, 16-18px body, 12px uppercase mono labels) are sensible and tracking is tightened appropriately at large sizes (-1.2px at 50px). This is competent, legible systemization rather than an original typographic voice — pairing a geometric sans with a mono for specs is a very common SaaS/hardware convention.
- Color (10%): 62 — A tightly controlled near-black canvas (#07080A) with white/grey text and dozens of low-alpha white hairlines (0.02–0.34) builds depth without introducing hue, and a single warm accent (orange/red keycap and #FF6363 svg fill) punctuates the mostly monochrome field. This is a well-executed but conventional premium dark-mode palette; the restraint is appropriate to the product but not a distinctive color idea in itself.
- Layout (20%): 67 — The page runs a consistent, centered content column with generous vertical rhythm between major sections, a bento-style feature grid of varying card sizes, dt/dd spec tables with hairline dividers, and a conventional multi-column footer. The system repeats recognizably across hero, feature explainer, spec block, and footer — qualifying as a coherent structural system, though the bento-grid-plus-spec-table format is now a common hardware-marketing template rather than a bespoke structural invention.
- Motion (20%): 63 — Two scroll-tied sequences are documented: keycaps flying in to form a rotating ring, and a switch exploding into its layered components as the user scrolls. Both are content-appropriate (illustrating custom keycaps and switch mechanics) and reverse with scroll direction. However, this is the now-familiar 'Apple-style' scroll-driven exploded-view/assembly pattern for hardware marketing, the observation covers only two moments total across a long page, and no evidence is given for microinteractions, hover states, or transition quality elsewhere, so breadth and craft beyond the two hero sequences cannot be confirmed.
- Originality (25%): 47 — The dominant devices here — dark-mode hardware microsite, scroll-triggered 3D exploded/assembly animation, hairline-bordered spec tables in mono type — are now a well-worn template for premium tech hardware launches (popularized by Apple and widely copied by DTC hardware brands). Execution is clean, but nothing here reframes the product story, introduces an unexpected interaction model, or departs from the expected 'hero → feature callouts → spec sheet → footer' sequence. Novelty is low even though polish is high.
- Content (10%): 69 — Content and design choices are well matched to the product: mono/uppercase formatting for hard technical data (force, travel, dimensions) signals precision, feature cards are captioned with single functional labels (Rotary knob, Hot swappable, RGB light bar) tied directly to the adjacent imagery, and the footer's dense sitemap plus newsletter form support the commerce/marketing goal without crowding the product narrative above the fold.

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

## Curator notes

A near-black background with warm red key lighting lets the keyboard photography do the talking, while a circular ring of custom keycaps and an exploded switch diagram explain the hardware without dense paragraphs. Small mono-style spec tables for force, travel and weight give a dense product page an easy scanning path for anyone comparing details.

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