# Feature UI Cards Schema: Design Details SECTION.md v3.2 Website: saybriefly.com Source: https://saybriefly.com/ Source section IDs: gap-10485937-7779-8946 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A staggered three-panel layout puts one sharp focal card between two faded flanking cards, which gives the eye a clear path. - The green-tinted checklist card, phase tags and chips use the same copy as the product story, so each snippet reads as a real feature demo. - A warm off-white canvas with white surfaces, thin outlines and a deep green action colour keeps the UI snippets soft and readable. What a screenshot can't show: - The recording showed no motion, so any hover, fade or dropdown behaviour is unknown. - No font sizes, letter spacing or spacing values were measured. Borrow: Show the product through realistic, small UI cards, with one in sharp focus and its neighbours softened, so the feature explains itself. Leave alone: Don't copy the green-tinted card styling, the exact checklist and 'Project board created' copy, or the blurred-sides-plus-command-bar arrangement as a whole. ## Classification - Type: feature-card - Layout: A scattered or staggered arrangement of UI cards and interactive dropdown lists. - Styles: minimal, soft - Confidence: 90% ## Purpose and structure A collection of UI cards demonstrating project board creation and checklist generation. Visual signature: Green-tinted interface snippets like 'Project board created' and 'Add 2 tasks from my active project'. ## Components - ui-card - checklist-ui - dropdown-menu - cta-button ## 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: 59.35/100 (Competent) Scored coverage: 85% - Typography: 58 — Consistent Inter/mono-esque hierarchy across card title, checklist labels, chip text, and input placeholder; scale steps are clear but purely functional UI text with no distinctive expressive choice within this crop. Next tier: Needs a more considered type hierarchy contrast (e.g., a distinct display or accent typographic moment) beyond uniform UI sizing to move past competent. - Composition: 63 — A clean staggered three-panel layout with the focal card sharply in focus while flanking cards fade, plus a well-aligned command bar and two-column feature list below, gives good grouping and a legible focal path. Next tier: The blurred side cards and stacked list feel like a fairly conventional SaaS feature pattern; needs a more distinctive spatial idea or asymmetry to reach strong/memorable. - Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section. Next tier: Requires timestamped visible motion evidence from Gemini to score this axis. - Content: 60 — Card content (checklist, phase tags, chips) and the input bar copy are tightly integrated with the product story, and the feature list rows reinforce the same narrative coherently. Next tier: Content is competent product-marketing copy but doesn't demonstrate a unique voice or unexpected integration beyond expected feature-list conventions. - Originality: 55 — The green-tinted checklist card and focus-blur staging are a mildly distinctive touch, but the overall pattern (central card, feature-row list, CTA) is a common SaaS landing template. Next tier: Needs a signature interaction or visual device unique to this product rather than a widely recycled feature-card/list layout to exceed familiar territory. - Adaptability: 60 — Structure (card + checklist + list rows) and skin (green tint, rounded chips, outline rows) are cleanly separable given the deterministic palette/typography tokens supplied. Next tier: Lack of documented interaction/motion specs and precise spacing/radius tokens limits confidence in full behavioral separation. Strengths: - Clear focal hierarchy via blur/opacity staging on side cards versus the sharp central checklist card - Cohesive green-tinted palette ties card, chips, and command bar together - Two-column feature list provides an organized, scannable secondary content layer Weaknesses: - Overall layout pattern (feature card + list + CTA) is a common SaaS template without a distinguishing signature device - Typography is functionally consistent but lacks an expressive or hierarchy-defining moment specific to this section - No motion evidence provided, leaving a full third of the section's expressive potential unassessed Why it does not reach the next tier: The section demonstrates competent, well-organized SaaS feature staging but relies on familiar patterns (blurred side cards, checklist card, two-column list) without a unique structural or typographic idea that would make it feel hard to substitute; motion evidence is also absent, preventing a fuller quality picture. ## Adaptation guidance - Effort: Medium - Guidance: Recreate the three-card staggered composition with center-focus via CSS blur/opacity on flanking cards, then rebuild the checklist card as a reusable component (icon, title, dotted divider, 2x2 phase grid, chip row); the feature list below can be swapped to any icon+label+button row list independent of the top staging. What transfers: - Focal-card-with-blurred-context staging pattern - Checklist/chip card component structure - Two-column feature-row list with icon and action button Dependencies: - Specific green-tint palette and rounded-chip styling - Icon set for phase/task/feature rows - Exact card elevation/blur treatment for side cards ## 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%) - No motion timestamp evidence available to assess animation quality - Exact spacing, radius, and shadow values are unmeasured, limiting precision of composition scoring - Single crop may omit interactive states or transitions between the visible cards ## 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: A scattered or staggered arrangement of UI cards and interactive dropdown lists. - Layout: A scattered or staggered arrangement of UI cards and interactive dropdown lists. - Styles: minimal, soft - Components: ui-card, checklist-ui, dropdown-menu, cta-button - Purpose: A collection of UI cards demonstrating project board creation and checklist generation. - Visual signature: Green-tinted interface snippets like 'Project board created' and 'Add 2 tasks from my active project'. - Place on the page: 8 of 20, after Hero (`saybriefly-com:HomeFeatureListening`), before Call to action (`saybriefly-com:HomeFeatureTimeSaved`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### 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: Focal-card-with-blurred-context staging pattern; Checklist/chip card component structure; Two-column feature-row list with icon and action button - Dependencies: Specific green-tint palette and rounded-chip styling; Icon set for phase/task/feature rows; Exact card elevation/blur treatment for side cards - Guidance: Recreate the three-card staggered composition with center-focus via CSS blur/opacity on flanking cards, then rebuild the checklist card as a reusable component (icon, title, dotted divider, 2x2 phase grid, chip row); the feature list below can be swapped to any icon+label+button row list independent of the top staging. ### 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 “Feature UI Cards”. Purpose: A collection of UI cards demonstrating project board creation and checklist generation. Structure: A scattered or staggered arrangement of UI cards and interactive dropdown lists.. Source layout label: A scattered or staggered arrangement of UI cards and interactive dropdown lists.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Green-tinted interface snippets like 'Project board created' and 'Add 2 tasks from my active project'. Components: ui-card, checklist-ui, dropdown-menu, cta-button. Style direction: minimal, soft. 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: Focal-card-with-blurred-context staging pattern; Checklist/chip card component structure; Two-column feature-row list with icon and action button. Dependencies: Specific green-tint palette and rounded-chip styling; Icon set for phase/task/feature rows; Exact card elevation/blur treatment for side cards. Adaptation guidance: Recreate the three-card staggered composition with center-focus via CSS blur/opacity on flanking cards, then rebuild the checklist card as a reusable component (icon, title, dotted divider, 2x2 phase grid, chip row); the feature list below can be swapped to any icon+label+button row list independent of the top staging. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.