# UI snippet feature cards with marquee

Schema: Design Details SECTION.md v3.2
Website: Blacksmith
Source: https://www.blacksmith.sh/
Source section IDs: gap-07a61a6d-1890-3074
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Three equal bordered cards sit tightly together, and the middle one is filled with the accent colour, which gives the eye one clear focal point.
- Each card holds a believable UI snippet (log search, failure list, bar chart) that proves its claim better than a generic icon would.
- A full-width ticker band along the bottom closes the section and contrasts with the contained grid, while dark borders on a pale canvas keep the look crisp.

What a screenshot can't show:
- The recording only shows the cards scrolling into view, so there is no confirmed marquee speed, direction or hover behaviour.
- No font sizes, letter spacing or padding were measured, so the heading tightness and card spacing can't be confirmed from the capture.

Borrow: Highlight one card in a single accent fill within an otherwise uniform grid, and show real product snippets inside each card to prove the claim.
Leave alone: Don't copy the exact neon yellow-green accent, the IBM Plex Sans and mono pairing, or the Blacksmith-specific log and chart mockups; use your own palette, a free grotesque or mono alternative, and your own product visuals.

## Classification

- Type: feature-grid
- Layout: A centered heading and button atop a three-column grid of tightly packed cards, bounded at the bottom by a full-width continuous marquee banner.
- Styles: brutalist, bold, colourful
- Confidence: 95%

## Purpose and structure

A distinct feature section highlighting product capabilities using three side-by-side cards containing stylized UI snippets, underscored by a scrolling ticker tape.

Visual signature: Three boxy feature cards, the middle one highlighted in neon green, with a repeating yellow ticker tape along the bottom edge.

## Components

- section heading
- secondary button
- feature cards
- UI mockups
- scrolling marquee

## Typography

- Display: IBM Plex Sans — 64px 500
- Heading: IBM Plex Sans — 40px 500
- Body: IBM Plex Sans — 16px 400
- Mono: IBM Plex Mono — 14px 500

## Functional palette

- Accent: accent #F0FB29
- Text: text #202020
- Border: border #202020
- Canvas: canvas #F5F5F5

## Motion evidence

- 8.0–12.0s — The page is scrolled down to show three cards with features of the platform. (95% confidence)

## Section quality

Overall: 61.25/100 (Good)
Scored coverage: 100%

- Typography: 62 — Clear hierarchy using IBM Plex Sans heading with tight negative letter-spacing against mono uppercase labels and body text; functional but a fairly standard two-family pairing without distinctive treatment within this crop. Next tier: No unique typographic moment (e.g., expressive scale shifts, custom ligatures) beyond conventional heading/body/mono pairing.
- Composition: 68 — Strong grid logic: three bordered cards of equal width, middle card flipped to neon yellow fill creating a clear focal point, UI mockups nested within consistent padding, bottom marquee anchoring the section with a full-bleed band that contrasts the card grid's containment. Next tier: Layout is a fairly conventional three-up feature grid; the color-flip device is the only distinguishing compositional idea, not enough asymmetry or unexpected spatial relationships to reach strong/memorable.
- Motion: 52 — Only motion evidence is a scroll-reveal of the cards into view (8-12s), which is a generic scroll action, not a designed animation detail. Next tier: No timestamped evidence of marquee speed, hover states, or card entrance choreography beyond basic scroll visibility.
- Content: 65 — UI mockups (log search, failure list, bar chart) are well-integrated into card bodies, directly illustrating each feature's claim with believable product chrome rather than generic icons. Next tier: Mockups are simplified placeholder-style UI (dotted backgrounds, basic tables) rather than fully realized, bespoke interface detail that would elevate perceived craft.
- Originality: 58 — The single-card color inversion (neon yellow middle panel) and ticker marquee are a recognizable stylistic signature, but the three-card-plus-marquee feature pattern itself is common in SaaS marketing sites. Next tier: Needs a structural or interaction idea beyond color-swap highlighting and a stock marquee to be distinctive rather than familiar.
- Adaptability: 60 — Grid structure, card borders, and color-accent logic are cleanly separable tokens (border color, accent fill, card content) that could reskin to other palettes/content with moderate effort. Next tier: Marquee and mockup content are fairly bespoke to this product's data points, requiring custom replacement content before reuse.

