# Bento grid of UI feature cards

Schema: Design Details SECTION.md v3.2
Website: DualEntry
Source: https://www.dualentry.com/
Source section IDs: 132009f4-876b-45ac-bc8b-8418fe4aafa9
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- One wide card among equal cards gives the bento grid rhythm, while the thin borders and consistent 8px radius keep it orderly.
- Each card pairs a short title and one-line benefit with a believable mini product screen that matches its label, so the features read as real.
- A left-aligned 48px heading over a white canvas with pale gray borders and dark text gives clear hierarchy and generous whitespace.

What a screenshot can't show:
- The recording showed no motion, so hover or scroll behavior is unknown.
- Measured type: the heading is 48px/52.8px at weight 400, and card titles are 20px/30px at weight 300, both with normal letter spacing.

Borrow: Vary card widths in a quiet, uniform frame of thin borders and one radius, and let realistic product snippets carry the message.
Leave alone: Don't copy the Twklausanne typeface (commercial; use a clean grotesque like Inter), the pale gray-blue border color, or the accounting-specific UI mockups.

## Classification

- Type: feature-grid
- Layout: Multi-column irregular bento grid layout below a left-aligned heading.
- Styles: minimal, corporate, illustrative
- Confidence: 95%

## Purpose and structure

A grid of stylized cards showcasing different accounting modules. Each card contains a mini UI illustration, title, and short description.

Visual signature: Clean white background filled with light gray outlined cards containing abstract software interface snippets.

## Components

- section-heading
- feature-card
- ui-illustration
- bento-grid

## Typography

- Display: Twklausanne — 56px 400
- Heading: Twklausanne — 48px 400
- Body: Twklausanne — 16px 300

## Functional palette

- Text: text #1D1F20
- Canvas: canvas #FFFFFF
- Border: border #E4EBEC
- Surface: surface #1C1D1E

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 61.12/100 (Good)
Scored coverage: 85%

- Typography: 62 — Clean single-family hierarchy (56/48/16px Twklausanne) with clear size contrast between heading and card titles/body. Functional and legible but unremarkable weight/size pairing, no distinctive type personality within the cards themselves. Next tier: Needs more deliberate type-driven hierarchy within cards (e.g. varied weights, numerals treated as display elements) rather than uniform body-size labels across all mini-UI illustrations.
- Composition: 68 — Irregular bento grid with one wide card and six equal cards creates visual rhythm and asymmetry; consistent 8px radius and thin borders unify the grid while card content varies in density. Alignment is clean and whitespace is generous around the grid, giving it a considered, organized feel. Next tier: The grid logic (why one card is wide, others square) isn't tied to content importance strongly enough, and spacing inside cards is uniform/safe rather than tailored per illustration, keeping composition in the polished-but-templated range.
- Motion: not_assessed — No animation data or timestamped motion evidence was supplied for this section; the animations array is empty. Next tier: Provide timestamped visible motion (hover states, card reveals, cursor interactions) to assess.
- Content: 65 — Each card pairs a concise title, one-line value prop, and a believable product screenshot (dashboards, invoice tables, upload UI) that visibly matches its label, giving real product credibility rather than generic stock art. Next tier: Illustrations are literal screenshots rather than purpose-built abstractions, so content feels like a feature list with proof rather than a crafted narrative connecting the seven modules.
- Originality: 48 — This is a very common bento/feature-grid pattern (irregular card sizes, outlined cards, mini dashboard previews) seen across many SaaS marketing sites; nothing here departs from that convention. Next tier: Would need a distinctive interaction model, unexpected grid logic, or a visual treatment unique to this brand to move past familiar competent territory.
- Adaptability: 60 — Structure is modular and clearly componentized (repeatable card with icon, title, subtitle, image) with consistent token values (8px radius, 1px border) that are easy to reskin or resize into a different grid arrangement. Next tier: Heavy dependency on bespoke product screenshots as the primary visual content limits plug-and-play reuse without equivalent custom assets.

