# Accelerate production cards

Schema: Design Details SECTION.md v3.2
Website: Butter
Source: https://www.butter.video/
Source section IDs: gap-9c1de5a2-11403-13323
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- An asymmetric bento grid pairs one tall black-and-white card with a text block, then settles into two even cards below, so the eye has a clear path and room to rest.
- Each mockup, such as the waveform and the editor timeline with tooltips, ties directly to the performance copy, which makes the claims feel credible.
- Near-black text and cards on a #FAFAFA canvas with generous whitespace give strong contrast, and one oversized typographic card sets a clear hierarchy against the smaller card headings.

What a screenshot can't show:
- The recording showed no specific motion, so hover or entrance behaviour is unknown.
- No font sizes, letter spacing or spacing values were measured, so exact scale and gaps can't be confirmed.

Borrow: Make one card a bold typographic statement and keep its neighbours as quiet product mockups, so a single cell leads the grid.
Leave alone: Don't copy the diagonal black/white split with oversized Japanese text, or the DieGrotesk typeface; use a free neo-grotesque sans and your own signature card.

## Classification

- Type: feature-grid
- Layout: Mixed grid / Bento box layout
- Styles: minimal
- Confidence: 96%

## Purpose and structure

A collection of stylized feature cards, including a large typographic card and interface mockups highlighting performance.

Visual signature: Clean, rounded grey and black cards arranged in a grid, featuring high-contrast Japanese text alongside abstract graphic mockups.

## Components

- section heading
- bento box cards
- large typography card
- video editor mockups
- UI tooltip popups

## Typography

- Display: DieGrotesk — 107.6px 400
- Heading: DieGrotesk — 60.4px 400
- Body: DieGrotesk — 16px 400
- Mono: ABCDiatype — 13.5px 400

## Functional palette

- Canvas: canvas #FAFAFA
- Text: text #0F0F0F
- Primary-Action: primary action #1E1E1E

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 63.29/100 (Good)
Scored coverage: 85%

- Typography: 66 — Clear typographic hierarchy with the large DieGrotesk headline, Japanese display card text, and consistent body copy. The contrast between large localized text and smaller card headings is deliberate and well-controlled, but weight/size variety is limited and letter-spacing is uniform across roles, keeping it polished rather than distinctive. Next tier: Needs more differentiated type treatment (scale jumps, weight contrast, or custom ligatures) beyond a single family at varying sizes to reach strong/memorable.
- Composition: 68 — Asymmetric bento grid balances a tall black/white card against a text block, then drops to two even cards below; whitespace is generous and alignment is clean. The black-to-white diagonal split in the top-right card is a nice compositional move, but the lower two cards are a fairly conventional repeated pattern. Next tier: Lower grid repeats a generic two-card layout; more varied card proportions or interlocking elements would push composition into strong/memorable territory.
- Motion: not_assessed — No timestamped motion evidence supplied for this section. Next tier: Provide specific timestamped visible motion changes to assess this axis.
- Content: 62 — Mockups (waveform visual, editor timeline with tooltip overlays) are purposeful and tied to the copy about performance and programmability, giving believable product context rather than generic stock imagery. Next tier: Imagery, while on-topic, reads as fairly standard SaaS UI mockup; richer, more specific product detail would be needed for a higher tier.
- Originality: 58 — The diagonal black/white split card with oversized Japanese text is a distinctive touch, but the rest of the layout (bento grid, rounded cards, arrow icons) is a familiar SaaS template pattern seen widely. Next tier: Needs a more structurally unique idea beyond one standout card to differentiate from common bento-grid feature sections.
- Adaptability: 60 — Card-based grid with clear token usage (radius, spacing, color roles) means structure, hierarchy and skin are reasonably separable; swapping imagery/text per card is straightforward given modular bento cells. Next tier: Dependency on the specific diagonal-split graphic treatment and custom mockups limits a fully abstracted, skin-agnostic system.

Strengths:
- Clean, well-balanced bento grid with generous whitespace
- Distinctive diagonal black/white card with oversized localized type as a visual anchor
- Consistent card styling (rounded corners, grey/black tonal palette) reinforcing cohesion
- UI mockups are contextually relevant to the feature copy

Weaknesses:
- Lower two-card row is a fairly generic repeated pattern
- Single typeface family across all roles limits typographic variety
- Overall concept (bento grid + arrow CTA cards) is a common SaaS pattern
- No motion evidence provided to assess interactive polish

Why it does not reach the next tier: The section is well-executed and tidy but relies on a widely-used bento/feature-card template; aside from the diagonal split card, no other distinguishing structural idea is present, and typographic/compositional variety is too narrow for a 70+ strong tier verdict.

## Adaptation guidance

- Effort: Medium
- Guidance: Retain the grid structure and card component logic; swap mockup imagery and copy for new context, and adjust the diagonal-card treatment if the hero visual differs.

What transfers:
- Bento grid structure with mixed card sizes
- Card component with heading + arrow icon + description pattern
- Diagonal split dark/light card treatment for a hero feature

Dependencies:
- Specific mockup graphics (waveform visualization, editor timeline UI)
- Japanese display text treatment tied to the diagonal card

## 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 assessed due to lack of timestamped evidence
- Exact font rendering and spacing precision not verifiable from static crop

## 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: Mixed grid / Bento box layout
- Styles: minimal
- Components: section heading, bento box cards, large typography card, video editor mockups, UI tooltip popups
- Purpose: A collection of stylized feature cards, including a large typographic card and interface mockups highlighting performance.
- Visual signature: Clean, rounded grey and black cards arranged in a grid, featuring high-contrast Japanese text alongside abstract graphic mockups.
- Place on the page: 13 of 15, after Feature collection (`c19c5a0e-44c4-432d-9717-0baf98ce2ba2`), before Gallery (`butter-video:58c42b67-72c9-48ba-ad06-28335fa8e239`)

