# 3D floral editorial full-bleed

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

## Builder's note

What makes it work:
- The text sits in the one open pocket of the dense vine artwork, so a busy full-bleed image still leaves the message easy to read.
- Light italic serif centered on dark pink gives strong contrast, a comfortable line length, and a clean hierarchy with no competing secondary text.
- The thorny imagery ties directly to the warning-style copy about risk, so the illustration carries meaning rather than just decorating.

What a screenshot can't show:
- The recording showed no specific motion, so any parallax or reveal behavior is unknown.
- No font sizes, line height or spacing were measured, so exact type scale and padding can't be read from the image.

Borrow: Place a short message in a deliberate pocket of negative space inside a dense full-bleed image, and choose imagery that echoes the message's tone.
Leave alone: Don't copy the thorny dark-pink 3D floral artwork or its Libre Baskerville-style italic look; commission or create your own illustration and pair it with another free serif of your choosing.

## Classification

- Type: editorial
- Layout: Full-width background image with centered text overlay.
- Styles: illustrative, bold, editorial, colourful
- Confidence: 92%

## Purpose and structure

A full-bleed editorial section featuring an intricate, thorny, dark pink 3D floral illustration with overlaid text.

Visual signature: The dense, thorny pink 3D vines and bulbous flowers covering the background.

## Components

- 3D Background Illustration
- Overlay Text

## 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

- No section-specific authored motion was established.

## Section quality

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

- Typography: 62 — Centered italic serif (consistent with Libre Baskerville display/heading family) in light tone against the dark pink artwork reads clearly, with sensible line length and clean hierarchy (no secondary text competing). Restrained but not especially crafted beyond size/centering and italics. Next tier: No distinctive type treatment (scale shifts, weight contrast, kerning nuance) beyond a single centered italic block; hierarchy is minimal because there is only one message.
- Composition: 74 — Strong full-bleed illustration with the text carefully placed in the one open negative-space pocket of the dense vine/floral arrangement; the asymmetric, organic framing around a centered message is a considered editorial choice rather than a generic hero layout. Next tier: The text block itself is a plain centered paragraph with no interaction with the surrounding art (no wrapping, integration, or layered depth with the copy) beyond being placed in open space.
- Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section; cannot assess animation, parallax, or reveal behavior. Next tier: Requires timestamped visible motion evidence to assess.
- Content: 64 — The illustration functions as a thematic/tonal statement (thorns, risk, organic growth) paired with a warning-style statement about AI risk, giving the visual a clear conceptual tie to the copy rather than being decorative stock art. Next tier: The copy itself is a generic risk-statement paragraph with no typographic or layout device that deepens the content-image relationship beyond thematic mood.
- Originality: 72 — The dense, thorny, bulbous 3D floral/vine illustration is a distinctive, specific visual signature not reducible to common stock patterns or trending gradients; it reads as a custom asset with a specific art direction. Next tier: Originality rests almost entirely on the illustration asset itself; the surrounding layout (centered text over full-bleed image) is a standard editorial divider pattern, capping how far the idea as a system can be rated.
- Adaptability: 55 — Structure (full-bleed background image + centered overlay text) is simple and clearly separable from the specific illustration skin; swapping the artwork or copy would be straightforward. Next tier: Section's impact depends almost entirely on a bespoke, hard-to-replace illustration, limiting how much of the 'feel' transfers without an equivalent asset.

Strengths:
- Bespoke, highly specific 3D illustration gives the section an unmistakable visual identity
- Text is placed in the one natural negative-space pocket of the artwork, showing composition awareness
- Clear thematic alignment between thorny/risk imagery and the warning-style copy

Weaknesses:
- Typography treatment is minimal—a single centered italic paragraph with no hierarchy variation
- Layout pattern (full-bleed image + centered text) is a common editorial divider structure
- No supplied motion evidence to assess any animated behavior
- Section's distinctiveness is almost entirely carried by one illustration asset rather than a system of design choices

Why it does not reach the next tier: The section is strong because of a genuinely distinctive illustration and careful negative-space placement, but the text treatment, layout structure, and content pairing remain conventional editorial-divider moves; nothing beyond the artwork itself pushes the whole composition into memorable/strong-system territory.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the full-bleed-image-with-centered-text pattern, but any replacement artwork needs an equivalent dense, asymmetric composition with a deliberate open area for text placement to preserve the legibility and balance seen here.

What transfers:
- Full-bleed background image with centered overlay text structure
- Placement logic of positioning text within open negative space of a busy background

Dependencies:
- The specific bespoke 3D floral/vine illustration asset
- Exact color relationship between dark pink background and pale overlay text for legibility

## 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 motion timestamps supplied, so animated behavior (if any) could not be evaluated
- Judgment relies on a single static crop; actual in-context scroll behavior and transitions are 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: editorial
- Source type: editorial
- Structure: centered single-column
- Layout: Full-width background image with centered text overlay.
- Styles: illustrative, bold, editorial, colourful
- Components: 3D Background Illustration, Overlay Text
- Purpose: A full-bleed editorial section featuring an intricate, thorny, dark pink 3D floral illustration with overlaid text.
- Visual signature: The dense, thorny pink 3D vines and bulbous flowers covering the background.
- Place on the page: 5 of 11, after Stats (`efbcae1c-eda9-493e-963f-c12bbc2d08cb`), before Process (`bloom-security:four-column-process-circles`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- 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": "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

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: 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: Full-bleed background image with centered overlay text structure; Placement logic of positioning text within open negative space of a busy background
- Dependencies: The specific bespoke 3D floral/vine illustration asset; Exact color relationship between dark pink background and pale overlay text for legibility
- Guidance: Reuse the full-bleed-image-with-centered-text pattern, but any replacement artwork needs an equivalent dense, asymmetric composition with a deliberate open area for text placement to preserve the legibility and balance seen here.

### 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; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original editorial section inspired by the design evidence titled “3D floral editorial full-bleed”.

Purpose: A full-bleed editorial section featuring an intricate, thorny, dark pink 3D floral illustration with overlaid text.

Structure: centered single-column. Source layout label: Full-width background image with centered text overlay.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: The dense, thorny pink 3D vines and bulbous flowers covering the background.

Components: 3D Background Illustration, Overlay Text.

Style direction: illustrative, bold, editorial, colourful.

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.

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

Transfer these principles: Full-bleed background image with centered overlay text structure; Placement logic of positioning text within open negative space of a busy background.

Dependencies: The specific bespoke 3D floral/vine illustration asset; Exact color relationship between dark pink background and pale overlay text for legibility.

Adaptation guidance: Reuse the full-bleed-image-with-centered-text pattern, but any replacement artwork needs an equivalent dense, asymmetric composition with a deliberate open area for text placement to preserve the legibility and balance seen here.

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