# Bento-style UI Feature Grid Schema: Design Details SECTION.md v3.2 Website: Pleo Source: https://www.pleo.io/en Source section IDs: gap-8cd59d54-1008-3992 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The asymmetric bento grid mixes large and small cards, so the eye moves across the section instead of scanning a uniform row. - Pale grey cards on a near-white canvas keep the UI mockups and the overhead photo as the focus, and a stark black banner gives the grid a strong pause. - Each card pairs a short heading with one line of body copy and its mockup, which makes the product feel believable in context. What a screenshot can't show: - In the recording, the credit card and Entities list slide up and fade in around 3–6s, and the expense and sync components enter from different directions around 8–12s. - No type sizes, spacing or padding were measured, so exact scale and gaps are unknown. Borrow: Place real product UI inside varied-size cards on a quiet neutral surface, then break the grid with one full-width dark banner to reset the rhythm. Leave alone: Don't copy Pleo's pink accent banner, its credit card graphic, or the overhead food photography; use your own accent colour, product visuals and imagery. ## Classification - Type: feature-grid - Layout: Multi-row asymmetric grid (bento layout) with varying card sizes containing nested images and UI snippets. - Styles: minimal, photographic, bold - Confidence: 90% ## Purpose and structure A large feature section using an asymmetric bento box layout to display UI mockups, product photography, and feature highlights, interspersed with a dark banner. Visual signature: A complex grid of white and light grey cards showcasing app interfaces, a credit card, and overhead photography, broken up by a stark black banner. ## Components - bento grid - ui mockups - credit card graphic - full-width banner - feature descriptions ## Typography - Display: Pleo Scandi Gellix Headline — 78px 400 - Heading: Pleo Scandi Gellix Headline — 26px 400 - Body: Pleo Scandi Gellix Text — 16px 400 ## Functional palette - Text: text #131414 - Primary-Action: primary action #FEB6FE - Canvas: canvas #FAFCFC - Surface: surface #EEF4F4 - Muted-Text: muted text #575B5B ## Motion evidence - 3.0–6.0s — Two UI cards (a credit card and an 'Entities' list) slide up and fade into view as the user scrolls. (90% confidence) - 8.0–12.0s — Several UI components related to expense tracking and syncing fade and slide in from different directions as the page is scrolled. (95% confidence) ## Section quality Overall: 61.70/100 (Good) Scored coverage: 100% - Typography: 62 — Clean two-tier hierarchy (heading/body) with consistent card labels; letter-spacing on display face suggests care, but within this crop type is mostly small utilitarian labels and body copy with little variation or expressive scale contrast. Next tier: Introduce stronger size/weight contrast between section headline and card labels, and more considered treatment of UI-mockup typography to elevate beyond functional labeling. - Composition: 68 — Asymmetric bento grid with varied card sizes, a full-bleed dark banner break, and a full-bleed photographic card create rhythm and visual interest; alignment to a central column is consistent and whitespace is generous. Next tier: Grid cells are fairly uniform half-width splits outside the banner/photo breaks; more varied cell proportions or overlapping elements would push composition into memorable territory. - Motion: 58 — Gemini reports specific timestamped slide/fade-in behavior for multiple UI cards from different directions, which is a standard scroll-reveal pattern executed competently but not distinctively. Next tier: Lacks choreography beyond basic directional fade/slide-ins; no evidence of staggered sequencing tied to scroll position or interactive hover states that would feel bespoke. - Content: 65 — UI mockups (card, entities list, policy assistant, sync status) are well-integrated into card backgrounds and paired with concise feature copy, giving a believable product-in-context feel. Next tier: Mockups read as isolated screenshots dropped into cards rather than being compositionally unified with surrounding card chrome; tighter integration (shadows, device framing, consistent card padding) would raise this. - Originality: 55 — Bento grid with UI screenshots and a stark dark statement banner is a widely used SaaS pattern; the pink-accented AI banner and overhead food photography add some brand flavor but the overall structure is familiar. Next tier: Needs a distinguishing structural or interaction idea beyond the now-common bento/UI-mockup convention to be memorable rather than merely tasteful. - Adaptability: 60 — Grid structure, card surface color, copy, and banner are clearly separable layers; mockups are swappable assets and the pattern (heading+body, icon-button link, image) repeats predictably across cards. Next tier: Dependency on custom UI mockup screenshots and specific photographic content makes full skin/structure separation only partially trivial without recreating those assets. Strengths: - Clear alternating rhythm between light UI-mockup cards, a bold dark statement banner, and full-bleed photography breaks up a long scroll convincingly - Consistent card template (title, muted subcopy, arrow link, visual) gives predictable, scannable structure across many feature claims - Restrained color palette (surface greys, single pink accent) keeps a dense grid from feeling cluttered Weaknesses: - Typography across cards is mostly small, same-weight utilitarian labels with little hierarchy variation - UI mockups sit as flat screenshots rather than being framed/integrated into the card design language - Pattern of grid+banner+grid is a common SaaS feature-section convention without a distinguishing structural twist - Motion described is basic directional fade/slide, not clearly differentiated per card Why it does not reach the next tier: The section demonstrates competent, well-organized execution of a familiar bento/feature-grid pattern with tasteful restraint, but no single axis shows the kind of unexpected structural idea, typographic ambition, or choreographed motion needed to feel memorable or hard to substitute. ## Adaptation guidance - Effort: Medium - Guidance: Recreate the grid scaffold, card template, and banner break as reusable layout primitives; swap in placeholder UI screenshots and stock photography sized to the same aspect ratios, and reproduce the scroll fade/slide timing generically rather than matching exact asset content. What transfers: - Asymmetric bento grid structure with alternating card sizes - Card template of heading + muted subcopy + icon-link + visual - Full-bleed dark statement banner breaking up grid rhythm - Scroll-triggered fade/slide-in reveal pattern for cards Dependencies: - Custom UI mockup screenshots (card, entities list, policy assistant, sync status) - Specific overhead food photography and laptop lifestyle photography - Brand pink accent and dark Gellix typeface pairing ## 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 scored from Gemini's timestamped description only, not directly observed - Exact animation easing/duration and hover states not specified - No direct evidence of responsive/mobile adaptation of the grid ## 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-grid - Structure: grid - Layout: Multi-row asymmetric grid (bento layout) with varying card sizes containing nested images and UI snippets. - Styles: minimal, photographic, bold - Components: bento grid, ui mockups, credit card graphic, full-width banner, feature descriptions - Purpose: A large feature section using an asymmetric bento box layout to display UI mockups, product photography, and feature highlights, interspersed with a dark banner. - Visual signature: A complex grid of white and light grey cards showcasing app interfaces, a credit card, and overhead photography, broken up by a stark black banner. - Place on the page: 3 of 7, after Hero (`pleo-io:pleo-hero`), before Testimonials (`pleo-io:pleo-editorial-testimonials`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system. ### 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": "78px", "family": "Pleo Scandi Gellix Headline", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-10: computed CSS at 1440×1000; AI role: 78px Pleo Scandi Gellix Headline with -1.3px letter spacing, used for major visual text elements.", "sampleId": "font-10", "confidence": 0.95, "lineHeight": "72px", "letterSpacing": "-1.3px" }, { "role": "heading", "size": "26px", "family": "Pleo Scandi Gellix Headline", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: 26px Pleo Scandi Gellix Headline used for section titles.", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "31.2px", "letterSpacing": "normal" }, { "role": "body", "size": "16px", "family": "Pleo Scandi Gellix Text", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: 16px Pleo Scandi Gellix Text used for standard paragraph text like testimonial names.", "sampleId": "font-5", "confidence": 0.85, "lineHeight": "21.3px", "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": "#131414", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(19, 20, 20); AI role: #131414 used for primary headings and body text.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FEB6FE", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-3: computed rgb(254, 182, 254); AI role: #FEB6FE (pink) used for primary call-to-action buttons and highlighted section backgrounds.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#FAFCFC", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-4: computed rgb(250, 252, 252); AI role: #FAFCFC used as the primary background color for the page body.", "sampleId": "color-4", "confidence": 0.9 }, { "hex": "#EEF4F4", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(238, 244, 244); AI role: #EEF4F4 used as the background color for feature cards and secondary sections.", "sampleId": "color-2", "confidence": 0.85 }, { "hex": "#575B5B", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-6: computed rgb(87, 91, 91); AI role: #575B5B used for secondary, less prominent text descriptions.", "sampleId": "color-6", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Buttons appear as fully rounded pills; cards likely use a radius of 12px to 16px.", "density": "Low density, breathable layout emphasizing focus on typography and key visuals.", "evidence": "Visual inspection of the screenshots and dominant CSS color/font patterns provided in the facts.", "borderStyle": "Mostly borderless design, relying on subtle background color shifts (#FAFCFC to #EEF4F4) to delineate areas.", "buttonStyle": "Pill-shaped, typically solid fill for primary actions (pink) or subtle backgrounds for secondary actions.", "cornerStyle": "Soft, rounded corners applied consistently to buttons, tags, and larger feature cards.", "contentWidth": "Content is constrained to a central max-width column, though background colors and imagery bleed to the viewport edges.", "spacingRhythm": "Generous vertical rhythm with large padding between distinct sections and internal padding within cards." } ``` ### 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** — Two UI cards (a credit card and an 'Entities' list) slide up and fade into view as the user scrolls. (3s–6s; 90% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — Several UI components related to expense tracking and syncing fade and slide in from different directions as the page is scrolled. (8s–12s; 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: Asymmetric bento grid structure with alternating card sizes; Card template of heading + muted subcopy + icon-link + visual; Full-bleed dark statement banner breaking up grid rhythm; Scroll-triggered fade/slide-in reveal pattern for cards - Dependencies: Custom UI mockup screenshots (card, entities list, policy assistant, sync status); Specific overhead food photography and laptop lifestyle photography; Brand pink accent and dark Gellix typeface pairing - Guidance: Recreate the grid scaffold, card template, and banner break as reusable layout primitives; swap in placeholder UI screenshots and stock photography sized to the same aspect ratios, and reproduce the scroll fade/slide timing generically rather than matching exact asset content. ### 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 “Bento-style UI Feature Grid”. Purpose: A large feature section using an asymmetric bento box layout to display UI mockups, product photography, and feature highlights, interspersed with a dark banner. Structure: grid. Source layout label: Multi-row asymmetric grid (bento layout) with varying card sizes containing nested images and UI snippets.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system. Visual signature to preserve at the pattern level: A complex grid of white and light grey cards showcasing app interfaces, a credit card, and overhead photography, broken up by a stark black banner. Components: bento grid, ui mockups, credit card graphic, full-width banner, feature descriptions. Style direction: minimal, photographic, bold. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"78px","family":"Pleo Scandi Gellix Headline","source":"computed","traits":"Regular","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: 78px Pleo Scandi Gellix Headline with -1.3px letter spacing, used for major visual text elements.","sampleId":"font-10","confidence":0.95,"lineHeight":"72px","letterSpacing":"-1.3px"} {"role":"heading","size":"26px","family":"Pleo Scandi Gellix Headline","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 26px Pleo Scandi Gellix Headline used for section titles.","sampleId":"font-2","confidence":0.9,"lineHeight":"31.2px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Pleo Scandi Gellix Text","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 16px Pleo Scandi Gellix Text used for standard paragraph text like testimonial names.","sampleId":"font-5","confidence":0.85,"lineHeight":"21.3px","letterSpacing":"normal"} Color evidence: {"hex":"#131414","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(19, 20, 20); AI role: #131414 used for primary headings and body text.","sampleId":"color-1","confidence":0.95} {"hex":"#FEB6FE","name":"primary action","role":"primary-action","source":"computed","evidence":"color-3: computed rgb(254, 182, 254); AI role: #FEB6FE (pink) used for primary call-to-action buttons and highlighted section backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#FAFCFC","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(250, 252, 252); AI role: #FAFCFC used as the primary background color for the page body.","sampleId":"color-4","confidence":0.9} {"hex":"#EEF4F4","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(238, 244, 244); AI role: #EEF4F4 used as the background color for feature cards and secondary sections.","sampleId":"color-2","confidence":0.85} {"hex":"#575B5B","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(87, 91, 91); AI role: #575B5B used for secondary, less prominent text descriptions.","sampleId":"color-6","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: Two UI cards (a credit card and an 'Entities' list) slide up and fade into view as the user scrolls. (90% confidence) scroll: Several UI components related to expense tracking and syncing fade and slide in from different directions as the page is scrolled. (95% confidence) Transfer these principles: Asymmetric bento grid structure with alternating card sizes; Card template of heading + muted subcopy + icon-link + visual; Full-bleed dark statement banner breaking up grid rhythm; Scroll-triggered fade/slide-in reveal pattern for cards. Dependencies: Custom UI mockup screenshots (card, entities list, policy assistant, sync status); Specific overhead food photography and laptop lifestyle photography; Brand pink accent and dark Gellix typeface pairing. Adaptation guidance: Recreate the grid scaffold, card template, and banner break as reusable layout primitives; swap in placeholder UI screenshots and stock photography sized to the same aspect ratios, and reproduce the scroll fade/slide timing generically rather than matching exact asset content. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.