# Raycast Keyboard Specifications — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://www.raycast.com/keyboard
Website: The Raycast Keyboard
Section ID: 108bf92a-0b16-4d8c-aba5-cc7437f20bfc
Status: deterministic evidence captured; editorial AI review pending

## Purpose

This is a other section on the Home page. Use the attached crop and measured browser facts to reconstruct its composition. Do not infer unmeasured source values.

## Layout

captured layout

## Visual signature

photographic, bold, dark-mode-native, tech-precision, minimal treatment at 1440×1320px. The crop spans 3560–4880px of a 6159px page.

## Components

- Navigation Bar
- Hero
- Feature Card
- Newsletter Form
- Stat Block
- Footer
- Specification Data Table
- Scroll Driven 3D Explainer

## Evidence note

The geometry, typography, colors, media, and animation parameters below come from saved HTML/CSS/browser evidence when present. Website-level roles are supplied separately. Editorial section judgment remains pending unless the MCP resolves this source ID to a promoted canonical record.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: navigation
- Source type: other
- Structure: captured layout
- Layout: captured layout
- Styles: photographic, bold, dark-mode-native, tech-precision, minimal
- Components: Navigation Bar, Hero, Feature Card, Newsletter Form, Stat Block, Footer, Specification Data Table, Scroll Driven 3D Explainer
- Purpose: other section from the Home page of The Raycast Keyboard.
- Visual signature: Captured visual surface with captured layout. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×1320px; aspect ratio 1.091:1
- Page bounds: 3560–4880px of 6159px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "body/supporting copy",
      "family": "GeistMono",
      "stack": "GeistMono, ui-monospace, SFMono-Regular, \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
      "size": "12px",
      "weight": "500",
      "lineHeight": "19.2px",
      "letterSpacing": "0.3px",
      "sample": "Designed by Raycast and Engineered by NuPhyCustomized by Nichlas Wærnes Andersen and Tim Van Damme",
      "element": "p",
      "occurrences": 1,
      "sourceId": "font-8"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "50px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Inter 50px, weight 500, used for the main hero heading.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "50px",
      "letterSpacing": "-1.2px"
    },
    {
      "role": "heading",
      "size": "32px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Inter 32px, weight 500, used for primary section titles like 'Mechanical feel. Quiet by design.'",
      "sampleId": "font-3",
      "confidence": 0.95,
      "lineHeight": "40px",
      "letterSpacing": "-0.4px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Inter 16px, weight 400, used for descriptive paragraph text explaining features.",
      "sampleId": "font-6",
      "confidence": 0.9,
      "lineHeight": "28px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "12px",
      "family": "GeistMono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: GeistMono 12px, weight 500, uppercase traits, used extensively in data tables for technical specifications.",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "14.4px",
      "letterSpacing": "0.9px"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.2)",
      "alpha": 0.2,
      "appliedAs": [
        "border",
        "text"
      ],
      "occurrences": 25,
      "sourceId": "color-7"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.1)",
      "alpha": 0.10196078431372549,
      "appliedAs": [
        "border"
      ],
      "occurrences": 85,
      "sourceId": "color-8"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#07080A",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(7, 8, 10); AI role: #07080A serves as the primary dark background for the entire page body.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and important body copy.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#9C9C9D",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-4: computed rgb(156, 156, 157); AI role: #9C9C9D used for secondary information, footer links, and subtle descriptors.",
      "sampleId": "color-4",
      "confidence": 0.95
    },
    {
      "hex": "#E6E6E6",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "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.",
      "sampleId": "color-9",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "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).",
  "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.",
  "borderStyle": "Extensive use of 1px solid hairline borders with low opacity white (rgba(255,255,255,0.1)) to define structure without adding visual weight.",
  "buttonStyle": "Mix of solid light-grey/white buttons with dark text for primary actions, and ghost/outline buttons with semi-transparent borders for secondary actions.",
  "cornerStyle": "Consistent use of rounded corners on interactive elements and container cards.",
  "contentWidth": "Content is constrained to a central max-width column, typical of modern desktop layouts, keeping text readable and images focused.",
  "spacingRhythm": "Generous vertical spacing between major sections, allowing product renders to breathe. Tighter grouping within data tables and feature cards."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Observed gaps: 8px.
- Representative content widths: 1160, 500, 453, 450, 259px.
- Layout containers: 8; cards/surfaces: 0; media elements: 12; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 3560,
      "bottom": 4880,
      "pageHeight": 6159
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [
      8
    ],
    "representativeContentWidthsPx": [
      1160,
      500,
      453,
      450,
      259
    ]
  },
  "columns": [
    {
      "element": "a · styles-module__G5OIxG__keycap",
      "size": "56×56px",
      "position": "x 306px, y 4094px",
      "display": "grid",
      "template": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · styles-module__G5OIxG__keycap",
      "size": "56×56px",
      "position": "x 371px, y 4094px",
      "display": "grid",
      "template": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · styles-module__G5OIxG__keycap",
      "size": "56×56px",
      "position": "x 437px, y 4094px",
      "display": "grid",
      "template": "53.7031px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · styles-module__G5OIxG__keycap",
      "size": "56×56px",
      "position": "x 634px, y 4094px",
      "display": "grid",
      "template": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · styles-module__G5OIxG__keycap",
      "size": "56×56px",
      "position": "x 240px, y 4160px",
      "display": "grid",
      "template": "53.7031px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · styles-module__G5OIxG__keycap",
      "size": "56×56px",
      "position": "x 306px, y 4160px",
      "display": "grid",
      "template": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · styles-module__G5OIxG__keycap",
      "size": "56×56px",
      "position": "x 371px, y 4160px",
      "display": "grid",
      "template": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · styles-module__G5OIxG__keycap",
      "size": "56×56px",
      "position": "x 437px, y 4160px",
      "display": "grid",
      "template": "53.7031px",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "8px"
    ],
    "borders": [
      "1px solid rgba(255, 255, 255, 0.1)"
    ],
    "shadows": [
      "rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · styles-module__7v2O_W__keyboard",
    "size": "1160×203px",
    "position": "x 140px, y 3815px",
    "aspectRatio": 5.7,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://www.raycast.com/_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fkeyboard.0ts44wcl2mn2g.webp&w=1200&q=70"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 258px, y 4112px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 324px, y 4112px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 389px, y 4112px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 455px, y 4112px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 521px, y 4112px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 586px, y 4112px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 652px, y 4112px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 258px, y 4178px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 324px, y 4178px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 389px, y 4178px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 455px, y 4178px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "capturedAt": "2026-10-16T21:14:35.678Z",
  "viewportWidth": 1440,
  "bounds": {
    "top": 3560,
    "bottom": 4880,
    "pageHeight": 6159
  },
  "root": null,
  "spacing": {
    "gapsPx": [
      8
    ],
    "representativeContentWidthsPx": [
      1160,
      500,
      453,
      450,
      259
    ]
  },
  "columns": [
    {
      "id": "ld-421",
      "tag": "a",
      "role": null,
      "label": "styles-module__G5OIxG__keycap",
      "rect": {
        "x": 306,
        "y": 4094,
        "width": 56,
        "height": 56
      },
      "display": "grid",
      "columns": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "id": "ld-424",
      "tag": "a",
      "role": null,
      "label": "styles-module__G5OIxG__keycap",
      "rect": {
        "x": 371,
        "y": 4094,
        "width": 56,
        "height": 56
      },
      "display": "grid",
      "columns": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "id": "ld-428",
      "tag": "a",
      "role": null,
      "label": "styles-module__G5OIxG__keycap",
      "rect": {
        "x": 437,
        "y": 4094,
        "width": 56,
        "height": 56
      },
      "display": "grid",
      "columns": "53.7031px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "id": "ld-439",
      "tag": "a",
      "role": null,
      "label": "styles-module__G5OIxG__keycap",
      "rect": {
        "x": 634,
        "y": 4094,
        "width": 56,
        "height": 56
      },
      "display": "grid",
      "columns": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "id": "ld-442",
      "tag": "a",
      "role": null,
      "label": "styles-module__G5OIxG__keycap",
      "rect": {
        "x": 240,
        "y": 4160,
        "width": 56,
        "height": 56
      },
      "display": "grid",
      "columns": "53.7031px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "id": "ld-446",
      "tag": "a",
      "role": null,
      "label": "styles-module__G5OIxG__keycap",
      "rect": {
        "x": 306,
        "y": 4160,
        "width": 56,
        "height": 56
      },
      "display": "grid",
      "columns": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "id": "ld-449",
      "tag": "a",
      "role": null,
      "label": "styles-module__G5OIxG__keycap",
      "rect": {
        "x": 371,
        "y": 4160,
        "width": 56,
        "height": 56
      },
      "display": "grid",
      "columns": "53.7188px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "id": "ld-452",
      "tag": "a",
      "role": null,
      "label": "styles-module__G5OIxG__keycap",
      "rect": {
        "x": 437,
        "y": 4160,
        "width": 56,
        "height": 56
      },
      "display": "grid",
      "columns": "53.7031px",
      "direction": "row",
      "gap": "normal"
    }
  ],
  "cards": [],
  "surfaces": {
    "radii": [
      "8px"
    ],
    "borders": [
      "1px solid rgba(255, 255, 255, 0.1)"
    ],
    "shadows": [
      "rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset"
    ]
  },
  "media": [
    {
      "id": "ld-412",
      "tag": "img",
      "role": null,
      "label": "styles-module__7v2O_W__keyboard",
      "rect": {
        "x": 140,
        "y": 3815,
        "width": 1160,
        "height": 203
      },
      "aspectRatio": 5.7,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://www.raycast.com/_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fkeyboard.0ts44wcl2mn2g.webp&w=1200&q=70",
        "naturalWidth": 1200,
        "naturalHeight": 210,
        "alt": "Raycast mechanical keyboard"
      }
    },
    {
      "id": "ld-419",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 258,
        "y": 4112,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-422",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 324,
        "y": 4112,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-425",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 389,
        "y": 4112,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-429",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 455,
        "y": 4112,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-432",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 521,
        "y": 4112,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-435",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 586,
        "y": 4112,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-440",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 652,
        "y": 4112,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-443",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 258,
        "y": 4178,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-447",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 324,
        "y": 4178,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-450",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 389,
        "y": 4178,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-453",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 455,
        "y": 4178,
        "width": 20,
        "height": 20
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    }
  ],
  "animations": [],
  "coverage": {
    "elementsInSection": 69,
    "cards": 0,
    "media": 12,
    "animations": 0
  },
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ]
}
```

### Observed motion

No timestamped authored motion is attached. Use only restrained baseline transitions.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: Not assessed
- What transfers: Documented hierarchy and composition
- Dependencies: None recorded
- Guidance: Adapt the pattern to the new product and content.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original navigation section inspired by the design evidence titled “Raycast Keyboard Specifications”.

Purpose: other section from the Home page of The Raycast Keyboard.

Structure: captured layout. Source layout label: captured layout. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: Captured visual surface with captured layout. Inspect the crop for image and content hierarchy.

Components: Navigation Bar, Hero, Feature Card, Newsletter Form, Stat Block, Footer, Specification Data Table, Scroll Driven 3D Explainer.

Style direction: photographic, bold, dark-mode-native, tech-precision, minimal.

Observed crop: 1440×1320px (1.091:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"50px","family":"Inter","source":"computed","traits":"Regular","weight":"500","evidence":"font-4: computed CSS at 1440×1000; AI role: Inter 50px, weight 500, used for the main hero heading.","sampleId":"font-4","confidence":0.95,"lineHeight":"50px","letterSpacing":"-1.2px"} {"role":"heading","size":"32px","family":"Inter","source":"computed","traits":"Regular","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Inter 32px, weight 500, used for primary section titles like 'Mechanical feel. Quiet by design.'","sampleId":"font-3","confidence":0.95,"lineHeight":"40px","letterSpacing":"-0.4px"} {"role":"body","size":"16px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Inter 16px, weight 400, used for descriptive paragraph text explaining features.","sampleId":"font-6","confidence":0.9,"lineHeight":"28px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"GeistMono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: GeistMono 12px, weight 500, uppercase traits, used extensively in data tables for technical specifications.","sampleId":"font-1","confidence":0.95,"lineHeight":"14.4px","letterSpacing":"0.9px"}

Color evidence: {"hex":"#07080A","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(7, 8, 10); AI role: #07080A serves as the primary dark background for the entire page body.","sampleId":"color-1","confidence":1} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and important body copy.","sampleId":"color-2","confidence":1} {"hex":"#9C9C9D","name":"muted text","role":"muted-text","source":"computed","evidence":"color-4: computed rgb(156, 156, 157); AI role: #9C9C9D used for secondary information, footer links, and subtle descriptors.","sampleId":"color-4","confidence":0.95} {"hex":"#E6E6E6","name":"primary action","role":"primary-action","source":"computed","evidence":"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.","sampleId":"color-9","confidence":0.9}

Typography measured inside this section: {"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"}]}

Colors measured inside this section: {"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"}]}

Exact section measurements from the saved element map: spacing {"gapsPx":[8],"representativeContentWidthsPx":[1160,500,453,450,259]}; surfaces {"radii":["8px"],"borders":["1px solid rgba(255, 255, 255, 0.1)"],"shadows":["rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset"]}; media [{"tag":"img","rect":{"x":140,"y":3815,"width":1160,"height":203},"aspectRatio":5.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":258,"y":4112,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":324,"y":4112,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":389,"y":4112,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer the documented hierarchy and composition rather than source copy or assets.

No explicit dependencies were recorded.

Adapt the pattern to the new product and content.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.