# Comprehensive Feature Showcase Schema: Design Details SECTION.md v3.2 Website: saybriefly.com Source: https://saybriefly.com/ Source section IDs: gap-10485937-10658-15772 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Each mockup sits beside the exact claim it illustrates, so the copy and the product proof read together at a glance. - A clear type scale (80px display, 30px heading, 20px body) with small pill labels keeps the hierarchy easy to scan through repeated blocks. - The rhythm breaks on purpose: a centered stat callout, a hand-drawn illustration and a full-bleed colorful waveform interrupt the alternating text-and-mockup pairs. What a screenshot can't show: - The recording showed no specific motion, so any animation or scroll behavior is unknown. - No spacing, letter spacing or line height was measured; only the approximate 80/30/20px type sizes come from the review. Borrow: Run a repeatable label, headline, paragraph and mockup unit, then punctuate it with a few distinct set-pieces such as a big stat, an illustration and a bold graphic to reset attention. Leave alone: Don't copy the sofa illustration, the multicolor dictation waveform or the cream and deep green palette; use your own illustration and graphic language, and a free geometric or grotesque sans in place of Bricolage Grotesque and Inter if needed. ## Classification - Type: features - Layout: Alternating text blocks with right-aligned UI mockups, followed by centered illustrations and large dictation graphics. - Styles: illustrative, minimal, colourful - Confidence: 90% ## Purpose and structure A lengthy showcase detailing meeting summaries, natural language dictation, and the user workflow. Visual signature: Includes a '54% of people leave meetings' stat, a person on a sofa illustration, and a colorful abstract dictation waveform. ## Components - headline - ui-mockup - statistic-callout - character-illustration - colorful-graphic ## Typography - Display: Bricolage Grotesque — 80px 800 - Heading: Inter — 30px 600 - Body: Inter — 20px 300 - Mono: Roboto Mono — 16px 400 ## Functional palette - Canvas: canvas #FCFAF5 - Surface: surface #FFFFFF - Text: text #173300 - Muted-Text: muted text #525252 - Border: border #B6B6B6 - Primary-Action: primary action #0A3400 - Accent: accent #FFEB5B - Accent: accent #DD6C3E ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 62.12/100 (Good) Scored coverage: 85% - Typography: 62 — Clear scale (80px display, 30px heading, 20px body) with consistent weight contrast and small label pills reinforcing hierarchy across repeated blocks; execution is competent and legible but the pairing (Bricolage display + Inter body) is a fairly conventional SaaS combination without distinctive letterforms or spacing choices that would push it further. Next tier: Needs a more distinctive typographic treatment or unexpected scale/weight interplay beyond the safe display/heading/body split to read as memorable rather than merely clean. - Composition: 64 — The section alternates text-mockup pairs, then breaks rhythm with a centered highlighted statistic, a hand-drawn illustration wrapped in a wavy stroke, and a full-bleed colorful waveform block—showing real attempt at pacing variation across a long scroll. However roughly half the section is repeated 'label/headline/paragraph/right-aligned mockup' units that read as template filler. Next tier: Reduce repetition of the alternating mockup formula or vary its framing more; the strong illustrative moments are diluted by several near-identical preceding blocks. - Motion: not_assessed — No timestamped motion evidence was supplied for this section (motion_moments empty), so animated behavior cannot be verified. Next tier: Timestamped visible motion evidence is required before this axis can be scored. - Content: 61 — Copy and visuals are tightly paired (mockups illustrate the exact claim above them, the stat callout visually highlights its number, the waveform graphic visually echoes 'dictation'), showing intentional content-to-visual mapping rather than generic stock imagery. Next tier: Several mockup panels (e.g. repeated summary card cropped twice) feel like filler reuse rather than purpose-built content, which caps how integrated the section feels overall. - Originality: 58 — The hand-drawn sofa illustration, hand-lettered captions, and multicolor waveform strokes add a distinct illustrative voice atop an otherwise standard alternating-feature-block pattern common to product marketing sites. Next tier: The core feature-block mechanic (label, headline, paragraph, right-aligned mockup, repeat) is a widely used convention; originality is concentrated in isolated illustration moments rather than the section's overall structural idea. - Adaptability: 65 — The recurring block unit (pill label, headline, paragraph, mockup) and distinct set-piece moments (stat callout, illustration, waveform) are structurally separable and each has a clearly describable skin (color, illustration style, mockup content) versus structure (alternation, centering) role. Next tier: Full separability of the hand-drawn illustration and waveform assets from layout logic depends on unverified custom-artwork parameters (stroke paths, colors) not present in deterministic evidence. Strengths: - Hand-drawn sofa illustration and wavy yellow stroke device inject narrative personality atop a routine feature-block structure - Statistic callout ('54% of people leave meetings...') uses highlight color purposefully to punctuate the long scroll - Multicolor dictation waveform on an orange field creates a strong tonal break from the cream sections - Consistent small pill-label + headline + paragraph rhythm gives scannable structure across a long section Weaknesses: - Roughly half the section repeats a near-identical alternating text/mockup formula, reading as template filler - No verified motion evidence despite an unusually long, scroll-heavy section that likely relies on reveal animation - Mockup panels appear cropped/reused rather than purpose-built, weakening content integration - Typography pairing, while clean, is a conventional SaaS display/heading/body split without distinctive character Why it does not reach the next tier: The section shows genuine illustrative and coloristic moments of craft, but these are surrounded by a long run of repetitive, conventional feature-block units and unverified motion, preventing the whole from reading as consistently memorable rather than intermittently so. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the modular block skeleton (label pill + headline + paragraph + right-aligned mockup) and the statistic-callout/illustration break pattern; swap in new product mockups and illustration assets while preserving the alternating rhythm and centered break moments. What transfers: - Alternating label/headline/paragraph/mockup block pattern - Centered statistic-callout treatment with highlighted text - Illustration + wavy stroke overlay motif as a narrative break - Full-bleed colored waveform panel as a section-ending visual Dependencies: - Custom hand-drawn illustration assets (sofa figure, stroke paths) - Specific mockup screenshot content (meeting cards, action items) - Exact accent color values (#FFEB5B, #DD6C3E) for highlight and waveform coloring ## 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 could not be assessed due to absence of timestamped evidence - Exact radius, shadow, and animation parameters were not deterministically supplied - Judgment is based on a single long vertical crop rather than live interactive behavior ## 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: features - Structure: centered single-column - Layout: Alternating text blocks with right-aligned UI mockups, followed by centered illustrations and large dictation graphics. - Styles: illustrative, minimal, colourful - Components: headline, ui-mockup, statistic-callout, character-illustration, colorful-graphic - Purpose: A lengthy showcase detailing meeting summaries, natural language dictation, and the user workflow. - Visual signature: Includes a '54% of people leave meetings' stat, a person on a sofa illustration, and a colorful abstract dictation waveform. - Place on the page: 12 of 20, after Feature collection (`saybriefly-com:HomeFeatureMeetingHistory`), before Other (`fce4f4c2-1376-4b51-8ec7-8d740bda9f59`) ### 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": "80px", "family": "Bricolage Grotesque", "source": "computed", "traits": "Regular", "weight": "800", "evidence": "font-4: computed CSS at 1440×1000; AI role: Used for the dominant opening headline, where the largest and most expressive type treatment appears.", "sampleId": "font-4", "confidence": 0.99, "lineHeight": "84px", "letterSpacing": "normal" }, { "role": "heading", "size": "30px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "600", "evidence": "font-3: computed CSS at 1440×1000; AI role: Repeated on feature headings for meeting memory, action items, and summaries.", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "36px", "letterSpacing": "normal" }, { "role": "body", "size": "20px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-8: computed CSS at 1440×1000; AI role: Used for recurring explanatory paragraphs beneath feature headings.", "sampleId": "font-8", "confidence": 0.95, "lineHeight": "32px", "letterSpacing": "normal" }, { "role": "mono", "size": "16px", "family": "Roboto Mono", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-19: computed CSS at 1440×1000; AI role: Used for the desktop navigation labels and echoed by the site's utility-label aesthetic.", "sampleId": "font-19", "confidence": 0.97, "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": "#FCFAF5", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(252, 250, 245); AI role: Measured as the body background and visible as the warm cream page field.", "sampleId": "color-3", "confidence": 0.99 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-14: computed rgb(255, 255, 255); AI role: Measured on light interface surfaces within product demonstrations.", "sampleId": "color-14", "confidence": 0.82 }, { "hex": "#173300", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(23, 51, 0); AI role: Measured on navigation text and matches the dominant deep-green typography and line work.", "sampleId": "color-2", "confidence": 0.99 }, { "hex": "#525252", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-10: computed oklch(0.439 0 0); AI role: Measured on subdued integration notes beneath feature descriptions.", "sampleId": "color-10", "confidence": 0.96 }, { "hex": "#B6B6B6", "name": "border", "role": "border", "source": "computed", "evidence": "color-18: computed rgb(182, 182, 182); AI role: Measured on the navigation border and supports the restrained outlined system.", "sampleId": "color-18", "confidence": 0.93 }, { "hex": "#0A3400", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-4: computed rgb(10, 52, 0); AI role: Measured as a deep-green section background consistent with the filled action treatment.", "sampleId": "color-4", "confidence": 0.93 }, { "hex": "#FFEB5B", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-7: computed rgb(255, 235, 91); AI role: Measured on the download label and recurring bright-yellow branding, highlights, chips, and frames.", "sampleId": "color-7", "confidence": 0.99 }, { "hex": "#DD6C3E", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-12: computed rgb(221, 108, 62); AI role: Measured on integration borders and dividers; orange also highlights warnings and key numerical claims.", "sampleId": "color-12", "confidence": 0.98 } ] } ``` ### Design tokens ```json { "radius": "Unmeasured; visibly moderate on cards and buttons, with fully rounded chips, voice bars, and circular icon controls.", "density": "Low-to-moderate density overall, with airy storytelling sections and denser product mockups or comparison rows.", "evidence": "The desktop capture repeatedly shows broad whitespace, centered section framing, rounded controls, ruled separators, and outlined cream surfaces.", "borderStyle": "Thin dark outlines, dotted horizontal rules, a dashed navigation frame, and selective orange dividers create a sketched utility feel.", "buttonStyle": "Dark-green filled CTAs with bright labels; secondary actions use simple cream fills and thin dark outlines.", "cornerStyle": "Softly rounded rectangles and pill-shaped controls contrast with organic, irregular hand-drawn artwork.", "contentWidth": "Broad centered desktop container with readable text columns; selected artwork and decorative strokes extend toward full width.", "spacingRhythm": "Expansive chapter spacing with compact text groups, then large pauses around illustrations, statistics, and narrative transitions." } ``` ### 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: Alternating label/headline/paragraph/mockup block pattern; Centered statistic-callout treatment with highlighted text; Illustration + wavy stroke overlay motif as a narrative break; Full-bleed colored waveform panel as a section-ending visual - Dependencies: Custom hand-drawn illustration assets (sofa figure, stroke paths); Specific mockup screenshot content (meeting cards, action items); Exact accent color values (#FFEB5B, #DD6C3E) for highlight and waveform coloring - Guidance: Reuse the modular block skeleton (label pill + headline + paragraph + right-aligned mockup) and the statistic-callout/illustration break pattern; swap in new product mockups and illustration assets while preserving the alternating rhythm and centered break moments. ### 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 “Comprehensive Feature Showcase”. Purpose: A lengthy showcase detailing meeting summaries, natural language dictation, and the user workflow. Structure: centered single-column. Source layout label: Alternating text blocks with right-aligned UI mockups, followed by centered illustrations and large dictation graphics.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Includes a '54% of people leave meetings' stat, a person on a sofa illustration, and a colorful abstract dictation waveform. Components: headline, ui-mockup, statistic-callout, character-illustration, colorful-graphic. Style direction: illustrative, minimal, colourful. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"80px","family":"Bricolage Grotesque","source":"computed","traits":"Regular","weight":"800","evidence":"font-4: computed CSS at 1440×1000; AI role: Used for the dominant opening headline, where the largest and most expressive type treatment appears.","sampleId":"font-4","confidence":0.99,"lineHeight":"84px","letterSpacing":"normal"} {"role":"heading","size":"30px","family":"Inter","source":"computed","traits":"Regular","weight":"600","evidence":"font-3: computed CSS at 1440×1000; AI role: Repeated on feature headings for meeting memory, action items, and summaries.","sampleId":"font-3","confidence":0.95,"lineHeight":"36px","letterSpacing":"normal"} {"role":"body","size":"20px","family":"Inter","source":"computed","traits":"Regular","weight":"300","evidence":"font-8: computed CSS at 1440×1000; AI role: Used for recurring explanatory paragraphs beneath feature headings.","sampleId":"font-8","confidence":0.95,"lineHeight":"32px","letterSpacing":"normal"} {"role":"mono","size":"16px","family":"Roboto Mono","source":"computed","traits":"Regular","weight":"400","evidence":"font-19: computed CSS at 1440×1000; AI role: Used for the desktop navigation labels and echoed by the site's utility-label aesthetic.","sampleId":"font-19","confidence":0.97,"lineHeight":"24px","letterSpacing":"normal"} Color evidence: {"hex":"#FCFAF5","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(252, 250, 245); AI role: Measured as the body background and visible as the warm cream page field.","sampleId":"color-3","confidence":0.99} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-14: computed rgb(255, 255, 255); AI role: Measured on light interface surfaces within product demonstrations.","sampleId":"color-14","confidence":0.82} {"hex":"#173300","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(23, 51, 0); AI role: Measured on navigation text and matches the dominant deep-green typography and line work.","sampleId":"color-2","confidence":0.99} {"hex":"#525252","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed oklch(0.439 0 0); AI role: Measured on subdued integration notes beneath feature descriptions.","sampleId":"color-10","confidence":0.96} {"hex":"#B6B6B6","name":"border","role":"border","source":"computed","evidence":"color-18: computed rgb(182, 182, 182); AI role: Measured on the navigation border and supports the restrained outlined system.","sampleId":"color-18","confidence":0.93} {"hex":"#0A3400","name":"primary action","role":"primary-action","source":"computed","evidence":"color-4: computed rgb(10, 52, 0); AI role: Measured as a deep-green section background consistent with the filled action treatment.","sampleId":"color-4","confidence":0.93} {"hex":"#FFEB5B","name":"accent","role":"accent","source":"computed","evidence":"color-7: computed rgb(255, 235, 91); AI role: Measured on the download label and recurring bright-yellow branding, highlights, chips, and frames.","sampleId":"color-7","confidence":0.99} {"hex":"#DD6C3E","name":"accent","role":"accent","source":"computed","evidence":"color-12: computed rgb(221, 108, 62); AI role: Measured on integration borders and dividers; orange also highlights warnings and key numerical claims.","sampleId":"color-12","confidence":0.98} 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: Alternating label/headline/paragraph/mockup block pattern; Centered statistic-callout treatment with highlighted text; Illustration + wavy stroke overlay motif as a narrative break; Full-bleed colored waveform panel as a section-ending visual. Dependencies: Custom hand-drawn illustration assets (sofa figure, stroke paths); Specific mockup screenshot content (meeting cards, action items); Exact accent color values (#FFEB5B, #DD6C3E) for highlight and waveform coloring. Adaptation guidance: Reuse the modular block skeleton (label pill + headline + paragraph + right-aligned mockup) and the statistic-callout/illustration break pattern; swap in new product mockups and illustration assets while preserving the alternating rhythm and centered break moments. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.