# Stacked UI feature highlights

Schema: Design Details SECTION.md v3.2
Website: Bloom
Source: https://bloom.security/
Source section IDs: gap-0c191011-6490-9378
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Each row pairs a short serif heading and three arrow-bulleted benefits on the left with a realistic dashboard mockup on the right, so every claim is backed by a visible example.
- Overlapping cards, with a second card peeking from behind the first and soft blurred colour blocks behind them, add depth without clutter.
- Generous whitespace and a muted canvas, dark text and soft surface palette keep the dense UI content readable and calm.

What a screenshot can't show:
- The recording shows scrolling that reveals the UI panels as they transition in, but no easing, stagger or direction is specified.
- No font sizes, line heights or spacing were measured, so exact type scale and row padding are unknown.

Borrow: Pair every benefit list with a believable product mockup placed on a soft colour backdrop, and repeat the same row structure so the page reads quickly.
Leave alone: Don't copy Bloom's mauve palette, the Libre Baskerville headings, or its specific remediation and guardrail dashboard screens; use your own palette, a similar free editorial serif, and your own product visuals.

## Classification

- Type: feature-card
- Layout: A vertical stack of three distinct two-column rows, alternating or consistently keeping text left and UI right.
- Styles: minimal, soft, corporate
- Confidence: 95%

## Purpose and structure

A sequence of stacked feature highlights, each pairing left-aligned text descriptions with right-aligned UI dashboard mockups for remediation, supply chain, and AI guardrails.

Visual signature: The vertical stack of distinct, layered dashboard UI mockups (lists, toggles, charts).

## Components

- Feature Headings
- Bulleted Lists
- UI Mockup Cards

## Typography

- Display: Libre Baskerville — 50px 500
- Heading: Libre Baskerville — 40px 400
- Body: DM Sans — 18px 400

## Functional palette

- Canvas: canvas #F0E9ED
- Text: text #261116
- Surface: surface #DECCD1

## Motion evidence

- 19.0–29.0s — Scrolling reveals multiple transitioning UI panels detailing features like Granular Remediation and AI Guardrails. (90% confidence)

## Section quality

Overall: 58.75/100 (Competent)
Scored coverage: 100%