### 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": "107.6px",
      "family": "DieGrotesk",
      "source": "curator",
      "traits": "Regular",
      "weight": "400",
      "evidence": "Curator assigned font role",
      "confidence": 1,
      "lineHeight": "106.7px",
      "letterSpacing": "0.3px"
    },
    {
      "role": "heading",
      "size": "60.4px",
      "family": "DieGrotesk",
      "source": "curator",
      "traits": "Regular",
      "weight": "400",
      "evidence": "Curator assigned font role",
      "confidence": 1,
      "lineHeight": "58.6px",
      "letterSpacing": "0.4px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "DieGrotesk",
      "source": "curator",
      "traits": "Regular",
      "weight": "400",
      "evidence": "Curator assigned font role",
      "confidence": 1,
      "lineHeight": "21px",
      "letterSpacing": "0.7px"
    },
    {
      "role": "mono",
      "size": "13.5px",
      "family": "ABCDiatype",
      "source": "curator",
      "traits": "Regular",
      "weight": "400",
      "evidence": "Curator assigned font role",
      "confidence": 1,
      "lineHeight": "24px",
      "letterSpacing": "0.5px"
    }
  ]
}
```

### 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": "#FAFAFA",
      "name": "canvas",
      "role": "canvas",
      "source": "curator",
      "evidence": "Curator assigned functional color role",
      "confidence": 1
    },
    {
      "hex": "#0F0F0F",
      "name": "text",
      "role": "text",
      "source": "curator",
      "evidence": "Curator assigned functional color role",
      "confidence": 1
    },
    {
      "hex": "#1E1E1E",
      "name": "primary action",
      "role": "primary-action",
      "source": "curator",
      "evidence": "Curator assigned functional color role",
      "confidence": 1
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Large radii are used extensively, creating pill shapes for buttons and navigation, and soft corners for large UI mockups.",
  "density": "Low density. The design prioritizes large imagery and significant whitespace over packing in information.",
  "evidence": "Observations based on the visual layout, spacing between components, and styling of buttons and interactive elements.",
  "borderStyle": "Minimal. Borders are rarely used, relying instead on color contrast (dark UI elements on light background) to define boundaries.",
  "buttonStyle": "Solid dark fills with rounded corners and light text for primary actions. Text-only for secondary actions.",
  "cornerStyle": "Rounded. Most structural elements like floating navigation, buttons, and feature cards use significant border radii.",
  "contentWidth": "Wide but constrained. The content flows in a centered column, utilizing a wide grid for feature layouts.",
  "spacingRhythm": "Generous and airy. Sections are separated by large amounts of vertical whitespace."
}
```

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

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: 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: medium
- What transfers: Bento grid structure with mixed card sizes; Card component with heading + arrow icon + description pattern; Diagonal split dark/light card treatment for a hero feature
- Dependencies: Specific mockup graphics (waveform visualization, editor timeline UI); Japanese display text treatment tied to the diagonal card
- Guidance: Retain the grid structure and card component logic; swap mockup imagery and copy for new context, and adjust the diagonal-card treatment if the hero visual differs.

### 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; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Accelerate production cards”.

Purpose: A collection of stylized feature cards, including a large typographic card and interface mockups highlighting performance.

Structure: grid. Source layout label: Mixed grid / Bento box layout. 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: Clean, rounded grey and black cards arranged in a grid, featuring high-contrast Japanese text alongside abstract graphic mockups.

Components: section heading, bento box cards, large typography card, video editor mockups, UI tooltip popups.

Style direction: minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"107.6px","family":"DieGrotesk","source":"curator","traits":"Regular","weight":"400","evidence":"Curator assigned font role","confidence":1,"lineHeight":"106.7px","letterSpacing":"0.3px"} {"role":"heading","size":"60.4px","family":"DieGrotesk","source":"curator","traits":"Regular","weight":"400","evidence":"Curator assigned font role","confidence":1,"lineHeight":"58.6px","letterSpacing":"0.4px"} {"role":"body","size":"16px","family":"DieGrotesk","source":"curator","traits":"Regular","weight":"400","evidence":"Curator assigned font role","confidence":1,"lineHeight":"21px","letterSpacing":"0.7px"} {"role":"mono","size":"13.5px","family":"ABCDiatype","source":"curator","traits":"Regular","weight":"400","evidence":"Curator assigned font role","confidence":1,"lineHeight":"24px","letterSpacing":"0.5px"}

Color evidence: {"hex":"#FAFAFA","name":"canvas","role":"canvas","source":"curator","evidence":"Curator assigned functional color role","confidence":1} {"hex":"#0F0F0F","name":"text","role":"text","source":"curator","evidence":"Curator assigned functional color role","confidence":1} {"hex":"#1E1E1E","name":"primary action","role":"primary-action","source":"curator","evidence":"Curator assigned functional color role","confidence":1}

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.

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

Transfer these principles: Bento grid structure with mixed card sizes; Card component with heading + arrow icon + description pattern; Diagonal split dark/light card treatment for a hero feature.

Dependencies: Specific mockup graphics (waveform visualization, editor timeline UI); Japanese display text treatment tied to the diagonal card.

Adaptation guidance: Retain the grid structure and card component logic; swap mockup imagery and copy for new context, and adjust the diagonal-card treatment if the hero visual differs.

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