# Curated blocks library Schema: Design Details SECTION.md v3.2 Website: Butter Source: https://www.butter.video/ Source section IDs: gap-9c1de5a2-3220-4566 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The two-column split pairs a quiet text block on the left with a self-contained dark panel on the right, so the eye lands on the panel with plenty of negative space around it. - A small mono eyebrow label above a large display heading sets a clear hierarchy before the short descriptive copy. - The 2x2 icon grid shows real examples (Inflate, Glow, Focus, Halftone) that prove the copy's claim, and the saturated icons stand out against the dark panel and the near-white canvas. What a screenshot can't show: - In the recording, some icons animate internally between about 13 and 16 seconds, such as a glowing 'G' and a moving halftone pattern, as the panel scrolls into view. - No font sizes, letter spacing or section padding were measured, so exact scale and spacing are unknown. Borrow: Put a believable product mockup beside short copy, and let its contents demonstrate the claim while small looping details hint at what the product does. Leave alone: Don't copy Butter's specific icon art, the glowing G, the halftone effect or its DieGrotesk display type; use a free geometric grotesk instead. ## Classification - Type: feature-card - Layout: Two-column text and grid layout - Styles: minimal, colourful - Confidence: 92% ## Purpose and structure A two-column section introducing curated blocks with a dark UI grid of colorful app-like icons. Visual signature: A dark rectangular panel displaying vibrant, varied square icons right beside a simple descriptive text block. ## Components - section text block - dark interface panel - 2x2 icon grid - glowing UI elements ## 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 - 13.0–16.0s — Scrolling further reveals a mock UI panel on the right displaying a grid of stylized 'blocks'. Some blocks exhibit internal animation, like the glowing 'G' and moving halftone patterns. (92% confidence) ## Section quality Overall: 61.00/100 (Good) Scored coverage: 100% - Typography: 62 — Clean large display type with a small mono-style eyebrow label creates clear hierarchy; the pairing of DieGrotesk display with mono caption is polished but fairly standard for this genre of product marketing site. Next tier: Needs a more distinctive type treatment or scale contrast to move beyond familiar polished hierarchy. - Composition: 66 — Two-column split with generous negative space on the left and a self-contained dark panel on the right gives good balance and focus; the 2x2 icon grid inside the panel is well-aligned and the panel reads as a believable UI artifact rather than decoration. Next tier: Layout is a standard text-left/visual-right split with no compositional tension or unexpected framing that would push it into memorable territory. - Motion: 58 — Gemini reports specific timestamped internal animations (glowing G, moving halftone pattern) within icons during reveal, giving concrete evidence of a small polish layer, but the motion is confined to decorative icon loops rather than orchestrating the section's reveal or hierarchy. Next tier: Motion needs to extend to compositional choreography (e.g., staggered reveal of grid items, panel entrance) rather than isolated icon-level loops to read as more than a polish detail. - Content: 60 — The icon grid examples (Inflate, Glow, Focus, Halftone) directly illustrate the copy's claim of varied motion/effect blocks, giving the mockup real explanatory purpose rather than being generic filler. Next tier: Content integration is functional but the icons are simple labeled previews; deeper integration would show how a block is actually used or previewed in context. - Originality: 58 — A dark mock UI panel with colorful app-icon-style previews is a recognizable device in dev-tool marketing sites; it's executed cleanly but is not a distinct structural idea. Next tier: Lacks a unique compositional or interaction concept that couldn't be substituted with any other icon-grid mockup pattern. - Adaptability: 60 — The two-column structure, text block, and icon-grid panel are clearly separable: hierarchy (label/heading/panel) is distinct from skin (dark UI, icon art, glow effects), and the grid pattern generalizes to other icon sets. Next tier: Dependence on bespoke icon artwork (gradient blobs, halftone photo) ties the visual impact closely to specific assets, limiting skin-only reuse without new icon content. Strengths: - Clear two-column hierarchy separating explanatory copy from a concrete visual proof - Icon grid directly illustrates the variety of block types named in the copy - Small timestamped internal icon animations add a believable, lived-in UI feel Weaknesses: - Layout and panel treatment are a familiar dark-UI-mockup convention with no distinguishing structural idea - Motion evidence is limited to isolated icon loops rather than section-level choreography - Visual impact leans on bespoke icon artwork rather than structural design decisions Why it does not reach the next tier: The section is well-executed and purposeful but relies on a conventional two-column text/UI-mockup layout and decorative icon-level motion; it lacks the compositional tension, unique structural idea, or choreographed motion needed to feel distinctly memorable rather than merely polished. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the layout skeleton and icon-grid container, but replace icon imagery with new assets matching the target brand; the internal icon animations will need re-creation since they are asset-specific. What transfers: - Two-column text-left, visual-right structure - 2x2 icon grid pattern inside a dark panel - Label + heading + supporting copy hierarchy Dependencies: - Bespoke icon artwork (gradient blob type, glow effect, blurred text, halftone photo) - Dark panel skin contrasted against light canvas ## 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 scored only from Gemini's described icon-level animations, not full section timing - No deterministic spacing/radius/shadow values supplied for the panel itself, limiting precision of composition judgment ## 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-card - Structure: two-column - Layout: Two-column text and grid layout - Styles: minimal, colourful - Components: section text block, dark interface panel, 2x2 icon grid, glowing UI elements - Purpose: A two-column section introducing curated blocks with a dark UI grid of colorful app-like icons. - Visual signature: A dark rectangular panel displaying vibrant, varied square icons right beside a simple descriptive text block. - Place on the page: 5 of 15, after Feature collection (`butter-video:cce15aa2-25c8-44c4-8c60-d50d3ed546fe`), before Feature collection (`butter-video:f94553c5-e98d-46ef-bde5-1b22c5681f5d`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. ### 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 1. **scroll** — Scrolling further reveals a mock UI panel on the right displaying a grid of stylized 'blocks'. Some blocks exhibit internal animation, like the glowing 'G' and moving halftone patterns. (13s–16s; 92% 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: Two-column text-left, visual-right structure; 2x2 icon grid pattern inside a dark panel; Label + heading + supporting copy hierarchy - Dependencies: Bespoke icon artwork (gradient blob type, glow effect, blurred text, halftone photo); Dark panel skin contrasted against light canvas - Guidance: Reuse the layout skeleton and icon-grid container, but replace icon imagery with new assets matching the target brand; the internal icon animations will need re-creation since they are asset-specific. ### 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 “Curated blocks library”. Purpose: A two-column section introducing curated blocks with a dark UI grid of colorful app-like icons. Structure: two-column. Source layout label: Two-column text and grid layout. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. Visual signature to preserve at the pattern level: A dark rectangular panel displaying vibrant, varied square icons right beside a simple descriptive text block. Components: section text block, dark interface panel, 2x2 icon grid, glowing UI elements. Style direction: minimal, colourful. 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. Motion evidence: scroll: Scrolling further reveals a mock UI panel on the right displaying a grid of stylized 'blocks'. Some blocks exhibit internal animation, like the glowing 'G' and moving halftone patterns. (92% confidence) Transfer these principles: Two-column text-left, visual-right structure; 2x2 icon grid pattern inside a dark panel; Label + heading + supporting copy hierarchy. Dependencies: Bespoke icon artwork (gradient blob type, glow effect, blurred text, halftone photo); Dark panel skin contrasted against light canvas. Adaptation guidance: Reuse the layout skeleton and icon-grid container, but replace icon imagery with new assets matching the target brand; the internal icon animations will need re-creation since they are asset-specific. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.