- Typography: 58 — Headings use the Libre Baskerville serif paired with a clean sans body and small icon labels, giving a legible, editorial contrast against the dense UI screenshots. Hierarchy is clear (heading > arrow bullets) but execution is conventional feature-list typography with no distinctive scale or rhythm beyond the site defaults. Next tier: Needs more intentional type pairing or scale variation specific to this section rather than reused global heading/body styles.
- Composition: 64 — Three stacked two-column rows consistently place text left, layered UI mockups right, with soft gradient-blurred color blocks behind each mockup providing depth and grouping. The layered/overlapping card arrangement (e.g., second card peeking from behind the first) adds a believable sense of depth, and generous whitespace keeps each block legible despite dense UI content. Next tier: The three rows are nearly identical in structure with no variation in rhythm, scale or asymmetry, so composition reads as a repeatable template rather than a considered sequence.
- Motion: 55 — Gemini reports scrolling reveals transitioning UI panels across roughly 10 seconds, implying some panel-to-panel transition, but no specifics on easing, staggering, or directional behavior are given. Next tier: Lacks timestamped detail on how individual elements (text, cards, gradient blocks) animate in relation to each other to justify a higher score.
- Content: 60 — Each block pairs a concise heading, three benefit bullets, and a matching realistic UI mockup that visually demonstrates the claim (remediation list, policy builder, guardrail rules), giving decent text-to-visual correspondence. Next tier: The mockups are generic enterprise dashboard UI patterns (toggle lists, radio forms, line chart) that could belong to many SaaS products, not uniquely tied to the specific claims shown.
- Originality: 52 — The left-text/right-mockup stacked pattern with gradient color blocks behind screenshots is an extremely common SaaS marketing convention seen across countless B2B sites. Next tier: Needs a distinguishing visual or interaction device beyond the standard mockup-plus-gradient-blob template to separate it from generic competitor pages.
- Adaptability: 62 — Structure is a clear repeatable pattern (icon+heading, bullet list, mockup card) that could be reskinned with different UI screenshots and copy fairly cleanly; the deterministic tokens (radius, spacing, palette) are explicit and separable. Next tier: Heavy reliance on bespoke, detailed product UI mockups (specific to this product's dashboards) makes the visual payload non-trivial to swap without recreating equivalent custom interface art.

Strengths:
- Consistent repeatable icon+heading+bullet+mockup pattern across three features
- Layered/overlapping UI card depth with soft gradient color blocks for visual interest
- Clear left-text/right-visual hierarchy aids scanning

Weaknesses:
- Three rows are structurally identical with no variation in rhythm or layout
- Generic enterprise dashboard UI style common across SaaS sites
- Typography reuses global heading/body styles without section-specific treatment
- Motion details are vague, limited to generic scroll-reveal panel transitions

Why it does not reach the next tier: The section lacks a distinguishing structural or visual idea beyond the standard alternating text/mockup SaaS template; all three blocks repeat the same rhythm and the mockups, while detailed, use conventional dashboard UI conventions rather than a memorable custom device.

## Adaptation guidance

- Effort: Medium
- Guidance: Swap in new product screenshots matching the same card dimensions and radius, keep the icon+heading+bullet text block pattern, and retain the gradient color block behind each mockup for consistent depth; redo all rows with new content since structure is template-like.

What transfers:
- Icon + heading + bullet list text block pattern
- Left-text/right-mockup two-column row structure
- Gradient color block behind mockup for depth

Dependencies:
- Specific custom UI mockup screenshots (remediation list, policy builder, guardrail rules)
- Libre Baskerville/DM Sans pairing and established palette tokens

## 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 a single generic Gemini description without granular timestamped element behavior
- No access to exact animation timing, easing or stagger values
- Cannot verify if rows vary in interaction beyond the described scroll reveal

## 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-card
- Structure: two-column
- Layout: A vertical stack of three distinct two-column rows, alternating or consistently keeping text left and UI right.
- Styles: minimal, soft, corporate
- Components: Feature Headings, Bulleted Lists, UI Mockup Cards
- Purpose: A sequence of stacked feature highlights, each pairing left-aligned text descriptions with right-aligned UI dashboard mockups for remediation, supply chain, and AI guardrails.
- Visual signature: The vertical stack of distinct, layered dashboard UI mockups (lists, toggles, charts).
- Place on the page: 7 of 11, after Process (`bloom-security:four-column-process-circles`), before Feature collection (`bloom-security:3d-objects-feature-grid`)

### 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": "50px",
      "family": "Libre Baskerville",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: 50px Libre Baskerville used for the primary Hero H1.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "55px",
      "letterSpacing": "-2.5px"
    },
    {
      "role": "heading",
      "size": "40px",
      "family": "Libre Baskerville",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 40px Libre Baskerville used for major section headings.",
      "sampleId": "font-2",
      "confidence": 0.95,
      "lineHeight": "48px",
      "letterSpacing": "-1.2px"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "DM Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-15: computed CSS at 1440×1000; AI role: 18px DM Sans used for body copy in the hero section.",
      "sampleId": "font-15",
      "confidence": 0.9,
      "lineHeight": "28.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": "#F0E9ED",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(240, 233, 237); AI role: Pale pink background (#F0E9ED) applied to the document body.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#261116",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(38, 17, 22); AI role: Deep burgundy (#261116) used for primary text and headings.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#DECCD1",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-3: computed rgb(222, 204, 209); AI role: Muted pink (#DECCD1) used for background blocks and surfaces.",
      "sampleId": "color-3",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium radius (approx 8-16px) on product UI mockups and feature cards; fully rounded (pill) on buttons.",
  "density": "Low density, characterized by significant whitespace and large typography.",
  "evidence": "Visual observation of the hero button (pill, outline), floating UI mockups (rounded corners, soft shadows), and the ample space between the 'Challenge' and 'Capabilities' sections.",
  "borderStyle": "Mostly borderless relying on soft background contrasts, with thin (1px) solid borders on outline buttons and some UI elements.",
  "buttonStyle": "Pill-shaped with either a solid dark fill or an outline with a transparent fill, often accompanied by an arrow icon.",
  "cornerStyle": "Predominantly rounded, from soft rounded corners on UI cards to fully rounded, pill-shaped buttons.",
  "contentWidth": "Standard max-width container (around 1200px), often utilizing a 50/50 split for text and imagery.",
  "spacingRhythm": "Generous and airy, with large vertical padding (often 100px+) separating distinct content sections."
}
```

### 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** — Scrolling reveals multiple transitioning UI panels detailing features like Granular Remediation and AI Guardrails. (19s–29s; 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: Icon + heading + bullet list text block pattern; Left-text/right-mockup two-column row structure; Gradient color block behind mockup for depth
- Dependencies: Specific custom UI mockup screenshots (remediation list, policy builder, guardrail rules); Libre Baskerville/DM Sans pairing and established palette tokens
- Guidance: Swap in new product screenshots matching the same card dimensions and radius, keep the icon+heading+bullet text block pattern, and retain the gradient color block behind each mockup for consistent depth; redo all rows with new content since structure is template-like.

### 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 “Stacked UI feature highlights”.

Purpose: A sequence of stacked feature highlights, each pairing left-aligned text descriptions with right-aligned UI dashboard mockups for remediation, supply chain, and AI guardrails.

Structure: two-column. Source layout label: A vertical stack of three distinct two-column rows, alternating or consistently keeping text left and UI 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: The vertical stack of distinct, layered dashboard UI mockups (lists, toggles, charts).

Components: Feature Headings, Bulleted Lists, UI Mockup Cards.

Style direction: minimal, soft, corporate.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"50px","family":"Libre Baskerville","source":"computed","traits":"Regular","weight":"500","evidence":"font-6: computed CSS at 1440×1000; AI role: 50px Libre Baskerville used for the primary Hero H1.","sampleId":"font-6","confidence":0.95,"lineHeight":"55px","letterSpacing":"-2.5px"} {"role":"heading","size":"40px","family":"Libre Baskerville","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 40px Libre Baskerville used for major section headings.","sampleId":"font-2","confidence":0.95,"lineHeight":"48px","letterSpacing":"-1.2px"} {"role":"body","size":"18px","family":"DM Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-15: computed CSS at 1440×1000; AI role: 18px DM Sans used for body copy in the hero section.","sampleId":"font-15","confidence":0.9,"lineHeight":"28.8px","letterSpacing":"normal"}

Color evidence: {"hex":"#F0E9ED","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(240, 233, 237); AI role: Pale pink background (#F0E9ED) applied to the document body.","sampleId":"color-1","confidence":0.95} {"hex":"#261116","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(38, 17, 22); AI role: Deep burgundy (#261116) used for primary text and headings.","sampleId":"color-2","confidence":0.95} {"hex":"#DECCD1","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(222, 204, 209); AI role: Muted pink (#DECCD1) used for background blocks and surfaces.","sampleId":"color-3","confidence":0.85}

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: Scrolling reveals multiple transitioning UI panels detailing features like Granular Remediation and AI Guardrails. (90% confidence)

Transfer these principles: Icon + heading + bullet list text block pattern; Left-text/right-mockup two-column row structure; Gradient color block behind mockup for depth.

Dependencies: Specific custom UI mockup screenshots (remediation list, policy builder, guardrail rules); Libre Baskerville/DM Sans pairing and established palette tokens.

Adaptation guidance: Swap in new product screenshots matching the same card dimensions and radius, keep the icon+heading+bullet text block pattern, and retain the gradient color block behind each mockup for consistent depth; redo all rows with new content since structure is template-like.

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