Strengths:
- Irregular bento sizing with one wide hero card breaks grid monotony while staying orderly
- Each card uses an authentic, legible product screenshot that reinforces the stated feature
- Consistent thin border/radius treatment unifies seven different content types into one coherent grid

Weaknesses:
- Pattern is a widely used bento-grid feature convention with no distinguishing twist
- Uniform card typography and padding make the section feel templated rather than custom-tuned
- No motion evidence provided, so interactive affordances (hover, arrow icon) can't be verified

Why it does not reach the next tier: The grid is competently executed and content-rich but relies entirely on a common bento layout convention and literal product screenshots; it lacks a distinctive structural or interaction idea that would make it memorable beyond 'well-organized feature grid.'

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the grid skeleton and card shell tokens (border, radius, spacing) for any multi-feature overview; swap in new screenshots/illustrations and copy per brand, keeping the wide-first-card plus six-equal-card rhythm to preserve the visual hierarchy.

What transfers:
- Irregular bento grid proportions (one wide card + six equal cards)
- Card shell: thin border, 8px radius, title + subtitle + image stack
- Top-right arrow icon affordance pattern on each card

Dependencies:
- Seven bespoke product-UI screenshots matched to each module name
- Specific copy pairing (module name + benefit tagline) for seven features

## 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 animation/motion data supplied, so hover or reveal behavior is unverified
- Exact font rendering and color values for card-internal UI mockups not independently confirmed beyond listed tokens

## 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-column irregular bento grid layout below a left-aligned heading.
- Styles: minimal, corporate, illustrative
- Components: section-heading, feature-card, ui-illustration, bento-grid
- Purpose: A grid of stylized cards showcasing different accounting modules. Each card contains a mini UI illustration, title, and short description.
- Visual signature: Clean white background filled with light gray outlined cards containing abstract software interface snippets.
- Place on the page: 3 of 9, after Hero (`dualentry-com:C02`), before Call to action (`dualentry-com:C04`)

### Crop and composition

