# Overlapping feature cards Schema: Design Details SECTION.md v3.2 Website: pliability // #1 mobility, stretching + recovery app Source: https://pliability.com/ Source section IDs: 78794f9f-7104-4fba-9030-d40114134ed8 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A larger, raised center card flanked by partially cropped side cards sets a clear focal order against the pure black canvas. - Each card follows one compact template (label, heart icon, title, description, two-column goal and time metadata), so the set reads as real app content, while a blue, olive or purple gradient tells the categories apart. - The heading's white and gray split carries its message in two tones, and small uppercase mono labels give a clean step down in hierarchy. What a screenshot can't show: - The recording showed no specific motion, and no font sizes or spacing were measured, so hover, scroll and entrance behavior is unknown. Borrow: Use one modular card template, tint it with a different soft gradient for each category, and stagger the cards by size and height to create a focal point. Leave alone: Don't copy the blue, olive and purple glow palette, the lime action color (#EDFD3A), the FK Grotesk typeface (a tight grotesque like Inter would do), or the heart-save and floating CTA bar details. ## Classification - Type: features - Layout: Centered heading above a staggered or overlapping arrangement of tall, rounded cards. - Styles: bold, gradient, soft - Confidence: 95% ## Purpose and structure A presentation of app content library cards with soft gradients and floating UI treatments. Visual signature: Three dark, softly glowing routine cards overlapping against a pure black background. ## Components - heading - app-cards - ui-mockups - floating-button ## Typography - Display: FK Grotesk Regular — 60px 400 - Heading: FK Grotesk Regular — 40px 400 - Body: FK Grotesk Regular — 16px 400 - Mono: FK Grotesk Mono Medium — 12px 500 ## Functional palette - Canvas: canvas #000000 - Text: text #FFFFFF - Primary-Action: primary action #EDFD3A - Muted-Text: muted text #8F8F92 - Surface: surface #1C1C1E ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 63.53/100 (Good) Scored coverage: 85% - Typography: 64 — Clean two-weight heading treatment (white/gray split) with mono uppercase labels on cards matches the documented type system (FK Grotesk, tight tracking). Good hierarchy between heading, card titles, and metadata labels, but nothing beyond standard weight/size contrast. Next tier: No distinctive typographic device beyond the dual-tone heading split; sizes and pairing are conventional for the category. - Composition: 68 — Three-card staggered arrangement with center card elevated and larger, flanked by partially cropped side cards, creates clear focal hierarchy against a black void. Generous negative space and consistent card proportions give a controlled, confident layout. Next tier: Overlap is shallow/symmetrical rather than a genuinely dynamic staggered composition; the arrangement reads as a fairly standard centered-hero-card pattern. - Motion: not_assessed — No motion_moments or timestamped animation evidence supplied for this crop. Next tier: Needs specific timestamped visible motion data to assess. - Content: 66 — Cards integrate color-coded gradients per category (blue/olive/purple), icon, label, title, description, and goal/time metadata in a consistent compact template that reads clearly as real app content previews. Next tier: Content structure is a fairly standard card template; no unique integration of data or interactive content beyond static preview mockups. - Originality: 58 — Soft gradient glow cards on black with heart-save icons are a familiar app-marketing trope; the heading wordplay ('build your own library' in muted tone) is a mild distinguishing touch but not a novel structural idea. Next tier: Relies on a widely-used visual pattern (glowing gradient mobile cards); lacks a signature mechanic or unexpected layout twist that would make it hard to substitute. - Adaptability: 60 — Card template (label, heart icon, title, description, two-column metadata) is modular and could skin to other categories/colors easily; heading and floating CTA bar are separable components. Next tier: No deterministic spacing/radius/shadow tokens were captured for this specific section, limiting confidence in precise reproduction fidelity. Strengths: - Clear visual hierarchy with a dominant center card flanked by partially visible side cards - Consistent, legible card template combining icon, label, title, description, and metadata - Effective use of black canvas and soft gradient glows to create depth without heavy chrome Weaknesses: - Overlapping/staggered card pattern is a common SaaS/app marketing trope - No captured motion evidence despite an animation-friendly layout - Card overlap is subtle and could easily read as a simple row at other breakpoints Why it does not reach the next tier: The section is well-executed and cohesive but depends on a widely recognizable gradient-card pattern without an added structural or interactive idea that would make it memorable or hard to copy. ## Adaptation guidance - Effort: Medium - Guidance: Rebuild the card component with configurable gradient backgrounds and metadata slots; preserve the center-elevated staggered arrangement and heading two-tone emphasis, but motion behavior must be re-verified from source since none was captured. What transfers: - Card template structure (icon, label, title, description, metadata row) - Center-dominant staggered three-card composition - Dual-tone heading treatment Dependencies: - Specific gradient color mappings per category - Floating pricing/CTA bar styling - Mono uppercase label font treatment ## 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 timestamped motion data provided, so hover/scroll behavior is unverified - No deterministic spacing, radius, or shadow values captured for this specific section - Single desktop crop only; responsive behavior unknown ## 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: Centered heading above a staggered or overlapping arrangement of tall, rounded cards. - Styles: bold, gradient, soft - Components: heading, app-cards, ui-mockups, floating-button - Purpose: A presentation of app content library cards with soft gradients and floating UI treatments. - Visual signature: Three dark, softly glowing routine cards overlapping against a pure black background. - Place on the page: 8 of 20, after Feature collection (`794086fd-12bb-4bb5-8be0-edeef4d6d4ef`), before Feature collection (`8b935899-22c8-4d3e-ab83-2e23926b0840`) ### Crop and composition - Crop: 960×600px; aspect ratio 1.6:1 - Page bounds: 10839–12567px of 26954px - 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": "60px", "family": "FK Grotesk Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-3: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 60px, -1.8px tracking. Used for prominent headings like 'Daily mobility for everyone.'", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "60px", "letterSpacing": "-1.8px" }, { "role": "heading", "size": "40px", "family": "FK Grotesk Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 40px, -1.2px tracking. Used for section headings and large statements.", "sampleId": "font-1", "confidence": 0.9, "lineHeight": "46px", "letterSpacing": "-1.2px" }, { "role": "body", "size": "16px", "family": "FK Grotesk Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-12: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 16px. Used for primary descriptive text and paragraphs.", "sampleId": "font-12", "confidence": 0.9, "lineHeight": "24px", "letterSpacing": "-0.2px" }, { "role": "mono", "size": "12px", "family": "FK Grotesk Mono Medium", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-13: computed CSS at 1440×1000; AI role: FK Grotesk Mono Medium, 12px, 1.9px tracking, uppercase. Used for labels, tags, and secondary metadata.", "sampleId": "font-13", "confidence": 0.9, "lineHeight": "12px", "letterSpacing": "1.9px" } ] } ``` ### 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": "#000000", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(0, 0, 0); AI role: Solid black rgb(0, 0, 0) used as the primary background color across most sections.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(255, 255, 255); AI role: White rgb(255, 255, 255) used for primary headings and body copy.", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#EDFD3A", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-3: computed rgb(237, 253, 58); AI role: Vivid yellow-green rgb(237, 253, 58) used for 'Start Free' buttons and highlights.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#8F8F92", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-2: computed rgb(143, 143, 146); AI role: Gray rgb(143, 143, 146) used for secondary text and placeholders.", "sampleId": "color-2", "confidence": 0.9 }, { "hex": "#1C1C1E", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-16: computed rgb(28, 28, 30); AI role: Dark gray rgb(28, 28, 30) used for floating bars and some button backgrounds.", "sampleId": "color-16", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Buttons appear fully rounded (pill-shaped). Cards have medium border radii (e.g., product cards, testimonials).", "density": "Low density. High reliance on negative space to draw focus to central animations and large typography.", "evidence": "Visual inspection of the crops shows pill buttons, full-width dark backgrounds, and centered alignments.", "borderStyle": "Mostly borderless designs relying on background contrast. Occasional subtle semi-transparent white borders (color-24) on inputs or cards.", "buttonStyle": "Solid fill (color-3) with contrasting dark text for primary actions. Pill shape.", "cornerStyle": "Rounded corners are prominent on interactive elements (buttons, inputs) and product cards.", "contentWidth": "Centered layouts with constrained widths for text readability, expanding to full-width for media and grids.", "spacingRhythm": "Generous vertical padding between main sections, often leveraging full-viewport heights to accommodate scroll-linked narratives." } ``` ### 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": 1440, "captureBounds": { "top": 10839, "bottom": 12567, "pageHeight": 26954 } }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### 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 { "root": null, "cards": [], "media": [], "bounds": { "top": 10839, "bottom": 12567, "pageHeight": 26954 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [] }, "coverage": { "cards": 0, "media": 0, "animations": 0, "elementsInSection": 0 }, "surfaces": { "radii": [], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-10-24T08:09:11.680Z", "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ], "viewportWidth": 1440 } ``` ### 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: 1440px 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: Card template structure (icon, label, title, description, metadata row); Center-dominant staggered three-card composition; Dual-tone heading treatment - Dependencies: Specific gradient color mappings per category; Floating pricing/CTA bar styling; Mono uppercase label font treatment - Guidance: Rebuild the card component with configurable gradient backgrounds and metadata slots; preserve the center-elevated staggered arrangement and heading two-tone emphasis, but motion behavior must be re-verified from source since none was captured. ### Evidence readiness - Coverage: 6/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; timestamped authored motion. ### Agent implementation prompt Create an original features section inspired by the design evidence titled “Overlapping feature cards”. Purpose: A presentation of app content library cards with soft gradients and floating UI treatments. Structure: centered single-column. Source layout label: Centered heading above a staggered or overlapping arrangement of tall, rounded cards.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Three dark, softly glowing routine cards overlapping against a pure black background. Components: heading, app-cards, ui-mockups, floating-button. Style direction: bold, gradient, soft. Observed crop: 960×600px (1.6:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"60px","family":"FK Grotesk Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 60px, -1.8px tracking. Used for prominent headings like 'Daily mobility for everyone.'","sampleId":"font-3","confidence":0.95,"lineHeight":"60px","letterSpacing":"-1.8px"} {"role":"heading","size":"40px","family":"FK Grotesk Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 40px, -1.2px tracking. Used for section headings and large statements.","sampleId":"font-1","confidence":0.9,"lineHeight":"46px","letterSpacing":"-1.2px"} {"role":"body","size":"16px","family":"FK Grotesk Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: FK Grotesk Regular, 16px. Used for primary descriptive text and paragraphs.","sampleId":"font-12","confidence":0.9,"lineHeight":"24px","letterSpacing":"-0.2px"} {"role":"mono","size":"12px","family":"FK Grotesk Mono Medium","source":"computed","traits":"uppercase","weight":"500","evidence":"font-13: computed CSS at 1440×1000; AI role: FK Grotesk Mono Medium, 12px, 1.9px tracking, uppercase. Used for labels, tags, and secondary metadata.","sampleId":"font-13","confidence":0.9,"lineHeight":"12px","letterSpacing":"1.9px"} Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Solid black rgb(0, 0, 0) used as the primary background color across most sections.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White rgb(255, 255, 255) used for primary headings and body copy.","sampleId":"color-4","confidence":0.95} {"hex":"#EDFD3A","name":"primary action","role":"primary-action","source":"computed","evidence":"color-3: computed rgb(237, 253, 58); AI role: Vivid yellow-green rgb(237, 253, 58) used for 'Start Free' buttons and highlights.","sampleId":"color-3","confidence":0.95} {"hex":"#8F8F92","name":"muted text","role":"muted-text","source":"computed","evidence":"color-2: computed rgb(143, 143, 146); AI role: Gray rgb(143, 143, 146) used for secondary text and placeholders.","sampleId":"color-2","confidence":0.9} {"hex":"#1C1C1E","name":"surface","role":"surface","source":"computed","evidence":"color-16: computed rgb(28, 28, 30); AI role: Dark gray rgb(28, 28, 30) used for floating bars and some button backgrounds.","sampleId":"color-16","confidence":0.85} No section-bounded typography samples were measured. No section-bounded color samples were measured. Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[]}; surfaces {"radii":[],"borders":[],"shadows":[]} Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Card template structure (icon, label, title, description, metadata row); Center-dominant staggered three-card composition; Dual-tone heading treatment. Dependencies: Specific gradient color mappings per category; Floating pricing/CTA bar styling; Mono uppercase label font treatment. Adaptation guidance: Rebuild the card component with configurable gradient backgrounds and metadata slots; preserve the center-elevated staggered arrangement and heading two-tone emphasis, but motion behavior must be re-verified from source since none was captured. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.