# Macro Feature Bento Grid

Schema: Design Details SECTION.md v3.2
Website: Raycast Keyboard
Source: https://www.raycast.com/keyboard
Source section IDs: gap-3f4fd6fb-2355-3560
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Cards of different sizes (large hero shots, stacked small cards, wide stat cards) give the grid rhythm and leave generous negative space below a left-aligned heading.
- Each macro photo carries a functional callout, such as a dimension line, a battery-hours stat or OS icons, so the image backs up the feature claim.
- Hairline borders and rounded corners unify the dark cards, and the heading's white-over-muted-grey two-tone adds hierarchy without extra styling.

What a screenshot can't show:
- The recording only shows the grid scrolling into view between about 9s and 13s, with no per-card timing or hover behavior.
- No type sizes, letter spacing or spacing values were measured, so exact scale and gaps are unknown.

Borrow: Pair every close-up image with one concrete data callout, and vary card sizes inside a consistent border and radius system.
Leave alone: Don't copy Raycast's near-black canvas with grey text, its keyboard macro photography, or its specific knob and lighting shots; use your own product imagery and palette.

## Classification

- Type: feature-grid
- Layout: Bento-style grid with varying card sizes arranged below a left-aligned heading.
- Styles: minimal, photographic
- Confidence: 98%

## Purpose and structure

An asymmetric grid of dark cards showcasing macro photography and renders of hardware features.

Visual signature: A collection of dark, rounded cards containing close-up shots of hardware elements like rotary knobs and lighting.

## Components

- h2
- p
- bento-card
- image
- icon

## Typography

- Display: Inter — 50px 500
- Heading: Inter — 32px 500
- Body: Inter — 16px 400
- Mono: GeistMono — 12px 500

## Functional palette

- Canvas: canvas #07080A
- Text: text #FFFFFF
- Muted-Text: muted text #9C9C9D
- Primary-Action: primary action #E6E6E6

## Motion evidence

- 9.0–13.0s — A grid of feature cards scrolls into view. (88% confidence)

## Section quality

Overall: 59.65/100 (Competent)
Scored coverage: 85%

- Typography: 56 — Two-weight heading (white over muted grey) and small uppercase label pills are clean but rely entirely on the supplied Inter system stack with no distinctive scale or treatment beyond standard hierarchy. Next tier: Needs a more deliberate typographic voice (unusual scale jump, custom numeral treatment, or label styling) rather than default heading/label pairing to move beyond competent.
- Composition: 64 — Asymmetric bento arrangement with varied card proportions (large hero shots, stacked smaller cards, wide stat cards) creates decent rhythm and negative space, consistent hairline borders unify the grid. Next tier: The bento-grid-of-dark-cards pattern is now a common hardware-site convention; composition needs a structural twist (unconventional card shapes, overlap, or asymmetric grid logic) to read as memorable rather than familiar.
- Motion: inconclusive — Only a generic 'grid scrolls into view' moment is reported without specific per-card timing or interaction detail. Next tier: Need timestamped evidence of distinct motion per card (stagger, hover reveal, number count-up) to assess.
- Content: 66 — Strong integration of macro photography with functional callouts (dimension line with measurement, battery hours stat, OS compatibility icons) ties imagery directly to feature claims. Next tier: Content pairing is good but still a straightforward label-over-photo convention; needs a less expected way of surfacing specs to reach strong tier.
- Originality: 46 — Dark bento grids with macro hardware photography and small label tags are now a widely repeated template across hardware landing pages. Next tier: Requires a layout, labeling system, or interaction idea that isn't directly traceable to the now-standard Apple-style bento showcase.
- Adaptability: 66 — Grid structure, card sizing logic, and label/stat components are clearly separable from the dark skin and specific photography, and could be reskinned with different imagery and palette. Next tier: Would benefit from explicit grid-span/token rules in evidence to confirm reuse beyond visual guess.

Strengths:
- Varied card sizing creates a believable asymmetric bento rhythm without feeling random
- Dimension callout with measurement line and stat cards tie feature copy directly to imagery
- Consistent hairline border and dark card treatment unify disparate photography styles

Weaknesses:
- Bento grid of dark hardware macro shots is a very common pattern on current hardware marketing sites
- Typography is default Inter hierarchy with no distinctive treatment
- Motion evidence is too generic to assess quality
- Icon and label sizing across cards feels slightly inconsistent in the crop

Why it does not reach the next tier: Execution is tidy and well-organized but the layout, label system, and typography all sit within an increasingly standard hardware-bento convention; nothing here is hard to substitute with another brand's near-identical grid.

## Adaptation guidance

- Effort: Low
- Guidance: Reskin by swapping photography and palette while keeping grid spans and label/stat card components; typography and borders transfer directly via existing tokens.

What transfers:
- Asymmetric bento grid structure with varied card spans
- Label-pill-over-photo pattern for feature callouts
- Stat/measurement card format (number + unit + icon)

Dependencies:
- Dark canvas palette and hairline border treatment
- High-quality macro hardware photography assets
- Specific icon set (Apple/Windows glyphs, bluetooth icon)

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- Motion not scored due to lack of specific timestamped detail
- No deterministic spacing/radius values provided, so composition precision is visually estimated

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: feature-grid
- Structure: grid
- Layout: Bento-style grid with varying card sizes arranged below a left-aligned heading.
- Styles: minimal, photographic
- Components: h2, p, bento-card, image, icon
- Purpose: An asymmetric grid of dark cards showcasing macro photography and renders of hardware features.
- Visual signature: A collection of dark, rounded cards containing close-up shots of hardware elements like rotary knobs and lighting.
- Place on the page: 4 of 7, after Feature collection (`raycast-com:exploded_switch`), before Call to action (`8dbb7393-507a-4afe-acf8-4e57899c983c`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

### 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": [],
  "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": [],
  "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.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### 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
null
```

### Observed motion

1. **scroll** — A grid of feature cards scrolls into view. (9s–13s; 88% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

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: unknownpx 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: low
- What transfers: Asymmetric bento grid structure with varied card spans; Label-pill-over-photo pattern for feature callouts; Stat/measurement card format (number + unit + icon)
- Dependencies: Dark canvas palette and hairline border treatment; High-quality macro hardware photography assets; Specific icon set (Apple/Windows glyphs, bluetooth icon)
- Guidance: Reskin by swapping photography and palette while keeping grid spans and label/stat card components; typography and borders transfer directly via existing tokens.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Macro Feature Bento Grid”.

Purpose: An asymmetric grid of dark cards showcasing macro photography and renders of hardware features.

Structure: grid. Source layout label: Bento-style grid with varying card sizes arranged below a left-aligned heading.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

Visual signature to preserve at the pattern level: A collection of dark, rounded cards containing close-up shots of hardware elements like rotary knobs and lighting.

Components: h2, p, bento-card, image, icon.

Style direction: minimal, photographic.

No deterministic crop dimensions were attached.

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}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Motion evidence: scroll: A grid of feature cards scrolls into view. (88% confidence)

Transfer these principles: Asymmetric bento grid structure with varied card spans; Label-pill-over-photo pattern for feature callouts; Stat/measurement card format (number + unit + icon).

Dependencies: Dark canvas palette and hairline border treatment; High-quality macro hardware photography assets; Specific icon set (Apple/Windows glyphs, bluetooth icon).

Adaptation guidance: Reskin by swapping photography and palette while keeping grid spans and label/stat card components; typography and borders transfer directly via existing tokens.

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