Strengths:
- Clear three-card grid with one card inverted to the brand accent color for a built-in focal hierarchy
- UI mockups inside cards directly tied to each feature's text claim
- Full-bleed ticker marquee anchors the section and breaks the otherwise boxed grid confinement

Weaknesses:
- Motion evidence limited to generic scroll reveal, no distinct animation choreography confirmed
- Typography pairing (serif-free heading + mono label) is competent but not distinctive on its own
- Feature-grid-with-marquee pattern is a common SaaS layout convention

Why it does not reach the next tier: The section executes a familiar three-card feature grid with a tidy color-highlight device and supporting marquee, but lacks an unconventional structural idea, verified bespoke motion detail, or typographic treatment that would push it past polished/competent into memorable territory.

## Adaptation guidance

- Effort: Medium
- Guidance: Swap card content and mockups for the new product's data while keeping the grid/border/color-accent and marquee structure intact; restyle fonts and accent color via tokens.

What transfers:
- Three-column card grid with border delineation
- Single-card color-accent highlight convention
- Bottom marquee band pattern

Dependencies:
- Specific UI mockup content (search logs, failure lists, charts) tied to this product
- Brand-specific neon yellow accent and dark border palette

## 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 assessed only from a generic scroll-reveal timestamp, no confirmed hover or marquee speed detail
- Exact font rendering and spacing values taken from deterministic site facts, not directly measured in this 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: centered single-column
- Layout: A centered heading and button atop a three-column grid of tightly packed cards, bounded at the bottom by a full-width continuous marquee banner.
- Styles: brutalist, bold, colourful
- Components: section heading, secondary button, feature cards, UI mockups, scrolling marquee
- Purpose: A distinct feature section highlighting product capabilities using three side-by-side cards containing stylized UI snippets, underscored by a scrolling ticker tape.
- Visual signature: Three boxy feature cards, the middle one highlighted in neon green, with a repeating yellow ticker tape along the bottom edge.
- Place on the page: 4 of 10, after Other (`blacksmith-sh:feature_video_grid`), before Testimonials (`blacksmith-sh:testimonials_bento`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### 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": "64px",
      "family": "IBM Plex Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Used for massive statistical numbers (90M+, 200K+) with a large size (64px) and tight letter-spacing.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "72px",
      "letterSpacing": "-4px"
    },
    {
      "role": "heading",
      "size": "40px",
      "family": "IBM Plex Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: Used for primary section headings (40px), like 'The fastest way to run your GitHub Actions'.",
      "sampleId": "font-5",
      "confidence": 0.9,
      "lineHeight": "46px",
      "letterSpacing": "-2.5px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "IBM Plex Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: Standard 16px sans-serif used for descriptive paragraphs and general text content.",
      "sampleId": "font-8",
      "confidence": 0.9,
      "lineHeight": "20px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "14px",
      "family": "IBM Plex Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Uppercase monospace font used extensively for labels, buttons, and navigation, providing a technical feel.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "16px",
      "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": "#F0FB29",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-1: computed rgb(240, 251, 41); AI role: Vibrant neon yellow (#F0FB29) used heavily for prominent sections, buttons, and highlighting key elements.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#202020",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(32, 32, 32); AI role: Dark grey/black (#202020) is the primary color for most text, ensuring high contrast against light backgrounds.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#202020",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-3: computed rgb(32, 32, 32); AI role: The same dark color (#202020) is frequently used for structural borders and lines throughout the design.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#F5F5F5",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(245, 245, 245); AI role: Light grey (#F5F5F5) serves as the base background for many sections, creating a neutral backdrop.",
      "sampleId": "color-2",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Rounding is reserved for specific interactive elements like buttons (pill-shaped) and specific UI abstractions (like the 'Powered by Blacksmith' badge).",
  "density": "The overall density is low, leaning towards minimalism, allowing the typography and high-contrast elements to stand out.",
  "evidence": "Visual inspection of the crops reveals the consistent use of borders to define layout (architectural grid), pill buttons (TRY FOR FREE), and distinct background color shifts to mark new sections.",
  "borderStyle": "Extensive use of thin (1px), solid, dark borders to delineate grid structures, sections, and form elements.",
  "buttonStyle": "Pill-shaped buttons; primary buttons are solid dark fills, while secondary are outlined.",
  "cornerStyle": "Predominantly sharp, square corners on major layout blocks and tables, reinforcing the structured, brutalist feel.",
  "contentWidth": "Content is generally constrained within a centered column, though specific elements (like the marquee or full-width color blocks) span the entire viewport.",
  "spacingRhythm": "Generous vertical spacing between major sections, with tighter, uniform padding inside grid-based components."
}
```

### 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** — The page is scrolled down to show three cards with features of the platform. (8s–12s; 95% 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: medium
- What transfers: Three-column card grid with border delineation; Single-card color-accent highlight convention; Bottom marquee band pattern
- Dependencies: Specific UI mockup content (search logs, failure lists, charts) tied to this product; Brand-specific neon yellow accent and dark border palette
- Guidance: Swap card content and mockups for the new product's data while keeping the grid/border/color-accent and marquee structure intact; restyle fonts and accent color via 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 “UI snippet feature cards with marquee”.

Purpose: A distinct feature section highlighting product capabilities using three side-by-side cards containing stylized UI snippets, underscored by a scrolling ticker tape.

Structure: centered single-column. Source layout label: A centered heading and button atop a three-column grid of tightly packed cards, bounded at the bottom by a full-width continuous marquee banner.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Three boxy feature cards, the middle one highlighted in neon green, with a repeating yellow ticker tape along the bottom edge.

Components: section heading, secondary button, feature cards, UI mockups, scrolling marquee.

Style direction: brutalist, bold, colourful.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"64px","family":"IBM Plex Sans","source":"computed","traits":"Regular","weight":"500","evidence":"font-4: computed CSS at 1440×1000; AI role: Used for massive statistical numbers (90M+, 200K+) with a large size (64px) and tight letter-spacing.","sampleId":"font-4","confidence":0.95,"lineHeight":"72px","letterSpacing":"-4px"} {"role":"heading","size":"40px","family":"IBM Plex Sans","source":"computed","traits":"Regular","weight":"500","evidence":"font-5: computed CSS at 1440×1000; AI role: Used for primary section headings (40px), like 'The fastest way to run your GitHub Actions'.","sampleId":"font-5","confidence":0.9,"lineHeight":"46px","letterSpacing":"-2.5px"} {"role":"body","size":"16px","family":"IBM Plex Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: Standard 16px sans-serif used for descriptive paragraphs and general text content.","sampleId":"font-8","confidence":0.9,"lineHeight":"20px","letterSpacing":"normal"} {"role":"mono","size":"14px","family":"IBM Plex Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-6: computed CSS at 1440×1000; AI role: Uppercase monospace font used extensively for labels, buttons, and navigation, providing a technical feel.","sampleId":"font-6","confidence":0.95,"lineHeight":"16px","letterSpacing":"0.5px"}

Color evidence: {"hex":"#F0FB29","name":"accent","role":"accent","source":"computed","evidence":"color-1: computed rgb(240, 251, 41); AI role: Vibrant neon yellow (#F0FB29) used heavily for prominent sections, buttons, and highlighting key elements.","sampleId":"color-1","confidence":0.95} {"hex":"#202020","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(32, 32, 32); AI role: Dark grey/black (#202020) is the primary color for most text, ensuring high contrast against light backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#202020","name":"border","role":"border","source":"computed","evidence":"color-3: computed rgb(32, 32, 32); AI role: The same dark color (#202020) is frequently used for structural borders and lines throughout the design.","sampleId":"color-3","confidence":0.9} {"hex":"#F5F5F5","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(245, 245, 245); AI role: Light grey (#F5F5F5) serves as the base background for many sections, creating a neutral backdrop.","sampleId":"color-2","confidence":0.85}

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: The page is scrolled down to show three cards with features of the platform. (95% confidence)

Transfer these principles: Three-column card grid with border delineation; Single-card color-accent highlight convention; Bottom marquee band pattern.

Dependencies: Specific UI mockup content (search logs, failure lists, charts) tied to this product; Brand-specific neon yellow accent and dark border palette.

Adaptation guidance: Swap card content and mockups for the new product's data while keeping the grid/border/color-accent and marquee structure intact; restyle fonts and accent color via tokens.

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