# Feature Steps and FAQ Intro Schema: Design Details SECTION.md v3.2 Website: Shelf Source: https://www.savetoshelf.com/ Source section IDs: gap-c6fb4ccc-3400-4464 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The two-column split puts the explanation on the left and stacked step cards on the right, so the process is easy to scan beside its context. - Each step card pairs a small icon or visual with one short instructional sentence, and a nested 'WHY THIS' callout inside step 3 adds a second layer of hierarchy. - The centered FAQ heading with a badge-icon lockup echoes the green badge above, giving the whole crop a steady rhythm on a soft, light surface. What a screenshot can't show: - The recording only shows a scroll down to the section, so no in-section animation or timing is visible. - No font sizes, letter spacing or spacing values were measured; the 52px heading and 16px body come from the review alone. Borrow: Pair a short explanatory column with a stack of small, floating step cards, and nest one extra insight inside the last step to add depth without clutter. Leave alone: Don't copy Shelf's pale green badge and accent, its warm off-white palette, or the General Sans and Switzer pairing; use a similar geometric sans and a neutral grotesque instead. ## Classification - Type: features - Layout: Two-column layout for the process feature (text left, steps right), followed by a centered heading block below. - Styles: minimal, soft - Confidence: 95% ## Purpose and structure A two-part section detailing the saving process in three steps, followed by the introductory heading for an FAQ section. Visual signature: White background with a subtle green badge, paired with floating white cards indicating sequential steps. ## Components - heading - paragraph - badge - step-list - icon - faq-heading - accordion ## Typography - Display: General Sans — 84px 600 - Heading: General Sans — 52px 600 - Body: Switzer — 16px 400 - Mono: Switzer — 12px 400 ## Functional palette - Canvas: canvas #F2F1ED - Text: text #1A1A18 - Primary-Action: primary action #9EE86F - Surface: surface #FCFCFB - Border: border #E1E0DA - Muted-Text: muted text #76766E ## Motion evidence - 10.0–14.0s — The user scrolls further down to a section titled 'Save it where you found it' which includes a description and a step-by-step guide. (95% confidence) ## Section quality Overall: 64.18/100 (Good) Scored coverage: 85% - Typography: 66 — Clear hierarchy using 52px General Sans heading against 16px Switzer body, with mono-style uppercase label ('WHY THIS') providing a tertiary tier. Letter-spacing and weight contrast are deliberate and legible, but the pairing is a standard two-family system without distinctive type personality. Next tier: Would need a more idiosyncratic typographic treatment (unusual scale jumps, custom numerals, or expressive type-as-graphic moment) to exceed polished-but-familiar territory. - Composition: 68 — Two-column split (text left, stacked step cards right) is clean and the numbered badges plus 'WHY THIS' callout card create genuine layered hierarchy within the steps. The FAQ intro below is well-centered with a badge-icon-plus-heading lockup that echoes the badge above, giving the whole crop a coherent rhythm. However the layout is a common SaaS feature pattern and the FAQ-heading-to-accordion transition is a standard template move. Next tier: Needs a more unexpected spatial idea beyond text-left/cards-right and centered-heading-above-accordion to read as memorable rather than well-executed convention. - Motion: inconclusive — The only motion evidence is a generic scroll event ('scrolls further down to a section'), which describes navigation, not an in-section animated change. Next tier: Needs specific timestamped visible changes (e.g., cards fading/staggering in, accordion expanding) to score motion. - Content: 65 — Copy is tightly integrated with layout: each step card pairs a small visual placeholder/icon with a short instructional sentence, and the 'WHY THIS' card nests a secondary insight inside step 3. The FAQ intro copy frames the section's purpose conversationally. Content and layout feel built together rather than dropped into a generic grid. Next tier: Would benefit from more distinct supporting imagery (not placeholder swatches) to fully justify a higher integration score. - Originality: 58 — The numbered-step-with-icon-card format and centered FAQ-intro-into-accordion are both familiar SaaS patterns; the 'WHY THIS' nested quote card is a nice small twist but not enough to feel structurally novel. Next tier: Needs a structural idea that can't be easily substituted with a generic three-step feature block to move into strong/memorable territory. - Adaptability: 62 — Components (badge, step-list, icon, faq-heading, accordion) are modular and tokens (radius, color roles, spacing rhythm) are externally defined, making skin-swap straightforward. The nested 'WHY THIS' card and icon mockups are somewhat bespoke and would need re-authoring per brand. Next tier: Full separation is limited by the bespoke step-card visuals (illustration placeholders, icon glyph) that are not abstracted as tokens. Strengths: - Numbered step cards with consistent badge-icon-text structure create clear sequential reading - Nested 'WHY THIS' quote card inside step 3 adds a small layered hierarchy device - Badge-icon-heading lockup is reused between the feature intro and FAQ intro for visual consistency - Generous whitespace and consistent border/radius language keep the two-part section cohesive Weaknesses: - Step-card layout and FAQ-intro-to-accordion transition are both common SaaS template patterns - No motion evidence beyond a generic scroll, so dynamic behavior cannot be verified - Visual assets in step 1 are abstract placeholder swatches rather than purposeful illustration - Icon and heading pairing for 'Before you ask' is a conventional centered-intro treatment Why it does not reach the next tier: The section demonstrates careful, consistent execution of a standard three-step feature block plus FAQ intro, but neither the composition nor the content introduces a structural idea that departs from common SaaS conventions, and no verifiable motion detail exists to support a motion-driven case for a higher tier. ## Adaptation guidance - Effort: Medium - Guidance: Swap icons, copy, and color tokens while preserving the step-card grid, nested quote-card device, and badge-heading lockup pattern; rebuild the illustration placeholders as brand-appropriate assets rather than generic colored blocks. What transfers: - Two-column text/step-card layout structure - Numbered badge + heading + description step pattern - Badge-icon-heading lockup for section intros - Centered intro into accordion FAQ pattern Dependencies: - Specific icon/illustration assets used in step cards - Nested 'WHY THIS' quote card styling - Exact color tokens (green badge, dark badge circles) tied to brand 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 cannot be scored due to lack of specific timestamped visible changes within the section - Exact spacing, radius, and shadow values are approximated from visual inspection, not pixel-measured - No direct evidence of accordion interaction behavior (open/close state) within 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: features - Structure: two-column - Layout: Two-column layout for the process feature (text left, steps right), followed by a centered heading block below. - Styles: minimal, soft - Components: heading, paragraph, badge, step-list, icon, faq-heading, accordion - Purpose: A two-part section detailing the saving process in three steps, followed by the introductory heading for an FAQ section. - Visual signature: White background with a subtle green badge, paired with floating white cards indicating sequential steps. - Place on the page: 4 of 6, after Product UI (`savetoshelf-com:d46aac9a-3b12-4eeb-a801-c47da782b57b`), before FAQ (`6ee0d0f1-d9d6-4f61-a202-3b2a2449dec5`) ### 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": "84px", "family": "General Sans", "source": "computed", "traits": "Regular", "weight": "600", "evidence": "font-22: computed CSS at 1440×1000; AI role: 84px General Sans with -2.5px letter spacing used for the primary hero headline.", "sampleId": "font-22", "confidence": 1, "lineHeight": "85.7px", "letterSpacing": "-2.5px" }, { "role": "heading", "size": "52px", "family": "General Sans", "source": "computed", "traits": "Regular", "weight": "600", "evidence": "font-1: computed CSS at 1440×1000; AI role: 52px General Sans with -1.6px letter spacing used for major section breaks like 'Save it where you found it'.", "sampleId": "font-1", "confidence": 1, "lineHeight": "56.2px", "letterSpacing": "-1.6px" }, { "role": "body", "size": "16px", "family": "Switzer", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: 16px Switzer with 24px line height used for standard descriptive paragraphs.", "sampleId": "font-5", "confidence": 0.95, "lineHeight": "24px", "letterSpacing": "normal" }, { "role": "mono", "size": "12px", "family": "Switzer", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-8: computed CSS at 1440×1000; AI role: 12px Switzer uppercase with 0.6px letter spacing used for small eyebrow labels and metadata.", "sampleId": "font-8", "confidence": 0.8, "lineHeight": "18px", "letterSpacing": "0.6px" } ] } ``` ### 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": "#F2F1ED", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(242, 241, 237); AI role: The dominant warm off-white (#F2F1ED) background color for the page body.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#1A1A18", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(26, 26, 24); AI role: Near black (#1A1A18) used for primary headings and prominent text.", "sampleId": "color-4", "confidence": 1 }, { "hex": "#9EE86F", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-5: computed rgb(158, 232, 111); AI role: Bright green (#9EE86F) used exclusively for primary CTA buttons and highlights.", "sampleId": "color-5", "confidence": 1 }, { "hex": "#FCFCFB", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(252, 252, 251); AI role: Pure white (#FCFCFB) used for the background of feature cards and search mockups.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#E1E0DA", "name": "border", "role": "border", "source": "computed", "evidence": "color-12: computed rgb(225, 224, 218); AI role: Light gray (#E1E0DA) used for subtle 1px strokes around inputs, cards, and mockup elements.", "sampleId": "color-12", "confidence": 0.95 }, { "hex": "#76766E", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-3: computed rgb(118, 118, 110); AI role: Medium gray (#76766E) used for secondary body copy and lesser UI text.", "sampleId": "color-3", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Buttons and tags appear to use 9999px (pill). Main feature cards appear to use large radii around 24px-32px.", "density": "Low density overall to emphasize copy and key UI visuals, though the interactive mockups compress more data into smaller zones.", "evidence": "Visual inspection of the cards, buttons, input fields, and overall structural spacing on the 1440px viewport.", "borderStyle": "Subtle, structured usage. 1px solid borders in light gray (#E1E0DA) delineate interactive zones and container edges without high contrast.", "buttonStyle": "Solid color fill (vibrant green) with dark text, fully rounded pill shapes, no shadows.", "cornerStyle": "Highly rounded. Use of fully rounded pill shapes for buttons/tags and large radii for container cards.", "contentWidth": "Centered max-width container, appearing to span around 1000px-1200px based on the layout constraint.", "spacingRhythm": "Generous macro-whitespace separating vertical sections, contrasting with tighter grouped elements inside UI mockups." } ``` ### 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 user scrolls further down to a section titled 'Save it where you found it' which includes a description and a step-by-step guide. (10s–14s; 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: Two-column text/step-card layout structure; Numbered badge + heading + description step pattern; Badge-icon-heading lockup for section intros; Centered intro into accordion FAQ pattern - Dependencies: Specific icon/illustration assets used in step cards; Nested 'WHY THIS' quote card styling; Exact color tokens (green badge, dark badge circles) tied to brand palette - Guidance: Swap icons, copy, and color tokens while preserving the step-card grid, nested quote-card device, and badge-heading lockup pattern; rebuild the illustration placeholders as brand-appropriate assets rather than generic colored blocks. ### 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 “Feature Steps and FAQ Intro”. Purpose: A two-part section detailing the saving process in three steps, followed by the introductory heading for an FAQ section. Structure: two-column. Source layout label: Two-column layout for the process feature (text left, steps right), followed by a centered heading block below.. 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: White background with a subtle green badge, paired with floating white cards indicating sequential steps. Components: heading, paragraph, badge, step-list, icon, faq-heading, accordion. Style direction: minimal, soft. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"84px","family":"General Sans","source":"computed","traits":"Regular","weight":"600","evidence":"font-22: computed CSS at 1440×1000; AI role: 84px General Sans with -2.5px letter spacing used for the primary hero headline.","sampleId":"font-22","confidence":1,"lineHeight":"85.7px","letterSpacing":"-2.5px"} {"role":"heading","size":"52px","family":"General Sans","source":"computed","traits":"Regular","weight":"600","evidence":"font-1: computed CSS at 1440×1000; AI role: 52px General Sans with -1.6px letter spacing used for major section breaks like 'Save it where you found it'.","sampleId":"font-1","confidence":1,"lineHeight":"56.2px","letterSpacing":"-1.6px"} {"role":"body","size":"16px","family":"Switzer","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 16px Switzer with 24px line height used for standard descriptive paragraphs.","sampleId":"font-5","confidence":0.95,"lineHeight":"24px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"Switzer","source":"computed","traits":"uppercase","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: 12px Switzer uppercase with 0.6px letter spacing used for small eyebrow labels and metadata.","sampleId":"font-8","confidence":0.8,"lineHeight":"18px","letterSpacing":"0.6px"} Color evidence: {"hex":"#F2F1ED","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(242, 241, 237); AI role: The dominant warm off-white (#F2F1ED) background color for the page body.","sampleId":"color-2","confidence":1} {"hex":"#1A1A18","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(26, 26, 24); AI role: Near black (#1A1A18) used for primary headings and prominent text.","sampleId":"color-4","confidence":1} {"hex":"#9EE86F","name":"primary action","role":"primary-action","source":"computed","evidence":"color-5: computed rgb(158, 232, 111); AI role: Bright green (#9EE86F) used exclusively for primary CTA buttons and highlights.","sampleId":"color-5","confidence":1} {"hex":"#FCFCFB","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(252, 252, 251); AI role: Pure white (#FCFCFB) used for the background of feature cards and search mockups.","sampleId":"color-1","confidence":0.95} {"hex":"#E1E0DA","name":"border","role":"border","source":"computed","evidence":"color-12: computed rgb(225, 224, 218); AI role: Light gray (#E1E0DA) used for subtle 1px strokes around inputs, cards, and mockup elements.","sampleId":"color-12","confidence":0.95} {"hex":"#76766E","name":"muted text","role":"muted-text","source":"computed","evidence":"color-3: computed rgb(118, 118, 110); AI role: Medium gray (#76766E) used for secondary body copy and lesser UI text.","sampleId":"color-3","confidence":0.9} 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 user scrolls further down to a section titled 'Save it where you found it' which includes a description and a step-by-step guide. (95% confidence) Transfer these principles: Two-column text/step-card layout structure; Numbered badge + heading + description step pattern; Badge-icon-heading lockup for section intros; Centered intro into accordion FAQ pattern. Dependencies: Specific icon/illustration assets used in step cards; Nested 'WHY THIS' quote card styling; Exact color tokens (green badge, dark badge circles) tied to brand palette. Adaptation guidance: Swap icons, copy, and color tokens while preserving the step-card grid, nested quote-card device, and badge-heading lockup pattern; rebuild the illustration placeholders as brand-appropriate assets rather than generic colored blocks. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.