- Crop: 1440×1345px; aspect ratio 1.071:1
- Page bounds: 898–2243px of 6763px
- 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": [
    {
      "role": "section heading",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "48px",
      "weight": "400",
      "lineHeight": "52.8px",
      "letterSpacing": "normal",
      "sample": "The accounting suite that runs while you lead.",
      "element": "h2",
      "occurrences": 10,
      "sourceId": "font-2"
    },
    {
      "role": "card/subheading",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "20px",
      "weight": "300",
      "lineHeight": "30px",
      "letterSpacing": "normal",
      "sample": "Multi-Entity Management",
      "element": "h3",
      "occurrences": 8,
      "sourceId": "font-3"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "56px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "61.6px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "52.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.",
      "sampleId": "font-7",
      "confidence": 0.85,
      "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": [
    {
      "value": "#F5F6F6",
      "cssValue": "rgb(245, 246, 246)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 90,
      "sourceId": "color-5"
    },
    {
      "value": "#E4EBEC",
      "cssValue": "rgb(228, 235, 236)",
      "alpha": 1,
      "appliedAs": [
        "border"
      ],
      "occurrences": 525,
      "sourceId": "color-9"
    },
    {
      "value": "#1D1F20",
      "cssValue": "rgba(29, 31, 32, 0.65)",
      "alpha": 0.6509803921568628,
      "appliedAs": [
        "text"
      ],
      "occurrences": 7,
      "sourceId": "color-13"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#1D1F20",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#E4EBEC",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.",
      "sampleId": "color-9",
      "confidence": 0.9
    },
    {
      "hex": "#1C1D1E",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.",
      "sampleId": "color-18",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium border radius appears common on cards and buttons.",
  "density": "Moderate density; ample whitespace around main elements, but dense information packing within feature cards and footer links.",
  "evidence": "Observed via the bento-box feature grid, consistent button styling, and organized footer layout.",
  "borderStyle": "Subtle, thin solid borders (e.g., 1px) used to define cards and form elements.",
  "buttonStyle": "Solid white primary buttons on dark backgrounds, dark solid buttons on light backgrounds, with rounded corners.",
  "cornerStyle": "Consistent use of rounded corners on buttons, inputs, and feature cards.",
  "contentWidth": "Content is generally constrained to a central max-width, though background gradients and banners span full width.",
  "spacingRhythm": "Generous spacing between major sections, with tighter padding inside feature cards and UI components."
}
```

### 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.
- Representative content widths: 607, 605, 557, 540, 292, 290, 242px.
- Layout containers: 7; cards/surfaces: 7; media elements: 12; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 898,
      "bottom": 2243,
      "pageHeight": 6763
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      607,
      605,
      557,
      540,
      292,
      290,
      242
    ]
  },
  "columns": [
    {
      "element": "a · Multi-Entity Management One view, every entity.",
      "size": "607×473px",
      "position": "x 101px, y 1139px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · General Ledger Your full financial picture.",
      "size": "292×473px",
      "position": "x 732px, y 1139px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · Reporting & Analytics Any angle. Every opportunity.",
      "size": "292×473px",
      "position": "x 1048px, y 1139px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · Revenue Recognition Every contract type. Zero guesswork.",
      "size": "292×527px",
      "position": "x 101px, y 1636px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · Accounts Payable Capture, approve, done.",
      "size": "292×527px",
      "position": "x 417px, y 1636px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · Accounts Receivable Get paid. Stay reconciled.",
      "size": "292×527px",
      "position": "x 732px, y 1636px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · Budgeting & Forecasting Less budgetV15.xlsx, more foresight.",
      "size": "292×527px",
      "position": "x 1048px, y 1636px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "a · Multi-Entity Management One view, every entity.",
      "size": "607×473px",
      "position": "x 101px, y 1139px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "1px solid rgb(228, 235, 236)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "a · Revenue Recognition Every contract type. Zero guesswork.",
      "size": "292×527px",
      "position": "x 101px, y 1636px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "1px solid rgb(228, 235, 236)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "a · Accounts Payable Capture, approve, done.",
      "size": "292×527px",
      "position": "x 417px, y 1636px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "1px solid rgb(228, 235, 236)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "a · Accounts Receivable Get paid. Stay reconciled.",
      "size": "292×527px",
      "position": "x 732px, y 1636px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "1px solid rgb(228, 235, 236)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "a · Budgeting & Forecasting Less budgetV15.xlsx, more foresight.",
      "size": "292×527px",
      "position": "x 1048px, y 1636px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "1px solid rgb(228, 235, 236)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "a · General Ledger Your full financial picture.",
      "size": "292×473px",
      "position": "x 732px, y 1139px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "1px solid rgb(228, 235, 236)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "a · Reporting & Analytics Any angle. Every opportunity.",
      "size": "292×473px",
      "position": "x 1048px, y 1139px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "1px solid rgb(228, 235, 236)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "8px"
    ],
    "borders": [
      "1px solid rgb(228, 235, 236)"
    ],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · max-width-full object-fit-cover",
    "size": "605×358px",
    "position": "x 102px, y 1253px",
    "aspectRatio": 1.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33a1e3ef592b3d5718_home-bento-1.avif"
  },
  {
    "element": "img · max-width-full object-fit-cover",
    "size": "290×361px",
    "position": "x 733px, y 1250px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c332e9ce4d173a85bbc_home-bento-2.avif"
  },
  {
    "element": "img · max-width-full object-fit-cover",
    "size": "290×361px",
    "position": "x 1049px, y 1250px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33344814476e3930cd_home-bento-3.avif"
  },
  {
    "element": "img · max-width-full object-fit-cover",
    "size": "290×361px",
    "position": "x 102px, y 1801px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33fc33869d5e178fb6_home-bento-4.avif"
  },
  {
    "element": "img · max-width-full object-fit-cover",
    "size": "290×361px",
    "position": "x 418px, y 1801px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33d9d96fd93fb71220_home-bento-5.avif"
  },
  {
    "element": "img · max-width-full object-fit-cover",
    "size": "290×361px",
    "position": "x 733px, y 1801px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c335e12ca31f538d78a_home-bento-6.avif"
  },
  {
    "element": "img · max-width-full object-fit-cover",
    "size": "290×361px",
    "position": "x 1049px, y 1801px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33436fb85732ccf3ee_home-bento-7.avif"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 663px, y 1171px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 979px, y 1171px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 1294px, y 1171px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 348px, y 1668px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 663px, y 1668px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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": [
    {
      "id": "ld-2226",
      "tag": "a",
      "rect": {
        "x": 101,
        "y": 1139,
        "width": 607,
        "height": 473
      },
      "role": null,
      "label": "Multi-Entity Management One view, every entity.",
      "border": "1px solid rgb(228, 235, 236)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2259",
      "tag": "a",
      "rect": {
        "x": 101,
        "y": 1636,
        "width": 292,
        "height": 527
      },
      "role": null,
      "label": "Revenue Recognition Every contract type. Zero guesswork.",
      "border": "1px solid rgb(228, 235, 236)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2270",
      "tag": "a",
      "rect": {
        "x": 417,
        "y": 1636,
        "width": 292,
        "height": 527
      },
      "role": null,
      "label": "Accounts Payable Capture, approve, done.",
      "border": "1px solid rgb(228, 235, 236)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2281",
      "tag": "a",
      "rect": {
        "x": 732,
        "y": 1636,
        "width": 292,
        "height": 527
      },
      "role": null,
      "label": "Accounts Receivable Get paid. Stay reconciled.",
      "border": "1px solid rgb(228, 235, 236)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2292",
      "tag": "a",
      "rect": {
        "x": 1048,
        "y": 1636,
        "width": 292,
        "height": 527
      },
      "role": null,
      "label": "Budgeting & Forecasting Less budgetV15.xlsx, more foresight.",
      "border": "1px solid rgb(228, 235, 236)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2237",
      "tag": "a",
      "rect": {
        "x": 732,
        "y": 1139,
        "width": 292,
        "height": 473
      },
      "role": null,
      "label": "General Ledger Your full financial picture.",
      "border": "1px solid rgb(228, 235, 236)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2248",
      "tag": "a",
      "rect": {
        "x": 1048,
        "y": 1139,
        "width": 292,
        "height": 473
      },
      "role": null,
      "label": "Reporting & Analytics Any angle. Every opportunity.",
      "border": "1px solid rgb(228, 235, 236)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-2236",
      "tag": "img",
      "rect": {
        "x": 102,
        "y": 1253,
        "width": 605,
        "height": 358
      },
      "role": null,
      "label": "max-width-full object-fit-cover",
      "media": {
        "alt": "DualEntry multi-entity view adding companies across US, UK, Canada and Germany",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33a1e3ef592b3d5718_home-bento-1.avif",
        "naturalWidth": 1288,
        "naturalHeight": 720
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2247",
      "tag": "img",
      "rect": {
        "x": 733,
        "y": 1250,
        "width": 290,
        "height": 361
      },
      "role": null,
      "label": "max-width-full object-fit-cover",
      "media": {
        "alt": "DualEntry executive dashboard with revenue and expense charts on a laptop",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c332e9ce4d173a85bbc_home-bento-2.avif",
        "naturalWidth": 620,
        "naturalHeight": 728
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2258",
      "tag": "img",
      "rect": {
        "x": 1049,
        "y": 1250,
        "width": 290,
        "height": 361
      },
      "role": null,
      "label": "max-width-full object-fit-cover",
      "media": {
        "alt": "DualEntry report builder arranging income, expenses and net income rows",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33344814476e3930cd_home-bento-3.avif",
        "naturalWidth": 620,
        "naturalHeight": 720
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2269",
      "tag": "img",
      "rect": {
        "x": 102,
        "y": 1801,
        "width": 290,
        "height": 361
      },
      "role": null,
      "label": "max-width-full object-fit-cover",
      "media": {
        "alt": "DualEntry SaaS metrics dashboard showing ARR, MRR and deferred revenue",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33fc33869d5e178fb6_home-bento-4.avif",
        "naturalWidth": 620,
        "naturalHeight": 720
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2280",
      "tag": "img",
      "rect": {
        "x": 418,
        "y": 1801,
        "width": 290,
        "height": 361
      },
      "role": null,
      "label": "max-width-full object-fit-cover",
      "media": {
        "alt": "DualEntry AI bill upload dropzone processing two PDF bills",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33d9d96fd93fb71220_home-bento-5.avif",
        "naturalWidth": 620,
        "naturalHeight": 720
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2291",
      "tag": "img",
      "rect": {
        "x": 733,
        "y": 1801,
        "width": 290,
        "height": 361
      },
      "role": null,
      "label": "max-width-full object-fit-cover",
      "media": {
        "alt": "DualEntry invoice list with paid and overdue statuses and send reminder option",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c335e12ca31f538d78a_home-bento-6.avif",
        "naturalWidth": 620,
        "naturalHeight": 720
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2302",
      "tag": "img",
      "rect": {
        "x": 1049,
        "y": 1801,
        "width": 290,
        "height": 361
      },
      "role": null,
      "label": "max-width-full object-fit-cover",
      "media": {
        "alt": "DualEntry forecast chart comparing actual and forecast revenue with variance",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69b18c33436fb85732ccf3ee_home-bento-7.avif",
        "naturalWidth": 620,
        "naturalHeight": 720
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2232",
      "tag": "svg",
      "rect": {
        "x": 663,
        "y": 1171,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2243",
      "tag": "svg",
      "rect": {
        "x": 979,
        "y": 1171,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2254",
      "tag": "svg",
      "rect": {
        "x": 1294,
        "y": 1171,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2265",
      "tag": "svg",
      "rect": {
        "x": 348,
        "y": 1668,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2276",
      "tag": "svg",
      "rect": {
        "x": 663,
        "y": 1668,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 898,
    "bottom": 2243,
    "pageHeight": 6763
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-2226",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 101,
        "y": 1139,
        "width": 607,
        "height": 473
      },
      "role": null,
      "label": "Multi-Entity Management One view, every entity.",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-2237",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 732,
        "y": 1139,
        "width": 292,
        "height": 473
      },
      "role": null,
      "label": "General Ledger Your full financial picture.",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-2248",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 1048,
        "y": 1139,
        "width": 292,
        "height": 473
      },
      "role": null,
      "label": "Reporting & Analytics Any angle. Every opportunity.",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-2259",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 101,
        "y": 1636,
        "width": 292,
        "height": 527
      },
      "role": null,
      "label": "Revenue Recognition Every contract type. Zero guesswork.",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-2270",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 417,
        "y": 1636,
        "width": 292,
        "height": 527
      },
      "role": null,
      "label": "Accounts Payable Capture, approve, done.",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-2281",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 732,
        "y": 1636,
        "width": 292,
        "height": 527
      },
      "role": null,
      "label": "Accounts Receivable Get paid. Stay reconciled.",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-2292",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 1048,
        "y": 1636,
        "width": 292,
        "height": 527
      },
      "role": null,
      "label": "Budgeting & Forecasting Less budgetV15.xlsx, more foresight.",
      "columns": null,
      "display": "flex",
      "direction": "column"
    }
  ],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      607,
      605,
      557,
      540,
      292,
      290,
      242
    ]
  },
  "coverage": {
    "cards": 7,
    "media": 12,
    "animations": 0,
    "elementsInSection": 36
  },
  "surfaces": {
    "radii": [
      "8px"
    ],
    "borders": [
      "1px solid rgb(228, 235, 236)"
    ],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-29T16:48:55.968Z",
  "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: Irregular bento grid proportions (one wide card + six equal cards); Card shell: thin border, 8px radius, title + subtitle + image stack; Top-right arrow icon affordance pattern on each card
- Dependencies: Seven bespoke product-UI screenshots matched to each module name; Specific copy pairing (module name + benefit tagline) for seven features
- Guidance: Reuse the grid skeleton and card shell tokens (border, radius, spacing) for any multi-feature overview; swap in new screenshots/illustrations and copy per brand, keeping the wide-first-card plus six-equal-card rhythm to preserve the visual hierarchy.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Bento grid of UI feature cards”.

Purpose: A grid of stylized cards showcasing different accounting modules. Each card contains a mini UI illustration, title, and short description.

Structure: grid. Source layout label: Multi-column irregular bento grid layout below a left-aligned heading.. 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: Clean white background filled with light gray outlined cards containing abstract software interface snippets.

Components: section-heading, feature-card, ui-illustration, bento-grid.

Style direction: minimal, corporate, illustrative.

Observed crop: 1440×1345px (1.071:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"56px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.","sampleId":"font-4","confidence":0.95,"lineHeight":"61.6px","letterSpacing":"normal"} {"role":"heading","size":"48px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'","sampleId":"font-2","confidence":0.9,"lineHeight":"52.8px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"300","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.","sampleId":"font-7","confidence":0.85,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#1D1F20","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.","sampleId":"color-3","confidence":0.9} {"hex":"#E4EBEC","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.","sampleId":"color-9","confidence":0.9} {"hex":"#1C1D1E","name":"surface","role":"surface","source":"computed","evidence":"color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.","sampleId":"color-18","confidence":0.85}

Typography measured inside this section: {"id":"font-2","size":"48px","count":10,"family":"Twklausanne","traits":"Regular","weight":"400","contexts":[{"tag":"h2","top":969,"text":"The accounting suite that runs while you lead.","property":"font"},{"tag":"h2","top":2570,"text":"Discover the ambitious teamssaving time & money on DualEntry","property":"font"},{"tag":"h3","top":3193,"text":"How Slash runs a $600M ARR fintech on a finance team of two","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"52.8px","letterSpacing":"normal"} {"id":"font-3","size":"20px","count":8,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"h3","top":1164,"text":"Multi-Entity Management","property":"font"},{"tag":"h3","top":1164,"text":"General Ledger","property":"font"},{"tag":"h3","top":1164,"text":"Reporting & Analytics","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"30px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-5","hex":"#F5F6F6","alpha":1,"count":90,"contexts":[{"tag":"div","top":2243,"text":"Anomaly detection","property":"background"}],"cssValue":"rgb(245, 246, 246)"} {"id":"color-9","hex":"#E4EBEC","alpha":1,"count":525,"contexts":[{"tag":"div","top":898,"text":"The accounting suite that runs while you lead.Multi-Entity Management One view, every entity.General","property":"border"},{"tag":"a","top":1139,"text":"Multi-Entity Management One view, every entity.","property":"border"}],"cssValue":"rgb(228, 235, 236)"} {"id":"color-13","hex":"#1D1F20","alpha":0.6509803921568628,"count":7,"contexts":[{"tag":"p","top":1202,"text":"One view, every entity.","property":"text"}],"cssValue":"rgba(29, 31, 32, 0.65)"}

Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[607,605,557,540,292,290,242]}; surfaces {"radii":["8px"],"borders":["1px solid rgb(228, 235, 236)"],"shadows":[]}; media [{"tag":"img","rect":{"x":102,"y":1253,"width":605,"height":358},"aspectRatio":1.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":733,"y":1250,"width":290,"height":361},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1049,"y":1250,"width":290,"height":361},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":102,"y":1801,"width":290,"height":361},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Irregular bento grid proportions (one wide card + six equal cards); Card shell: thin border, 8px radius, title + subtitle + image stack; Top-right arrow icon affordance pattern on each card.

Dependencies: Seven bespoke product-UI screenshots matched to each module name; Specific copy pairing (module name + benefit tagline) for seven features.

Adaptation guidance: Reuse the grid skeleton and card shell tokens (border, radius, spacing) for any multi-feature overview; swap in new screenshots/illustrations and copy per brand, keeping the wide-first-card plus six-equal-card rhythm to preserve the visual hierarchy.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.