# Sticky device mockup with scrolling feature list Schema: Design Details SECTION.md v3.2 Website: Rylo Source: https://rylo.com/ Source section IDs: gap-cc2c6df2-2807-4822 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The phone stays pinned on the right while feature text scrolls on the left, so each claim is read next to the product it describes. - The phone screen shows a believable in-call view with live captions, so it proves the feature instead of acting as a placeholder. - Warm off-white canvas, a single blue card and bold-versus-light heading contrast keep the look soft and easy to scan. What a screenshot can't show: - In the recording the phone pins while the left text scrolls, then releases and scrolls out of view, over about 9 seconds (21s to 30s); no other motion was seen. - No type sizes, line heights or spacing were measured, so exact scale and padding are unknown. Borrow: Pin one product visual beside a scrolling list of short claims so the visual anchors the reader while the copy moves. Leave alone: Don't copy Rylo's blue card, orange action colour, warm cream palette or its exact caption-call phone screen; use your own product UI and colours. ## Classification - Type: features - Layout: Split layout with scrolling text items on the left and a sticky device mockup on the right - Styles: soft, minimal - Confidence: 95% ## Purpose and structure A soft-toned feature section detailing app capabilities, where a phone mockup remains sticky while descriptive text scrolls alongside it. Visual signature: Warm off-white background with a blue container holding an app interface mockup and a vertical list of features below. ## Components - heading - button - device mockup - feature list - app UI - icons ## Typography - Display: PP Mori — 96px 600 - Heading: PP Mori — 64px 600 - Body: PP Mori — 16px 400 ## Functional palette - Primary-Action: primary action #FF8B2B - Canvas: canvas #FAF5F2 - Text: text #312623 - Canvas: canvas #191412 - Surface: surface #EEE7E1 ## Motion evidence - 21.0–30.0s — A phone mockup on the right side of a panel remains in place while text content on the left side scrolls up. The phone then unsticks and scrolls up out of view. (90% confidence) ## Section quality Overall: 57.35/100 (Competent) Scored coverage: 100% - Typography: 60 — Clear hierarchy with bold black 'Call' versus lighter gray 'with clarity', body copy set at readable size; relies on standard weight contrast rather than distinctive type treatment per the single typography scale in use. Next tier: Needs a more deliberate type-driven moment (scale jump, custom treatment) beyond one weight/color contrast to read as memorable rather than familiar. - Composition: 58 — Split layout with sticky phone bleeding over the blue card edge is a nice touch, and the two-column feature grid below organizes content cleanly, but the crop shows duplicated 'Download the app' and 'Adjust the caption styles' rows stacking awkwardly, undermining the grid's polish. Next tier: Needs resolved grid alignment without repeated/duplicate cards and a less formulaic card-grid-under-hero structure to feel intentional rather than templated. - Motion: 55 — Gemini's timestamped description confirms a standard sticky-then-release scroll behavior (phone pins, then unsticks and scrolls away) with no secondary choreography noted. Next tier: Needs additional motion detail beyond the common sticky-pin release pattern (e.g. content syncing to phone screen changes) to exceed a familiar scroll technique. - Content: 60 — The phone mockup shows a believable in-context call UI with live caption text, supporting the feature claims directly rather than using generic placeholder app screens. Next tier: Needs the surrounding feature list to visibly sync with specific states of the phone UI to feel like integrated storytelling rather than a parallel list. - Originality: 46 — Sticky device mockup with scrolling feature copy is one of the most common SaaS/app marketing patterns; the blue-card-with-overlapping-phone device is a mild variation but the overall idea is widely seen. Next tier: Needs a structural or visual idea beyond the sticky-mockup-plus-text-list convention to feel distinct from standard app landing pages. - Adaptability: 64 — Clear separable parts: sticky container, phone mockup, text block, and repeatable feature-card grid, all usable independently of brand skin. Next tier: Not assessed further since this is capped by the quality axes rather than structural clarity, which is already evident. Strengths: - Phone mockup overlapping the edge of the blue panel adds a small layered depth cue - Realistic in-context call UI content (captions, contact name, controls) reinforces the feature claim directly - Clear two-tier information architecture: hero claim, highlighted sticky feature, then supporting grid of secondary features Weaknesses: - Visible duplicate/repeated feature rows ('Download the app', 'Adjust the caption styles') at the bottom of the crop suggest a layout or data bug undermining grid polish - Sticky-mockup-with-scrolling-list is a very common SaaS pattern without a distinguishing twist - Typography relies on a single weight/color contrast device rather than a more considered hierarchy - Motion behavior is a standard pin-then-release scroll trick with no secondary synced detail noted Why it does not reach the next tier: The section executes a widely-used sticky-mockup feature pattern competently but doesn't add a distinguishing structural or visual idea, and the duplicated card rows at the bottom visibly break the grid's intended polish, keeping it at a familiar/competent level rather than strong or memorable. ## Adaptation guidance - Effort: Medium - Guidance: Rebuild the sticky-panel + feature-grid skeleton generically, swap the phone mockup for any sticky visual asset, and recreate the icon+title+description card pattern with placeholder icons; fix the duplicate-row grid logic before reuse. What transfers: - Split layout with sticky visual anchor and scrolling text column - Two-column repeatable feature card grid with icon + title + description - Overlapping device mockup breaking out of a colored container edge Dependencies: - Custom app phone mockup artwork and call-UI content - Specific icon set per feature row - PP Mori typeface and defined color tokens for brand skin ## 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 description limited to a single pin/release event with no finer synced detail - Cannot verify if the duplicate bottom rows are a rendering artifact of the crop or an actual site bug - No direct evidence of how the feature list content syncs (or doesn't) with phone screen states during scroll ## 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: Split layout with scrolling text items on the left and a sticky device mockup on the right - Styles: soft, minimal - Components: heading, button, device mockup, feature list, app UI, icons - Purpose: A soft-toned feature section detailing app capabilities, where a phone mockup remains sticky while descriptive text scrolls alongside it. - Visual signature: Warm off-white background with a blue container holding an app interface mockup and a vertical list of features below. - Place on the page: 4 of 11, after Feature collection (`rylo-com:C01`), before Testimonials (`rylo-com:C02`) ### 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": "96px", "family": "PP Mori", "source": "computed", "traits": "Regular", "weight": "600", "evidence": "font-2: computed CSS at 1440×1000; AI role: Large 96px PP Mori used for major section headings like 'Communication without confusion'.", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "91.2px", "letterSpacing": "-3.8px" }, { "role": "heading", "size": "64px", "family": "PP Mori", "source": "computed", "traits": "Regular", "weight": "600", "evidence": "font-4: computed CSS at 1440×1000; AI role: 64px PP Mori used for primary headers like 'The completely free...'", "sampleId": "font-4", "confidence": 0.9, "lineHeight": "70.4px", "letterSpacing": "-1.9px" }, { "role": "body", "size": "16px", "family": "PP Mori", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: 16px PP Mori used for general body copy and descriptive text.", "sampleId": "font-5", "confidence": 0.9, "lineHeight": "20.8px", "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": "#FF8B2B", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-7: computed rgb(255, 139, 43); AI role: Vibrant orange #FF8B2B used for primary CTA buttons.", "sampleId": "color-7", "confidence": 0.95 }, { "hex": "#FAF5F2", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(250, 245, 242); AI role: Primary background colour #FAF5F2 used across the site.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#312623", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(49, 38, 35); AI role: Dark text colour #312623 used heavily against light backgrounds.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#191412", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(25, 20, 18); AI role: Very dark background #191412 used for the footer and dark sections.", "sampleId": "color-2", "confidence": 0.85 }, { "hex": "#EEE7E1", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-5: computed rgb(238, 231, 225); AI role: Slightly darker off-white #EEE7E1 used for contrasting sections and cards.", "sampleId": "color-5", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large border radii, evident in the main content blocks and feature cards.", "density": "Low density, breathable layout with substantial whitespace.", "evidence": "Visual inspection of the full-page crops showing rounded containers, distinct colour blocks, and spaced-out typography.", "borderStyle": "Generally borderless, relying on background colour contrast to define shapes.", "buttonStyle": "Solid fill with rounded corners, primarily utilizing the brand orange for primary actions.", "cornerStyle": "Highly rounded corners on almost all structural elements, including buttons, cards, and major layout containers.", "contentWidth": "Contained within a central column for text readability, but background containers and images often stretch full-width or break out of strict grid bounds.", "spacingRhythm": "Generous vertical spacing between sections, often utilizing wide margins and padding to separate distinct content blocks." } ``` ### 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** — A phone mockup on the right side of a panel remains in place while text content on the left side scrolls up. The phone then unsticks and scrolls up out of view. (21s–30s; 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: Split layout with sticky visual anchor and scrolling text column; Two-column repeatable feature card grid with icon + title + description; Overlapping device mockup breaking out of a colored container edge - Dependencies: Custom app phone mockup artwork and call-UI content; Specific icon set per feature row; PP Mori typeface and defined color tokens for brand skin - Guidance: Rebuild the sticky-panel + feature-grid skeleton generically, swap the phone mockup for any sticky visual asset, and recreate the icon+title+description card pattern with placeholder icons; fix the duplicate-row grid logic before reuse. ### 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 “Sticky device mockup with scrolling feature list”. Purpose: A soft-toned feature section detailing app capabilities, where a phone mockup remains sticky while descriptive text scrolls alongside it. Structure: two-column. Source layout label: Split layout with scrolling text items on the left and a sticky device mockup on the right. 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: Warm off-white background with a blue container holding an app interface mockup and a vertical list of features below. Components: heading, button, device mockup, feature list, app UI, icons. Style direction: soft, minimal. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"96px","family":"PP Mori","source":"computed","traits":"Regular","weight":"600","evidence":"font-2: computed CSS at 1440×1000; AI role: Large 96px PP Mori used for major section headings like 'Communication without confusion'.","sampleId":"font-2","confidence":0.9,"lineHeight":"91.2px","letterSpacing":"-3.8px"} {"role":"heading","size":"64px","family":"PP Mori","source":"computed","traits":"Regular","weight":"600","evidence":"font-4: computed CSS at 1440×1000; AI role: 64px PP Mori used for primary headers like 'The completely free...'","sampleId":"font-4","confidence":0.9,"lineHeight":"70.4px","letterSpacing":"-1.9px"} {"role":"body","size":"16px","family":"PP Mori","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 16px PP Mori used for general body copy and descriptive text.","sampleId":"font-5","confidence":0.9,"lineHeight":"20.8px","letterSpacing":"normal"} Color evidence: {"hex":"#FF8B2B","name":"primary action","role":"primary-action","source":"computed","evidence":"color-7: computed rgb(255, 139, 43); AI role: Vibrant orange #FF8B2B used for primary CTA buttons.","sampleId":"color-7","confidence":0.95} {"hex":"#FAF5F2","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(250, 245, 242); AI role: Primary background colour #FAF5F2 used across the site.","sampleId":"color-3","confidence":0.9} {"hex":"#312623","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(49, 38, 35); AI role: Dark text colour #312623 used heavily against light backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#191412","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(25, 20, 18); AI role: Very dark background #191412 used for the footer and dark sections.","sampleId":"color-2","confidence":0.85} {"hex":"#EEE7E1","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(238, 231, 225); AI role: Slightly darker off-white #EEE7E1 used for contrasting sections and cards.","sampleId":"color-5","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: A phone mockup on the right side of a panel remains in place while text content on the left side scrolls up. The phone then unsticks and scrolls up out of view. (90% confidence) Transfer these principles: Split layout with sticky visual anchor and scrolling text column; Two-column repeatable feature card grid with icon + title + description; Overlapping device mockup breaking out of a colored container edge. Dependencies: Custom app phone mockup artwork and call-UI content; Specific icon set per feature row; PP Mori typeface and defined color tokens for brand skin. Adaptation guidance: Rebuild the sticky-panel + feature-grid skeleton generically, swap the phone mockup for any sticky visual asset, and recreate the icon+title+description card pattern with placeholder icons; fix the duplicate-row grid logic before reuse. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.