# Extended Capabilities Grid Schema: Design Details SECTION.md v3.2 Website: Granola Source: https://www.granola.ai/ Source section IDs: gap-e436833c-7055-11718 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Each block pairs a plain-spoken heading and a short description with one relevant mockup, so abstract claims like integrations, privacy and mobile get concrete proof. - A large serif display headline over small sans labels and body copy sets a clear hierarchy, and the left-aligned labels give a long stack a steady rhythm. - Alternating text/image splits with full-width panels, generous whitespace, and photographic or lime-accent backgrounds behind the UI keep a lengthy list from feeling monotonous. What a screenshot can't show: - The recording shows only scrolling past the blocks (about 23s to 36s), with no specific reveals, parallax or transforms. - No font sizes, spacing or padding values were measured, so exact scale and gaps are unknown. Borrow: Pair every feature claim with one concrete, relevant mockup, and vary the block format (split, full-bleed, icon panel) to keep a long list moving. Leave alone: Don't copy Granola's lime-and-olive palette, its Quadrant and Melange typefaces (use a free high-contrast serif with a clean sans instead), or its scenic photo-backed UI frames. ## Classification - Type: feature-grid - Layout: A vertical stack of diverse feature blocks, alternating between text/image splits and full-width graphical showcases. - Styles: minimal, photographic - Confidence: 95% ## Purpose and structure A comprehensive, stacked list of feature showcases, including mobile app usage, software integrations, and privacy settings. Visual signature: A lengthy, varied breakdown of product capabilities using rich UI mockups and scenic background images. ## Components - multiple headings - product UI mockups - platform icons - mobile device frames - photographic backgrounds ## Typography - Display: quadrant — 108px 400 - Heading: quadrant — 86.4px 400 - Body: melange — 16px 400 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #292929 - Primary-Action: primary action #5B6F00 - Surface: surface #F7F7F2 - Accent: accent #B2C248 - Surface: surface #0E0F0C ## Motion evidence - 23.0–36.0s — Scrolling past testimonials to sections showing integration with various meeting apps and calendar syncing on mobile and desktop. (90% confidence) ## Section quality Overall: 59.18/100 (Competent) Scored coverage: 85% - Typography: 62 — Large serif display headline paired with small sans subheads/body creates clear hierarchy; consistent use of the 'quadrant' display face against 'melange' body text is purposeful but the repeated two-column label/description pattern across blocks is fairly standard editorial treatment without distinctive type-driven invention. Next tier: No unexpected scale shifts, type-as-graphic moments, or custom treatments beyond a standard heading/body split to push past polished-familiar. - Composition: 65 — A long vertical stack alternates text/image splits and full-bleed icon/mockup panels with consistent left-aligned labels and generous whitespace, giving a legible rhythm across a lengthy feature list; photographic backgrounds behind UI mockups add some visual variety. Next tier: The alternating split pattern is repeated almost identically block after block without a structural twist, denser interplay, or asymmetry that would elevate it beyond a competent long-scroll template. - Motion: inconclusive — Gemini's motion note only describes scroll progression through content, not specific timestamped visual changes (reveals, transforms, parallax) within this crop. Next tier: Specific timestamped motion evidence (e.g., staggered reveal timing, parallax amount, icon animation) is required to score this axis. - Content: 60 — Each block pairs a plainspoken heading and short description with a relevant mockup (meeting UI, app icons, sharing panel, mobile notes, calendar sync), giving concrete grounding to abstract claims, but the mockups are fairly generic UI chrome screenshots rather than tightly art-directed content. Next tier: Mockups and photography feel like stock-style product screenshots rather than custom-crafted content integration that reinforces the section's narrative with specific design intention. - Originality: 48 — The format—heading, short copy, screenshot in a device/card frame, repeated down the page—is an extremely common SaaS feature-grid convention; the lime-accent icon panel is a minor distinguishing touch but doesn't offset the overall genericness. Next tier: Needs a differentiating structural or visual idea beyond the standard alternating feature-list template to move past familiar. - Adaptability: 58 — The repeating label/description + mockup pattern is modular and the icon/photo backgrounds are swappable skin elements, so structure and content are reasonably separable, though repeated bespoke photographic treatments per block add some coupling. Next tier: Reliance on custom photographic backgrounds and specific mockup assets ties visual skin closer to content than a fully abstracted, reusable template would allow. Strengths: - Clear, consistent heading+description+visual pattern repeated at scale, aiding scannability across a long list of features - Good use of whitespace and section breaks to keep a lengthy content block from feeling cluttered - Photographic backgrounds behind UI mockups add some textural variety to an otherwise clean, minimal layout Weaknesses: - Highly conventional feature-grid/list format with no structural differentiation between blocks - Mockups read as generic UI screenshots rather than custom-crafted content integration - No distinctive typographic or layout device beyond a standard large-serif-heading/small-body split - Motion cannot be assessed from supplied evidence Why it does not reach the next tier: The section executes a familiar alternating feature-list pattern cleanly but repeats the same structural beat many times without variation, relies on generic-feeling UI mockups, and lacks any distinguishing compositional or typographic idea that would make it feel memorable or hard to substitute. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the repeating label+description+visual block structure and spacing rhythm, but swap in new photography, icons, and mockups; the pattern adapts easily to other SaaS feature lists provided equivalent visual assets are supplied. What transfers: - Alternating text/image-block layout pattern - Heading + short description label structure - Icon/mockup panel treatment within rounded cards Dependencies: - Custom photographic backgrounds - Specific product UI mockup assets - Brand-specific accent color and icon set ## 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 state inconclusive due to lack of specific timestamped visual change evidence - Full page screenshot not visible beyond provided crop, so section-to-section transition context is limited ## 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: two-column - Layout: A vertical stack of diverse feature blocks, alternating between text/image splits and full-width graphical showcases. - Styles: minimal, photographic - Components: multiple headings, product UI mockups, platform icons, mobile device frames, photographic backgrounds - Purpose: A comprehensive, stacked list of feature showcases, including mobile app usage, software integrations, and privacy settings. - Visual signature: A lengthy, varied breakdown of product capabilities using rich UI mockups and scenic background images. - Place on the page: 8 of 11, after Testimonials (`granola-ai:testimonials_dark_cards`), before Feature collection (`granola-ai:integration_logos`) ### 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": "108px", "family": "quadrant", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Used for the largest headings on the page (108px, 'quadrant'), serving a primary display purpose.", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "104.8px", "letterSpacing": "-2.2px" }, { "role": "heading", "size": "86.4px", "family": "quadrant", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Used for the main H1 in the hero section (86.4px, 'quadrant').", "sampleId": "font-6", "confidence": 0.95, "lineHeight": "80.4px", "letterSpacing": "-1.7px" }, { "role": "body", "size": "16px", "family": "melange", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-18: computed CSS at 1440×1000; AI role: Used for standard descriptive paragraphs (16px, 'melange', sans-serif).", "sampleId": "font-18", "confidence": 0.9, "lineHeight": "24px", "letterSpacing": "normal" } ] } ``` ### 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": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(255, 255, 255); AI role: Pure white, used as the primary background for several sections and cards.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#292929", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(41, 41, 41); AI role: Dark charcoal, the primary color for body copy and headings.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#5B6F00", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-14: computed rgb(91, 111, 0); AI role: Dark green, used for primary 'Download for free' call-to-action buttons.", "sampleId": "color-14", "confidence": 0.9 }, { "hex": "#F7F7F2", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(247, 247, 242); AI role: An off-white/beige used as an alternate section background to delineate content areas.", "sampleId": "color-3", "confidence": 0.85 }, { "hex": "#B2C248", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-4: computed rgb(178, 194, 72); AI role: Vivid lime green, used for large accent sections (e.g., the Granola Chat feature block).", "sampleId": "color-4", "confidence": 0.85 }, { "hex": "#0E0F0C", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-6: computed rgb(14, 15, 12); AI role: Near-black, used as the background for the logo strip and testimonial sections.", "sampleId": "color-6", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Button radii appear fully rounded (pill-shaped). Product UI mockups have consistent, moderate border radii.", "density": "The overall density is low. The design favors large typography and ample whitespace over tightly packed information.", "evidence": "Observations derived from the spacing in the hero section, the consistent rounded corners on the product mockups (y=3673), the styling of the 'Download' buttons, and the distinct background sections.", "borderStyle": "Borders are generally subtle (e.g., color-12, color-13), used to define UI cards against similar backgrounds, or absent entirely in favor of background color blocking.", "buttonStyle": "Primary buttons are solid, pill-shaped, and use contrasting colors (dark green on light backgrounds, dark grey on dark backgrounds).", "cornerStyle": "Cards and UI elements predominantly feature soft, rounded corners, contrasting with the stark typography.", "contentWidth": "Content is constrained to a central max-width, with backgrounds occasionally bleeding to the full viewport width.", "spacingRhythm": "The layout employs a generous, blocky rhythm. Sections are clearly separated by significant vertical whitespace, and components within sections (like the feature text and UI cards) are often arranged in a loose, asymmetric grid." } ``` ### 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 past testimonials to sections showing integration with various meeting apps and calendar syncing on mobile and desktop. (23s–36s; 90% 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: Alternating text/image-block layout pattern; Heading + short description label structure; Icon/mockup panel treatment within rounded cards - Dependencies: Custom photographic backgrounds; Specific product UI mockup assets; Brand-specific accent color and icon set - Guidance: Reuse the repeating label+description+visual block structure and spacing rhythm, but swap in new photography, icons, and mockups; the pattern adapts easily to other SaaS feature lists provided equivalent visual assets are supplied. ### 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 “Extended Capabilities Grid”. Purpose: A comprehensive, stacked list of feature showcases, including mobile app usage, software integrations, and privacy settings. Structure: two-column. Source layout label: A vertical stack of diverse feature blocks, alternating between text/image splits and full-width graphical showcases.. 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 lengthy, varied breakdown of product capabilities using rich UI mockups and scenic background images. Components: multiple headings, product UI mockups, platform icons, mobile device frames, photographic backgrounds. Style direction: minimal, photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"108px","family":"quadrant","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Used for the largest headings on the page (108px, 'quadrant'), serving a primary display purpose.","sampleId":"font-2","confidence":0.9,"lineHeight":"104.8px","letterSpacing":"-2.2px"} {"role":"heading","size":"86.4px","family":"quadrant","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Used for the main H1 in the hero section (86.4px, 'quadrant').","sampleId":"font-6","confidence":0.95,"lineHeight":"80.4px","letterSpacing":"-1.7px"} {"role":"body","size":"16px","family":"melange","source":"computed","traits":"Regular","weight":"400","evidence":"font-18: computed CSS at 1440×1000; AI role: Used for standard descriptive paragraphs (16px, 'melange', sans-serif).","sampleId":"font-18","confidence":0.9,"lineHeight":"24px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: Pure white, used as the primary background for several sections and cards.","sampleId":"color-2","confidence":0.95} {"hex":"#292929","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(41, 41, 41); AI role: Dark charcoal, the primary color for body copy and headings.","sampleId":"color-1","confidence":0.95} {"hex":"#5B6F00","name":"primary action","role":"primary-action","source":"computed","evidence":"color-14: computed rgb(91, 111, 0); AI role: Dark green, used for primary 'Download for free' call-to-action buttons.","sampleId":"color-14","confidence":0.9} {"hex":"#F7F7F2","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(247, 247, 242); AI role: An off-white/beige used as an alternate section background to delineate content areas.","sampleId":"color-3","confidence":0.85} {"hex":"#B2C248","name":"accent","role":"accent","source":"computed","evidence":"color-4: computed rgb(178, 194, 72); AI role: Vivid lime green, used for large accent sections (e.g., the Granola Chat feature block).","sampleId":"color-4","confidence":0.85} {"hex":"#0E0F0C","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(14, 15, 12); AI role: Near-black, used as the background for the logo strip and testimonial sections.","sampleId":"color-6","confidence":0.8} 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 past testimonials to sections showing integration with various meeting apps and calendar syncing on mobile and desktop. (90% confidence) Transfer these principles: Alternating text/image-block layout pattern; Heading + short description label structure; Icon/mockup panel treatment within rounded cards. Dependencies: Custom photographic backgrounds; Specific product UI mockup assets; Brand-specific accent color and icon set. Adaptation guidance: Reuse the repeating label+description+visual block structure and spacing rhythm, but swap in new photography, icons, and mockups; the pattern adapts easily to other SaaS feature lists provided equivalent visual assets are supplied. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.